为什么要使用hooks

• 完善函数组件的能力，函数组件更适合 React 组件
• 组件逻辑复用，Hooks表现更好

• class 复杂组件正在变的费解，不易拆解，不易测试，逻辑混乱

  模拟组件生命周期

• componentDidMount - useEffect []

• componentDidUpdate - useEffect 无依赖 或 [a, b]
• componentWiiUnMount - useEffect 中返回一个函数

useEffect 中返回函数fn

• 如果依赖项是 []，组件销毁是执行 fn，等于 WillUnMount
• useEffect 无依赖或依赖[a, b]，组件更新时执行 fn
• 即，下一次执行 useEffect 之前，就会执行fn，无论更新或卸载

如何自定义Hook

import {useState} from 'react';
import axios from 'axios';
function useAxiox(url) {
  const [loading, setLoading] = useState(false);
  const [err, setErr] = useState();
  const [data, setDate] = useState();
  useEffect(() => {
    setLoading(true);
    axios.get(url)
      .then(setDate)
      .catch(setErr)
      .finally(() => { setLoading(false) })
  }, [url])
  return [loading, data, err];
}
export default axios;

React Hooks 性能优化

• useMemo 缓存数据
• useCallBack 缓存函数
• 相当于 class 的 SUC 和 PureComponent

坑

• useState 初始化值，只初始化一次
• useEffect 内部，不能修改 state
• useEffect 依赖引用类型，会出现死循环

React Hooks 做组件逻辑复用的优点

• 完全符合 hooks 原有规则，没有其他要求，易理解记忆
• 变量作用域很明确
• 不会产生组件嵌套