React 在 v16.8 的版本中推出了 React Hooks 新特性。在我看来，利用 React Hooks 对比于从前的类组件有以下几点长处：
代码可读性更强，原本同一块成果的代码逻辑被拆分在了差异的生命周期函数中，容易使开拓者倒霉于维护和迭代，通过 React Hooks 可以将成果代码聚合，利便阅读维护；
组件树层级变浅，在原本的代码中，我们常常利用 HOC/render props 等方法来复用组件的状态，加强成果等，无疑增加了组件树层数及渲染，而在 React Hooks 中，这些成果都可以通过强大的自界说的 Hooks 来实现；
关于这方面的文章，我们按照利用场景别离举办举例说明，辅佐你认识领略并可以纯熟运用 React Hooks 大部门特性。
博客 github地点为：https://github.com/fengshi123/blog
一、State Hook1、基本用法
function State(){ const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ) }
2、更新更新分为以下两种方法，即直接更新和函数式更新，其应用场景的区分点在于：
直接更新不依赖于旧 state 的值；
函数式更新依赖于旧 state 的值；
// 直接更新 setState(newCount); // 函数式更新 setState(prevCount => prevCount - 1);
3、实现归并与 class 组件中的 setState 要领差异，useState 不会自动归并更新工具，而是直接替换它。我们可以用函数式的 setState 团结展开运算符来到达归并更新工具的结果。
setState(prevState => { // 也可以利用 Object.assign return {...prevState, ...updatedValues}; });
4、惰性初始化 stateinitialState 参数只会在组件的初始渲染中起浸染，后续渲染时会被忽略。其应用场景在于：建设初始 state 很昂贵时，譬喻需要通过巨大计较得到；那么则可以传入一个函数，在函数中计较并返回初始的 state，此函数只在初始渲染时被挪用：
const [state, setState] = useState(() => { const initialState = someExpensiveComputation(props); return initialState; });
5、一些重点（1）不像 class 中的 this.setState ，Hook 更新 state 变量老是替换它而不是归并它；
（2）推荐利用多个 state 变量，而不是单个 state 变量，因为 state 的替换逻辑而不是归并逻辑，而且利于后续的相关 state 逻辑抽离；
（3）挪用 State Hook 的更新函数并传入当前的 state 时，React 将跳过子组件的渲染及 effect 的执行。（React 利用 来较量 state。）
1、基本用法
function Effect(){ const [count, setCount] = useState(0); useEffect(() => { console.log(`You clicked ${count} times`); }); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ) }
2、排除操纵为防备内存泄漏，排除函数会在组件卸载前执行；假如组件多次渲染（凡是如此），则在执行下一个 effect 之前，上一个 effect 就已被排除，即先执行上一个 effect 中 return 的函数，然后再执行本 effect 中非 return 的函数。
useEffect(() => { const subscription = props.source.subscribe(); return () => { // 排除订阅 subscription.unsubscribe(); }; });
3、执行时期与 componentDidMount 或 componentDidUpdate 差异，利用 useEffect 调治的 effect 不会阻塞欣赏器更新屏幕，这让你的应用看起来响应更快；（componentDidMount 或 componentDidUpdate 会阻塞欣赏器更新屏幕）
默认环境下，React 会每次期待欣赏器完成画面渲染之后延迟挪用 effect；可是假如某些特定值在两次重渲染之间没有产生变革，你可以通知 React 跳过对 effect 的挪用，只要通报数组作为 useEffect 的第二个可选参数即可：如下所示，假如 count 值两次渲染之间没有产生变革，那么第二次渲染后就会跳过 effect 的挪用；
useEffect(() => { document.title = `You clicked ${count} times`; }, [count]); // 仅在 count 变动时更新
5、模仿 componentDidMount假如想只运行一次的 effect（仅在组件挂载和卸载时执行），可以通报一个空数组（[ ]）作为第二个参数，如下所示，道理跟第 4 点机能优化报告的一样；
useEffect(() => { ..... }, []);
6、最佳实践要记着 effect 外部的函数利用了哪些 props 和 state 很难，这也是为什么 凡是你会想要在 effect 内部 去声明它所需要的函数。