React状态变量为何在重渲染时不被重新初始化？

这是个非常典型的React初学者疑问，我来给你拆解清楚背后的逻辑！

你观察到的现象看似矛盾：组件重渲染时明明执行了const [data, setData] = useState("");这行代码，但data却能保留更新后的值，而不是被重置为空字符串。核心原因在于React内部为每个组件实例维护了独立的状态记忆系统，useState的工作逻辑并不是每次都“重新初始化”：

• 第一次渲染：当组件首次挂载时，React会执行useState("")，把你传入的初始值""存入这个组件专属的状态记忆池，然后返回这个初始值和对应的状态更新函数setData。这时候data就是空字符串，控制台打印Parent rendering ..。
• 状态更新与重渲染：当你点击按钮调用setData时，React会先更新记忆池里data的对应值（也就是新的日期字符串），然后触发组件重渲染。
• 后续重渲染：再次执行useState("")时，React会识别出这不是首次渲染，直接跳过初始化步骤，从记忆池里取出当前最新的data值返回给你，完全不会使用传入的""初始值。这就是为什么你能在页面上看到更新后的日期，同时控制台又会打印一次Parent rendering ..。

简单来说：useState的初始参数只在组件第一次挂载时生效，后续每次重渲染，这个函数都会返回React保存的当前状态值，而不是重新初始化。这就是React状态能在组件多次渲染间保持连续性的核心机制。

再对应你的代码看：

import React, { useState } from "react";

const Parent = () => {
  const [data, setData] = useState(""); // 首次渲染用""，重渲染时取记忆池里的最新值

  console.log('Parent rendering ..');

  return (
    <div>
      <h1>Parent Component</h1>
      <p>Data from Child: {data}</p>
      <button onClick={()=>{setData((new Date()).toDateString())}}>
        Click Me!!
      </button>
    </div>
  );
};

export default Parent;

备注：内容来源于stack exchange，提问作者iJade