Hooks 常见问题

常见问题

为什么会有 React Hooks，它解决了哪些问题？

• 完善函数组件的能力，函数更适合 React 组件
• 组件逻辑复用，Hooks 表现更好
• class 复杂组件正在变的费解，不易拆解，不易测试，逻辑混乱

class 组件中，相同的逻辑散落在各处

• DidMount 和 DidUpdate 中获取数据
• DidMount 绑定事件，WillUnMount 解绑事件
• 使用 Hooks，相同逻辑可分割到一个一个的 useEffect 中

React Hooks 如何模拟组件生命周期？

• 模拟 componentDidMount – useEffect 依赖 []
• 模拟 componentDidUpdate – useEffect 依赖 []，或者依赖 [a,b]
• 模拟 componentWillUnmount – useEffect 中返回一个函数

useEffect 中返回函数 fn

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

如何自定义 Hook ?

import { useState, useEffect } from 'react';

function useMousePosition() {
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);

  useEffect(() => {
    function mouseMoveHandler(e) {
      setX(e.clientX);
      setY(e.clientY);
    }

    // 绑定事件
    document.body.addEventListener('mousemove', mouseMoveHandler);

    // 解绑事情
    return () =>
      document.body.removeEventListener('mousemove', mouseMoveHandler);
  }, []);

  return [x, y];
}

export default useMousePosition;

React Hooks 性能优化

• useMemo 缓存数据
• useCallback 缓存函数
• 相当于 class 组件的 SCU 和 PureComponent

使用 React Hooks 遇到哪些坑？

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

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

Hooks 相比 HOC 和 Render Prop 有哪些优点？

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