React Hooks状态更新防重渲染及类组件迁移问题咨询

1. 等价实现shouldComponentUpdate，同时控制props、state更新的渲染逻辑 #

首先明确：React.memo仅能拦截父组件重渲染、props变化带来的非必要渲染，函数组件没有提供直接阻断自身state变更触发重渲染的API，对应场景可按实际需求选择方案：

• 局部渲染控制：用useMemo包裹需要精准控制更新的UI块，明确声明依赖项，只有依赖项变更时才会重新计算渲染对应内容，其他state变化不会触发该部分UI更新。
  示例代码：

  const Demo = () => {
    const [renderRelatedState, setRenderRelated] = useState(0)
    const [otherState, setOther] = useState('')
    // 仅renderRelatedState变化时该区域重渲染
    const controlledArea = useMemo(() => {
      return <div>受控区域值：{renderRelatedState}</div>
    }, [renderRelatedState])
  
    return (
      <div>
        {controlledArea}
        <input value={otherState} onChange={e => setOther(e.target.value)} />
      </div>
    )
  }
  

• 全局渲染控制：从状态定义层面优化，将不需要驱动UI更新的值存在useRef中（ref值变化不会触发重渲染），仅把和UI渲染直接相关的值放在state中；如果状态逻辑复杂可以配合useReducer管理更新逻辑，从根源上避免无意义的state变更触发重渲染，效果和shouldComponentUpdate完全一致。

注意：不要尝试通过强制中断渲染、hack生命周期的方式阻断state触发的重渲染，这类写法违反React的数据流设计，极易引发死循环、状态不一致问题。

2. 一次性更新多个状态的实现方式 #

不需要为每个字段单独拆分state、挨个调用setter，有两种成熟实现：

• 关联度高的字段可以合并为单个对象state管理，写法和类组件setState接近。注意：和类组件的setState不同，函数组件中更新对象类型的state不会自动合并旧属性，必须手动展开旧状态再覆盖新字段，否则会丢失未更新的属性。
  示例代码：

  // 类组件写法：this.setState({aaa: 'a', bbb: 'b', ccc: 1});
  // 函数组件对应写法
  const [mergedState, setMergedState] = useState({aaa: '', bbb: '', ccc: 0})
  setMergedState(prev => ({...prev, aaa: 'a', bbb: 'b', ccc: 1}))
  

• React 18及以上版本默认开启自动批处理，哪怕你分开写setAaa('a'); setBbb('b'); setCcc(1)，React也会合并所有状态更新，仅触发一次重渲染，不会产生多次渲染的性能问题，拆分独立state的写法完全可用。

3. useState实现状态更新后回调 #

类组件setState第二个参数的更新后回调，在函数组件中通过useEffect监听对应状态实现，这是官方推荐的等价方案：

// 类组件写法：this.setState({count: 2}, () => { console.log('更新完成', this.state.count) })
// 函数组件对应写法
const [count, setCount] = useState(0)
// count更新、DOM渲染完成后执行回调逻辑
useEffect(() => {
  console.log('更新完成', count)
}, [count])

const handleUpdate = () => {
  setCount(2)
}

如果回调逻辑不需要等待DOM渲染完成，仅需要拿到最新的状态值做计算，可以直接在函数式更新中处理：

setCount(prev => {
  const nextVal = 2
  // 此处可直接拿到最新状态值执行业务逻辑
  console.log('即将更新为', nextVal)
  return nextVal
})

内容的提问来源于stack exchange，提问作者loveloper.dev