react hooks 学习笔记

这篇为react hooks的学习笔记，仅对需要关注的重点做了记录。有关react hooks详细说明，参见官网https://reactjs.org/docs/hook...

Rules of Hooks

• 不能将 hooks 放在循环、条件语句或者嵌套方法内。react是根据hooks出现顺序来记录对应状态的
• 只在 function 组件和自定义 hooks 中使用 hooks。

• 命名规范

  • useState 返回数组的第二项以 set 开头（仅作为约定）
  • 自定义 hooks 以 use 开头（可被 lint 校验）

API

• useState
  useState 可传任意类型的变量或者返回任意类型变量的 function。
  useState 返回数组的第二个参数(setter)，可传任意类型的变量，或者一个接收 state 旧值的 function，其返回值作为 state 新值

  function Counter({ initialCount }) {
    const [count, setCount] = useState(initialCount);
    // Lazy initialization
    const [state, setState] = useState(() => {
      const initialState = someExpensiveComputation(props);
      return initialState;
    });
    return (
      <>
        Count: {count}
        <button onClick={() => setCount(0)}>Reset</button>
        <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
        <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
      </>
    );
  }

  set 方法不会像 setState 一样做 merge，所以建议如果数据结构简单，可以将变量根据数据结构需要放在不同的 useState 中，避免大量使用类似{...state, value}形势。如果数据结构复杂，建议使用 useReducer 管理组件的 state

• useEffect

  useEffect(effect, array);

  effect 函数将在 componentDidAmount 时触发和 componentDidUpdate 时有条件触发。可以返回一个函数(returnFunction)，returnFunction 将会在 componentWillUnmount 时触发和在 componentDidUpdate 时先于 effect 有条件触发。
  与 componentDidAmount 和 componentDidUpdate 不同之处是，effect 函数触发时间为在浏览器完成渲染之后。 如果需要在渲染之前触发，需要使用 useLayoutEffect。
  第二个参数 array 作为有条件触发情况时的条件限制。

  • 如果不传，则每次 componentDidUpdate 时都会先触发 returnFunction（如果存在），再触发 effect。
  • 如果为空数组[]，componentDidUpdate 时不会触发 returnFunction 和 effect。
  • 如果只需要在指定变量变更时触发 returnFunction 和 effect，将该变量放入数组。

• useContext
  和consumer类似，仍然需要与Provider配合使用

  const Context = React.createContext('light');
  
  // Provider
  class Provider extends Component {
    render() {
      return (
        <Context.Provider value={'dark'}>
          <DeepTree />
        </Context.Provider>
      )
    }
  }

  // Consumer
  function Consumer(props) {
    const context = useContext(Context);
    return (
      <div>
        {context} // dark
      </div>
    );
  }

• useReducer
  用于管理复杂结构的状态对象，与redux的核心逻辑一致。

  const [state, dispatch] = useReducer(reducer, initialState, {
    type: 'reset',
    payload: initialCount
  });

  // demo
  const TodosDispatch = React.createContext(null);
  
  function TodosApp() {
    // Tip: `dispatch` won't change between re-renders
    const [todos, dispatch] = useReducer(todosReducer, initialState);
  
    return (
      <TodosDispatch.Provider value={dispatch}>
        <DeepTree todos={todos} />
      </TodosDispatch.Provider>
    );
  }

• useCallback
  useCallback和下面的useMemo是非常实用的提升性能的小工具。

  const memoizedCallback = useCallback(
    () => {
      doSomething(a, b);
    },
    [a, b]
  );

  useCallback返回一个memoized函数，在参数a和b都没有改变时，总是返回同一个函数。
  其具体实现逻辑基本如下：

  let memoizedState = null;
  function useCallback(callback, inputs) {
    const nextInputs =
      inputs !== undefined && inputs !== null ? inputs : [callback];
    const prevState = memoizedState;
    if (prevState !== null) {
      const prevInputs = prevState[1];
      if (areHookInputsEqual(nextInputs, prevInputs)) {
        return prevState[0];
      }
    }
    memoizedState = [callback, nextInputs];
    return callback;
  }

  注：第二个参数目前只用于指定需要判断是否变化的参数，并不会作为形参传入回调函数。建议回调函数中使用到的变量都应该在数组中列出。以后的版本可能会将第二项数组参数移除，自动判断回调函数中使用到的变量是否变化来判断返回结果。

• useMemo

  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

  与useCallback类似，返回一个memoized函数执行结果。
  useMemo(() => fn, inputs) 等价于 useCallback(fn, inputs)
  useMemo可用于实现PureComponent子组件:

  function Parent({ a, b }) {
    // Only re-rendered if `a` changes:
    const child1 = useMemo(() => <Child1 a={a} />, [a]);
    // Only re-rendered if `b` changes:
    const child2 = useMemo(() => <Child2 b={b} />, [b]);
    return (
      <>
        {child1}
        {child2}
      </>
    )
  }

• useRef

  const refContainer = useRef(initialValue);

  类似 react.createRef()。
  在使用hooks的function component中，useRef不仅可以用来做DOM的引用，还可以做来作为类似class的实例属性，因为相同位置的useRef()每次返回的都是同一个对象。

  function Timer() {
    const intervalRef = useRef();
  
    useEffect(() => {
      const id = setInterval(() => {
        // ...
      });
      intervalRef.current = id;
      return () => {
        clearInterval(intervalRef.current);
      };
    });
  
    // ...
  }

  利用useRef()的这种特性，还可以做很多其他有趣的事情，例如获取previous props或previous state：

  function Counter() {
    const [count, setCount] = useState(0);
  
    const prevCountRef = useRef();
    useEffect(() => {
      prevCountRef.current = count;
    });
    const prevCount = prevCountRef.current;
  
    return <h1>Now: {count}, before: {prevCount}</h1>;
  }

• useImperativeMethods

  function FancyInput(props, ref) {
    const inputRef = useRef();
    useImperativeMethods(ref, () => ({
      focus: () => {
        inputRef.current.focus();
      }
    }));
    return <input ref={inputRef} ... />;
  }
  FancyInput =  React.forwardRef(FancyInput);

  useImperativeMethods提供了父组件直接调用子组件实例方法的能力。
  上例中，一个包含 <FancyInput ref={fancyInputRef} /> 的父组件，就可以调用 fancyInputRef.current.focus().

Tips

• 目前暂时没有与getSnapshotBeforeUpdate和componentDidCatch相匹配的hooks。
• 使用ESlint plugin(eslint-plugin-react-hooks)做代码校验。
• Hooks的调用只能放在function component(首字母大写的function)或者自定义Hook(名为useXxxx的function)中。
• Hooks在组件的每次render时都以完全相同的顺序执行。

• 用React.memo来实现shouldComponentUpdate。

  const Button = React.memo((props) => {
    // your component
  });

• 请将refs理解成class中的实例属性。