共计 2000 个字符，预计需要花费 5 分钟才能阅读完成。
一、组件类的毛病
v16.8 版本引入了全新的 API，叫做 React Hooks.
v16.8 版本之前，组件的规范写法是类（class）。上面是一个简略的组件类。
import React, {Component} from "react";
export default class Button extends Component {constructor() {super();
this.state = {buttonText: "Click me, please"};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {this.setState(() => {return { buttonText: "Thanks, been clicked!"};
});
}
render() {const { buttonText} = this.state;
return <button onClick={this.handleClick}>{buttonText}</button>;
}
}这个组件类仅仅是一个按钮，但能够看到，它的代码曾经很 ” 重 ” 了。实在的 React App 由多个类依照层级，一层层形成，复杂度成倍增长。再退出 Redux，就变得更简单。
Redux 的作者 Dan Abramov 总结了组件类的几个毛病。
- 大型组件很难拆分和重构，也很难测试。
- 业务逻辑扩散在组件的各个办法之中，导致反复逻辑或关联逻辑。
- 组件类引入了简单的编程模式，比方 render props 和高阶组件。
二、函数组件
React 团队心愿，组件不要变成 简单 的容器，最好只是 数据流 的管道。开发者依据须要，组合管道即可。组件的最佳写法应该是函数 ，而不是类。
不过之前的版本中函数定义组件
function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}然而，这种写法有重大限度，必须是 纯函数 ，不能蕴含 状态 ，也不反对 生命周期 办法，因而无奈取代类。React Hooks 的设计目标，就是加强版函数组件，齐全不应用 ” 类 ”，就能写出一个全功能的组件。也就是函数组件能够像类组件一样应用。
纯函数
三、Hook 的含意
Hook 这个单词的意思是 ” 钩子 ”。
React Hooks 的意思是，组件尽量写成纯函数，如果须要内部性能和副作用，就用钩子把内部代码 ” 钩 ” 进来。React Hooks 就是那些钩子。你须要什么性能，就应用什么钩子。React 默认提供了一些罕用钩子，你也能够封装本人的钩子。所有的钩子都是为函数引入内部性能，所以 React 约定，钩子一律应用 use 前缀命名，便于辨认。你要应用 xxx 性能，钩子就命名为 usexxx。
以下是 React 默认提供的四个最罕用的钩子。
- useState()
- useContext()
- useReducer()
- useEffect()
四 罕用 hooks
1. useState 状态钩子
useState() 用于为函数组件引入状态（state）。纯函数不能有状态，所以把状态放在钩子外面。
useState()这个函数承受状态的 初始值，作为参数，该函数返回一个数组，数组的第一个成员是一个变量，指向状态的以后值。第二个成员是一个函数，用来更新状态，约定是 set 前缀加上状态的变量名。
2. useEffect 副作用钩子
useEffect()用来引入具备副作用的操作，最常见的就是向服务器申请数据。以前，放在 componentDidMount 外面的代码，当初能够放在 useEffect()
语法：
useEffect(() => {// Async Action}, [dependencies])useEffect()承受两个参数。第一个参数是一个函数，异步操作的代码放在外面。第二个参数是一个数组，用于给出 Effect 的依赖项，只有这个数组发生变化，useEffect()就会执行。第二个参数能够省略，这时每次组件渲染时，就会执行 useEffect()。
3. useReducer action 钩子
- React 自身不提供状态治理性能，通常须要应用内部库。这方面最罕用的库是 Redux。
- Redux 的外围概念是，组件收回 action 与状态管理器通信。状态管理器收到 action 当前，应用 Reducer 函数算出新的状态，Reducer 函数的模式是(state, action) => newState。
-
useReducers()钩子用来引入 Reducer 性能。
语法const [state, dispatch] = useReducer(reducer, initialState);
它承受 Reducer 函数和状态的初始值作为参数，返回一个数组。数组的第一个成员是状态的以后值，第二个成员是发送 action 的 dispatch 函数。
4. useContext 共享状态钩子
如果须要在组件之间共享状态，能够应用 useContext()。