如何用React Hooks简化受控组件状态绑定成长尾？

本文共计2057个文字，预计阅读时间需要9分钟。

在开始之前，需要理解以下几项内容：- ECMAScript 6- 文章中大量使用ES6语法，例如解构赋值、函数参数默认值、剩余参数、展开语法、箭头函数等。- Hooks- React 16.8版本中推出的Hooks。

开始之前

阅读本文需要对以下几项有一定了解

ECMAScript 6

文章中大量用到了 ES6 语法，比如解构赋值和函数参数默认值、剩余参数、展开语法、箭头函数等。

Hooks

React 在 16.8 版本中推出了 Hooks，它允许你在“函数组件”中使用“类组件”的一些特性。

React 本身提供了一些 Hooks，比如 useState、useReducer 等。通过在一个以“use”作为命名起始的函数中调用这些 Hooks，就得到了一个 custom Hook(自定义 Hook)。

Custom Hooks 允许我们把任何逻辑封装到其中，以便于复用足够小的组件逻辑。

Controlled Components

当我们把像 <input> <textarea> 和 <select> 这样的 HTML 元素本身的状态交给 React state 去管理，我们就得到了一个“受控组件”。