React状态首次更新未识别、组件未正常触发重渲染问题

所有异常表现都源于违反React状态不可变原则：

• 代码中updateForm = form是引用赋值，两个变量指向同一个内存地址的对象
• 后续执行updateForm.display = xxx属于直接修改原state对象，没有生成新的状态引用
• React对引用类型状态做浅比较判断是否需要重渲染，传入setForm的参数和原state引用完全一致，React会判定状态无变化，不会触发组件重渲染，子组件的useEffect也不会感知到状态变更
• 点击Menu区域触发的document.onmouseup逻辑意外触发了强制重渲染，才会把之前直接修改的状态值渲染到页面，因此出现操作滞后、点击组件区域才更新的现象

修改Index.js中的状态更新逻辑，每次更新返回全新的状态对象，禁止直接修改原state：

const [form, setForm] = useState({
  display: "none",
});

const handleEditForm = () => {
  console.log("triggered");
  // 用函数式更新基于旧状态生成新对象，避免闭包问题，同时保证引用变化
  setForm(prev => ({
    ...prev,
    display: prev.display === "none" ? "block" : "none"
  }));
};

return (
  <div>
    <img
      onClick={handleEditForm}
      style={{
        position: "relative",
        top: "5px",
        paddingLeft: "10px",
        width: "30px",
      }}
      src="/public/static/images/edit_icon.svg"
      alt="edit icon"
    />
    {/* 正确引入并渲染Menu组件，将form状态作为props传入 */}
    <Menu form={form} />
  </div>
);

Menu.js原有代码无需修改，只要确保能正确接收到父组件传递的form props即可。

• React状态更新必须通过对应的setter函数完成，禁止直接给state变量赋值修改属性
• 对象、数组类型的状态更新，必须返回新的引用，不能在原对象/原数组上修改后再传入setter
• 修复状态更新逻辑后，之前依赖document.onmouseup的强制渲染hack代码可以直接移除，React会自动在状态变化时触发同步重渲染，不会再出现渲染滞后的问题

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