React组件中State变量设置方式差异及重渲染问题咨询

先明确React状态更新的核心规则：React通过浅比较状态的引用是否变化来决定是否触发重渲染，必须传递新的对象/数组引用，才会触发UI更新；同时绝对不能直接修改原状态对象，这违反了状态不可变原则。下面逐个分析你的三种写法：

第一种写法 #

function handleData(e){
    inputData[e.target.name]= e.target.value
    setInputData({...inputData})
    console.log(setInputData)
}

• 操作逻辑：先直接修改了React管理的原状态对象inputData，再通过扩展运算符{...inputData}创建一个新对象传递给setInputData。
• 重渲染表现：因为最后传递了新的对象引用，React会检测到状态变化，触发重渲染。
• 问题：直接修改原状态对象是错误的做法，会破坏React的状态追踪机制，可能导致状态与UI不同步、难以定位的bug，属于违反规范的写法。

第二种写法 #

function handleData(e){
    inputData[e.target.name]= e.target.value
    setInputData(inputData)
}

• 操作逻辑：同样先直接修改原状态对象，然后把同一个引用的inputData传给setInputData。
• 重渲染表现：React做浅比较时，发现前后状态是同一个对象（引用未变），不会触发重渲染，UI不会同步更新用户输入的内容。
• 问题：既违反了状态不可变原则，又无法触发UI更新，属于完全错误的写法。

第三种写法（修正语法错误后分析） #

你的原代码存在语法错误，正确的对象扩展写法需用{}包裹，修正后代码如下：

function handleData(e){
    setInputData({...inputData, [e.target.name]: e.target.value})
}

• 操作逻辑：没有修改原状态对象，而是通过扩展运算符创建一个新对象，复制原状态的所有属性，再覆盖当前输入的属性，最后将新对象传递给setInputData。
• 重渲染表现：传递了新的对象引用，React会检测到状态变化，触发重渲染。
• 优点：完全符合React的状态不可变原则，是正确的状态更新写法，不会引发状态污染问题。

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