React中使用useState对象时，如何避免输出相同时重复渲染？

问题分析 #

你遇到的核心问题是：每次点击重置按钮时，都创建了新的{count:0}对象，即使值和之前一致，React也会因状态引用变化触发重新渲染。

解决方案 #

下面提供几种简单可行的方法：

方法1：重置前先判断当前状态

在调用setnum前检查当前num.count是否已经为0，若是则不执行状态更新，从根源避免不必要的渲染：

import { useState } from "react"

export default function Sample()
{ 
   const [num, setnum] = useState({count:0})
   const inc = () => {
       // 改用函数式更新，避免闭包捕获旧状态的问题
       setnum((prevstate) => ({...prevstate, count: prevstate.count + 1}))
   }
   const reset = () => {
       if (num.count !== 0) {
           console.log("render")
           setnum({count: 0})
       }
   }
   return(
    <div>
       <button>{num.count}</button>
       <button onClick={inc}>Increment</button>
       <button onClick={reset}>reset</button>
    </div>
   )
}

方法2：缓存初始状态对象，复用同一引用

把初始的{count:0}对象定义在组件外部，确保全局唯一引用，重置时直接复用该对象，状态引用不变就不会触发渲染：

import { useState } from "react"

// 定义在组件外部，保证引用唯一
const INITIAL_NUM = {count:0}

export default function Sample()
{ 
   const [num, setnum] = useState(INITIAL_NUM)
   const inc = () => {
       setnum((prevstate) => ({...prevstate, count: prevstate.count + 1}))
   }
   const reset = () => {
       // 复用初始对象，引用无变化
       setnum(INITIAL_NUM)
   }
   return(
    <div>
       <button>{num.count}</button>
       <button onClick={inc}>Increment</button>
       <button onClick={reset}>reset</button>
    </div>
   )
}

方法3：改用基本类型状态（新手推荐）

如果你的状态仅需存储count值，完全可以不用对象，直接用数字类型状态。React对基本类型做值比较，多次设置相同值不会触发重复渲染，这是最简洁的方案：

import { useState } from "react"

export default function Sample()
{ 
   const [count, setCount] = useState(0)
   const inc = () => {
       setCount(prev => prev + 1)
   }
   const reset = () => {
       setCount(0)
   }
   return(
    <div>
       <button>{count}</button>
       <button onClick={inc}>Increment</button>
       <button onClick={reset}>reset</button>
    </div>
   )
}

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