React组件重渲染时已赋值的state为何未重置为初始默认值？

• React.useState 的初始值仅在组件首次挂载时被读取赋值，后续组件因state/props变化触发重渲染时，不会重新执行初始化逻辑。React内部会为每个存活的组件实例维护独立的state存储表，持久化保存每个state的最新值，重渲染时会直接从存储表中读取当前值，而非覆盖为初始值。
• 你当前的场景中，输入框输入触发setInputvalue更新inputvalue，仅会触发组件重渲染，组件实例始终处于挂载状态没有被销毁，因此value的已计算值会被React保留，不会被重置为空字符串。
• 只有当组件实例被卸载后重新挂载时，state才会被重置为初始值，常见触发场景包括：给组件设置的key属性发生变化、条件渲染中组件从销毁到重新渲染、路由切换后返回当前页面等。

你代码中calculation函数里setValue后立刻打印value会得到旧值，属于React state异步批量更新的正常表现，和本次问题无关，仅额外提醒。

你提供的示例代码如下：

import React from "react"

export default function Components() {
    const PI = 3.14
     
    const [value, setValue] = React.useState("")
    const [inputvalue, setInputvalue] = React.useState(0)

    function calculation() { 
        const originalvalue = PI * inputvalue * inputvalue

        setValue(`${originalvalue} cm^2`)
        console.log(value)
    }
    
    function getInput (event) {
        setInputvalue(event.target.value)
        
    }   

    console.log("main")

    return (
        <div className="output">
            <h4>Enter the r of the circle below in cm</h4>
           
           <input onChange={getInput} type="number"  name="input"/>

           <button onClick = {calculation}> Show Area</button>

           <p>Area of the circle is : {value}</p>
        </div>

    )
}

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