前言

此篇为使用 React 开发项目的最小技术合集，分为以下两部分，基础的就不再赘述了，主要是两个最常用的技术点，可以说 80%的实践中都离不开这两部分。

几个常用的 Hooks

useState 用法，这个很简单，直接去打官网文档就好了，这里就不赘述了。
useEffect 用法，有几个地方方需要注意，我做了如下的表格，方便记忆：

代码	说明
`useEffect(callback,[])`	只在组件挂载时执行一次
`useEffect(callback)`	每次组件渲染后都执行
`useEffect(callback，[val1,val2])`	val1,val2 有变动就会执行一次 callback
`useEffect(()=>{ return ()=>{...组件卸载后执行的代码} }，[])`	组件卸载后执行 return 的函数

useCallback(()=>{...},[]) 用法，这个是性能优化的一部分，在 React 中，如果父组件重新渲染，那么子组件也会重新渲染，但是有时候我们并不希望子组件重新渲染，这时候就可以使用 useCallback，这个函数会返回一个记忆化的回调函数，只有当依赖项改变时才会重新渲染，否则就返回上次记忆的回调函数。

4.useMemo(()=>{...},[]) 用法，缓存数据，类似 vue 中的计算属性。

// 使用 useMemo 缓存计算结果
const doubleCount = useMemo(() => {
  console.log('Calculating double count...')
  return count * 2
}, [count]) // 依赖 count，当 count 变化时重新计算

5.useContext 它允许你在组件树中共享数据，而无需手动传递 props，尤其在需要跨越多个组件层级时非常有用。类似于 vue 中的 provide/inject，也是一个比较常用的 hooks.

useReducer 是 React 中的一个 Hook，适用于复杂状态逻辑的管理。相比于 useState，它更加适合处理依赖多个子状态的场景，特别是在状态变化逻辑复杂且难以用单个 useState 处理时。使用场景:
- 复杂状态逻辑：当状态的更新逻辑依赖于多个状态值时，useReducer 可以更好地组织和管理这些逻辑。
- 状态变化依赖于先前状态：如果更新状态的过程涉及多个步骤，并且每个步骤的状态变化依赖于前一步的结果，useReducer 是一个很好的选择。
- 统一管理多个状态：当你需要管理多个相关的状态时，使用 useReducer 可以使代码更加清晰和可维护。
useRef这个很简单，查看文档就好了，这里就不赘述了。

以上是大多数应用中最常用的 7 个 hook,掌握以上 hook，基本上就可以应对大部分的开发需求了。当然还有别的 hook,当用到时再去查文档就好了。

前言 ​

几个常用的 Hooks ​

前言

几个常用的 Hooks