React-Hooks之内置hooks

1.缓存回调函数（useCallback）

**useCallback(fn.deps)**

import React, { useState, useCallback } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const handleIncrement = useCallback(
    () => setCount(count + 1),
    [count], // 只有当 count 发生变化时，才会重新创建回调函数
  );
  // ...
  return <button onClick={handleIncrement}>+</button>
}

如果第二个参数为[ ]，则回调函数只会创建一次

2.缓存计算结果（useMemo）

**useMemo(fn, deps)**

//...
// 使用 userMemo 缓存计算的结果
const usersToShow = useMemo(() => {
    if (!users) return null;
    return users.data.filter((user) => {
      return user.first_name.includes(searchKey));
    }
  }, [users, searchKey]);
//...

建立了一个绑定某个结果到依赖数据的关系。只有当依赖变了，这个结果才需要被重新得到

3.多次渲染间共享数据（useRef）

**const myRefContainer = useRef(initialValue);**

• 类似于类组件的成员变量，不直接参与组件的渲染

• 保存某个 DOM 节点的引用

  const inputEl = useRef(null);
  <input ref={inputEl} type="text" />
  

4.定义全局状态（useContext）

const value = useContext(MyContext);
const MyContext = React.createContext(initialValue);

React 的开发中，除了像 Theme、Language 等一目了然的需要全局设置的变量外，我们很少会使用 Context 来做太多数据的共享

个人学习记录，侵权可删