React函数组件中局部变量与setState设置变量的区别及重渲染问题

两种实现方案的核心差异 #

• 普通局部变量方案
  本质是每次组件渲染时实时计算变量值，函数组件每次渲染都会从头到尾执行一次，局部变量会被重新初始化、重新赋值。Context更新时会自动触发当前组件重渲染，重渲染过程中就会用最新的Context值计算出最新的myTitle，直接传给子组件即可。
  优势：没有额外性能开销，值永远和当前Context同步，不存在状态不一致问题；
  局限性：变量值仅在当前渲染周期生效，下次渲染会被重置，无法跨渲染周期保留独立修改后的值。
  适用场景：变量值完全可以由当前渲染周期的props/Context/其他状态直接计算得出，不需要独立维护状态。
• setState状态变量方案
  状态变量挂载在组件的fiber节点上，跨渲染周期保留值，调用setState会强制触发组件额外重渲染一次。如果状态值完全可以通过Context计算得出，相当于多维护了一份重复的派生状态，属于冗余状态，容易出现状态不同步的问题。
  优势：状态独立，修改myTitle不会影响Context的值，可以单独维护和修改；
  局限性：需要额外写同步逻辑，有额外的渲染性能开销，实现不当容易触发死循环。
  适用场景：需要该变量独立于Context存在，后续会有不关联Context的独立修改需求。

无限重渲染报错的原因 #

你把setMyTitle直接写在组件的顶层执行逻辑里，没有加任何触发限制：组件每次渲染都会执行到这个if判断，只要Context值为XYZ，就会调用setMyTitle，而setMyTitle本身又会触发组件重新渲染，重新渲染后又会再次执行setMyTitle，形成死循环，React为了防止页面崩溃就会抛出重渲染次数超限的报错。

实现建议 #

你的场景下myTitle属于完全由Context值派生的计算值，不需要用状态存储，直接用普通局部变量就足够了，既没有冗余状态，也不会有重渲染问题，是最优实践。
如果确实需要让myTitle作为独立状态存在（比如后续要基于这个值做和Context无关的修改），必须把setState逻辑放到useEffect钩子中，指定依赖为Context的value，仅当依赖变化时才更新状态，就不会触发死循环：

const MyComponent = () => {
    const [myTitle, setMyTitle] = useState('ABC');
    // 仅当someContextApiObj.value变化时才执行回调更新状态
    useEffect(() => {
        if (someContextApiObj.value === "XYZ") {
            setMyTitle("XYZ")
        }
    }, [someContextApiObj.value])
    return (
        <>
            <ChildComponent
                myTitle={myTitle}
            />
        </>
    );
};
export default MyComponent;

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