React Hooks使用prevState时如何避免不必要的组件重渲染？

结论 #

可以实现，且React的useState Hook默认就支持该优化能力，不需要额外引入第三方依赖或复杂配置。

实现逻辑 #

React 16.8及以上版本中，useState的更新函数在执行时会默认对「更新前状态」和「你返回的新状态」做Object.is等值比较：如果两者完全相等，React会直接跳过本次状态更新，不会触发组件重渲染，和类组件中setState返回null的效果完全一致。

对应需求的代码示例 #

你需要实现「仅当value不为true时才更新为true」的逻辑，写法如下：

import { useState } from 'react'

const [value, setValue] = useState(false)

// 执行更新逻辑
setValue(prevValue => {
  if (prevValue !== true) {
    return true
  }
  // 和原状态相等，直接返回旧值即可触发跳过更新的逻辑
  return prevValue
})

引用类型状态的注意事项 #

如果你的状态是对象、数组这类引用类型，需要注意：

• 只有返回的引用和原状态的引用完全相同时，才会跳过更新
• 如果你需要修改引用类型的部分属性，要先判断修改后的值是否真的发生了变化，再决定是返回原引用还是新的引用，示例如下：

const [formData, setFormData] = useState({ username: '', age: 18 })

setFormData(prev => {
  // 要修改的age已经是目标值，直接返回原引用跳过更新
  if (prev.age === 20) {
    return prev
  }
  // 值确实发生变化，返回新对象触发更新
  return { ...prev, age: 20 }
})

如果需要对引用类型做深度比较来判断是否更新，可以自己在更新函数内实现深层比较逻辑，只要比较后值未变化就返回原状态即可。

内容的提问来源于stack exchange，提问作者batatop