React setState清除state中getter/setter的问题求助

首先得搞清楚React setState的核心工作机制——它不是直接修改原state对象，而是生成一个全新的state对象来替换旧的。当你调用setState时，React会把你传入的更新内容和旧state做浅合并，最终产出一个普通JavaScript对象，这个过程会彻底丢失你之前通过Object.defineProperty定义的getter/setter。

为什么会丢？因为新state的属性是直接赋值的，不会保留原对象的属性描述符（比如get/set方法）。而且React内部会把state处理成不可变对象，从设计上就不允许你在上面挂载自定义访问器属性，这是为了保证state的可预测性和状态流转的清晰性。你之前的defineComputed是给旧state对象绑定了访问器，但setState后组件用的是全新的state对象，自然就找不到这些自定义逻辑了。

既然React的state机制不支持直接在上面加自定义访问器，咱们换个思路实现类似Vue computed的效果，推荐两种符合React设计原则的方案：

方案1：用React内置方式实现派生状态 #

类组件 #

可以用类的getter方法，或者在render中直接计算派生值，依赖props的场景还可以用getDerivedStateFromProps：

class MyComponent extends React.Component {
  state = {
    num: 1
  };

  // 用getter模拟computed属性
  get doubledNum() {
    return this.state.num * 2;
  }

  handleIncrement = () => {
    this.setState(prevState => ({ num: prevState.num + 1 }));
  };

  render() {
    return (
      <div>
        <p>原始值：{this.state.num}</p>
        <p>计算后的值：{this.doubledNum}</p>
        <button onClick={this.handleIncrement}>+1</button>
      </div>
    );
  }
}

这里的doubledNum会在每次组件渲染时自动计算，只要state.num变化，重新渲染就能拿到最新的计算结果。

函数组件 #

用useMemo钩子缓存计算结果，避免不必要的重复计算：

import { useState, useMemo } from 'react';

function MyComponent() {
  const [num, setNum] = useState(1);

  // useMemo仅在依赖项num变化时重新计算
  const doubledNum = useMemo(() => {
    return num * 2;
  }, [num]);

  return (
    <div>
      <p>原始值：{num}</p>
      <p>计算后的值：{doubledNum}</p>
      <button onClick={() => setNum(prev => prev + 1)}>+1</button>
    </div>
  );
}

useMemo的第二个参数是依赖数组，只有当数组里的num变化时，才会重新执行计算函数，兼顾了正确性和性能。

方案2：（不推荐）每次setState后重新绑定访问器 #

如果你非要在state对象上保留自定义访问器，可以在setState的回调里重新调用defineComputed，但这种方法会破坏React的不可变state原则，容易引发难以排查的bug，只做了解：

handleIncrement = () => {
  this.setState(prevState => ({ num: prevState.num + 1 }), () => {
    // setState完成后，给新state重新绑定访问器
    defineComputed(this.state, 'num', this.state.num, {
      doubled: val => val * 2
    });
  });
};

这种方法不推荐，因为React的state设计为只读，直接修改state对象会违背React的核心设计理念，导致组件状态不可预测。

React的state是用来存储原始数据的，派生数据应该通过渲染时计算、类getter或者useMemo来处理，这才是符合React生态的做法。直接给state对象加自定义getter/setter会和React的不可变state机制冲突，这就是setState后访问器丢失的根本原因。

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