React Hooks
使用React Hooks，使得在函数式组件可以有状态，也可以仿照生命周期函数，甚至可以替代React Redux。所谓的Hooks，就是指一些函数，通过这些函数可以在函数式组建中实现类组件的功能。
钩子函数一般是useXxx的形式，所有的钩子函数都只能写在函数式组件中。
useState
我们来看一下如何在函数式组件中使用state
通过useState来创建一个状态，接收一个参数，这个参数就是状态的初始值，返回一个数组，数组包含两个元素，第一个元素就是状态，第二个元素是一个方法，该方法用来设置状态的，如上面
const [number, setNumber] = useState(0)
其中number就是状态，初始值为0，而setNumber是用来设置number的(二者的名字可以随便起，什么changeNumber随意)，每当我们点击+1按钮，都会将当前的number加一。
useEffect
useEffect主要是用来执行一些副作用的代码，比如拿数据
useEffect接收两个参数，第一个参数是回调函数，第二个参数是一个数组，它会监视数组中的元素，当数组中的元素发生改变时，就会执行回调函数，所以当我们点击按钮改变data时，由于data发生改变，useEffect中的回调函数会被执行。如果希望是componentDidMount生命周期函数的特点，即只在组件挂载是执行一次，那么可以为第二个参数传入一个空数组。
useContext
useContext的作用正如在React Redux中介绍的Context中一样，可以使得子组件无论在什么深度都可以直接访问父组件提供的Context，这个给个例子大家就可以明白
useReducer
如何仔细阅读过React.js小书，那么想必你已经理解了reducer的作用，useReducer接收一个reducer和初始状态initState，返回state和dispatch，如下
结合useContext和useReducer
我们可以将useContext和useReducer结合，来达到React-Redux的效果，具体就是将useReducer产生的state和dispatch作为Context传下去，如下
若有收获，就点个赞吧
0 人点赞
