一、钩子介绍
基本钩子：useState、useEffect、useContext
附加钩子：useRef、useReducer、useCallback、useMemo、useLayoutEffect、useMutationEffect、useImperativeMethods
useState的用法，setState就如何修改状态值的方法，initialState设置的初始值
1 const [state, setState] = useState(initialState);
1、componentDidMount vs useEffect
1 function Example() { 2 // 注意不要省略第二个参数 []，这个参数保证函数只在挂载的时候进行，而不会在更新的时候执行。 3 useEffect(() => console.log('mounted'), []); 4 return null; 5 }
2、componentDidUpdate vs useEffect
1 useEffect(() => console.log('mounted or updated')); // 不需要指定第二个参数
3、componentWillUnmount vs useEffect
1 useEffect(() => { 2 return () => { 3 console.log('will unmount'); // 直接使用return返回一个函数，这个函数在unmount时执行。 4 } 5 }, []);
二、就功能而言，使用多个useEffect实现代码关注点分离
我们在一个函数组件内部可以不用将所有功能不一致的代码都塞在一个 componentDidMount里头，我们就功能而言多次在一个组件内部使用useEffect
三、使用条件跳过不必要的useEffect执行，实现性能优化
由于useEffect在每次mount或者update的时候都会执行，我们可以使用一些条件参数来跳过执行。就上面最后一个例子，我们可以传入第二个参数，判断前后参数是否一致，若一致则执行，否则就跳过。
useState、useEffect、useContext