React 在 16.8 的版本中添加了 React Hooks 。之前，我们如果想使用 state，则必须要创建类组件，现在利用 Hooks，函数组件也可以使用 state 了（当然，不仅仅是 state）
Why Hooks?
我们在写组件的时候，经常遇到一些复杂的组件由于是 stateful 无法拆分，这类问题很普标，包括像动画、表单处理、获取远程数据。
- 大的组件不易拆分且难测试
- 组件之间活生命周期之间逻辑重复
- 模式复杂，像 render props 和 HOC
What Are Hooks?
现在 React apps 有很多复用逻辑的方法。但是对非展示逻辑的代码复用却比较困难。函数似乎是一种完美的代码复用方式。在函数之间提取公共逻辑很容易。但是，函数却不能存储 React state。Hook 解决了这个问题。Hooks 允许您通过执行单个函数调用来使用函数中的 React 功能（如 state）。React 提供了一些内置的 Hooks，这些钩子可以访问到 state，lifecycle,context。
由于 Hooks 是正规的 JS 函数，所以你可以组合 React 内置的钩子来生成你自己的钩子。
Show Code
看一下最简单的用法：
1
2
3
4
5
6
7
8
9
10
11
12
| import React, { useState } from "react";
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
|
利用内置的钩子，创建一个 Custom Hooks：
live demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
import React, { useState, useEffect } from "react";
export default function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
});
return width;
}
|
1
2
3
4
5
6
7
8
9
10
11
12
|
import React, { useState } from "react";
import ReactDOM from "react-dom";
import useWindowWidth from "./useWindowWidth";
function Width(props) {
const width = useWindowWidth();
return <div>{width}</div>;
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Width />, rootElement);
|