在开始之前，我们首先明确几个概念：
- 副作用：函数式编程里的概念，指的是函数内部与外部互动，产生单纯运算以外的其他结果，如：修改全局变量。无副作用强调函数保持独立，内部功能代码返回一个新的值，没有其他行为，尤其是不能改变外部变量的值。
- this(组件实例):类组件有this, es6的类声明中往往需要将函数的this关键字绑定到当前作用域,函数组件没有this,因为函数式声明的特性，不需要再强制绑定.
- hook：钩子，react hooks中指能让你在函数组件中“钩入” react 特性的函数. v16.8新特性 react hooks 为什么会被推出
- 更佳的性能表现: 相较于vue, react 要求我们前端开发者做更高的性能管理。而函数式组件中并不需要进行生命周期的管理与状态管理，因此react并不需要进行某些特定的检查或者内存分配，从而保证了更好地性能表现
- 非UI逻辑复用困难：react通用逻辑复用主要方式 HOC & renderProps 都存在一定的问题，如HOC：写法上不够便捷友好，高阶组件之间组合性差，容易发生wrapper hell
- 组件的生命周期函数不适合side effect逻辑的管理：副作用的相关逻辑分散到了componentDidMount，componentWillUnmount，componentDidUpdate三个生命周期函数中，这些互相关联的逻辑被分散到不同的函数中会导致bug的发生和产生数据不一致的情况。除了这个，我们还可能会在组件的同一个生命周期函数放置很多互不关联的副作用逻辑
- 不友好的类组件：大量的譬如extends/constructor/手动绑定this/...这样的代码
react hooks 最佳实践
基本用法：
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `You clicked ${count} times`; });
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
