react hooks

React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来

React Hooks 的设计目的，就是加强版函数组件，完全不使用"类"，就能写出一个全功能的组件

React Hooks默认提供的四个最常用的钩子

1.useState()：状态钩子    useState 的参数是 state 的初始值，返回一个包含两个元素的数组:当前state和用于更改state 的函数    const [ name, setName ] = useState('Darren')

2.useContext()：共享状态钩子  该钩子的作用是，在组件之间共享状态。其作用就是可以做状态的分发，避免了react逐层通过Props传递数据

3.useReducer()：action钩子   原理是我们通过用户在页面中发起action,从而通过reducer方法来改变state,从而实现页面和状态的通信   const [state, dispatch] = useReducer(reducer, {name:'Darren'})

4.useEffect()：副作用钩子 useEffect()接受两个参数，第一个是你要进行的异步操作，第二个是一个数组，用来给出Effect的依赖项。只要这个数组发生变化，useEffect()就会执行。当第二项省略不填时，useEffect()会在每次组件渲染时执行 useEffect(() => {console.log('name改变了')},[name])

下面是class组件与hooks组件的对比：