共计 1130 个字符，预计需要花费 3 分钟才能阅读完成。
React Hooks
React 在 16.7.0-alpha.0 版本中提到了 Hooks 的概念，目前还是 Proposal 阶段。
官方也陈述，接下来的 90% 的工作会投入到 React Hooks 中。
从目前官方的文档可以看出，Hooks 从以下四个方面来提高 React 的编码。
state
生命周期
content
自定义方法
Hooks 的主要用途是替代之前版本的 class 组件。
说明：
到目前为止，React 在已发布的 release 版本中有该功能，想体验该功能，必须安装 16.7.0-alpha.0。
npm i react@16.7.0-alpha.0 react-dom@16.7.0-alpha.0
// 或者
yarn add react@16.7.0-alpha.0 react-dom@16.7.0-alpha.0
State Hooks
首先看一个 React 既有的版本基于 class 的组件.
import React from ‘react’;
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {count: 0};
}
render() {
const {count} = this.state;
return (
<React.Fragment>
<p>You clicked {count} times</p>
<button onClick={() => setState({count : count + 1})}>
Click me
</button>
</React.Fragment>
);
}
}
接下来我们看看用 Hooks 是如何实现的：
import React, {useState} from ‘react’;
export default () => {
const [count, setCount] = useState(0);
return (
<React.Fragment>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1) }>
Click me
</button>
</React.Fragment>
);
};
从代码结构上，减少了编码量。由原来的 class 组件变成 function 组件了。
不同的地方：
新加入了 useState 方法
通过 useState 钩子解构出了 state 与 setState 方法。
state 的默认值，直接通过 useState 传入
更新 state 不再使用 setState 方法。
如果有多个 state 怎么定义呢？
const [count, setCount] = useState(0);
const [name, setName] = useState(null);
在线示例推荐阅读《React 手稿》
