useCallback

useCallback 是一个允许你在多次渲染中缓存函数的 React Hook。useCallback 在多次渲染中缓存一个函数，直至这个函数的依赖发生改变

const cachedFn = useCallback(fn, dependencies)

用法

• 跳过组件的重新渲染
• 从记忆化回调中更新 state
• 防止频繁触发 Effect
• 优化自定义 Hook

useContext

useContext 是一个 React Hook，可以让你读取和订阅组件中的 context。

const value = useContext(SomeContext)

用法

• 向组件树深层传递数据
• 通过 context 更新传递的数据
• 指定后备方案默认值
• 覆盖组件树一部分的 context
• 在传递对象和函数时优化重新渲染

useEffect

useEffect 是一个 React Hook，它允许你 将组件与外部系统同步。

useEffect(setup, dependencies?)

用法

• 连接到外部系统
• 在自定义 Hook 中封装 Effect
• 控制非 React 小部件
• 使用 Effect 请求数据
• 指定响应式依赖项
• 在 Effect 中根据先前 state 更新 state
• 删除不必要的对象依赖项
• 删除不必要的函数依赖项
• 从 Effect 读取最新的 props 和 state
• 在服务器和客户端上显示不同的内容

useMemo

useMemo 是一个 React Hook，它在每次重新渲染的时候能够缓存计算的结果。

const cachedValue = useMemo(calculateValue, dependencies)

用法

• 跳过代价昂贵的重新计算
• 跳过组件的重新渲染
• 防止过于频繁地触发 Effect
• 记忆另一个 Hook 的依赖
• 记忆一个函数

useReducer

useReducer 是一个 React Hook，它允许你向组件里面添加一个 reducer（一个函数，接收当前的 state 和一个 action 对象，必要时决定如何更新状态，并返回新状态）。

const [state, dispatch] = useReducer(reducer, initialArg, init?)

用法

• 向组件添加 reducer
• 实现 reducer 函数
• 避免重新创建初始值

useRef

useRef 是一个 React Hook，它能帮助引用一个不需要渲染的值。

const ref = useRef(initialValue)

使用

• 使用用 ref 引用一个值
• 通过 ref 操作 DOM
• 避免重复创建 ref 的内容

useState

useState 是一个 React Hook，它允许你向组件添加一个 状态变量。

const [state, setState] = useState(initialState)

用法

• 为组件添加状态
• 根据先前的 state 更新 state
• 更新状态中的对象和数组
• 避免重复创建初始状态
• 使用 key 重置状态
• 存储前一次渲染的信息

useMemo

useState