React类组件为何维护state？能否用类变量手动触发重渲染？

嘿，这个问题戳中了很多React类组件初学者的痛点——我刚学的时候也纠结过：既然类本身就能存变量，为啥还要多此一举用this.state？咱们好好唠唠这事儿：

1. React根本“看不见”类变量的变化 #

React的核心是状态驱动UI，它只会在state或props发生变化时，才会触发组件的重新渲染流程（包括shouldComponentUpdate、render这些生命周期）。

如果你直接改this.var1、this.var2这类类变量，React完全没感知——它不会主动监听类变量的变化，所以就算你改了值，UI也不会更新。你总不能每次改完都手动想办法触发渲染吧？这就引出了你的第二个问题。

2. 关于“直接改类变量+手动调用rerender”的坑 #

首先得明确：React类组件里没有this.rerender()这个方法，你可能想到的是this.forceUpdate()？确实有这个API，但官方强烈不推荐使用，原因有俩：

• 打破React的渲染逻辑：forceUpdate会跳过shouldComponentUpdate的判断，强制组件和所有子组件重新渲染。这会让你的组件逻辑变得不可预测——谁知道什么时候会触发强制更新？时间长了，代码的维护成本会飙升。
• 性能损耗大：正常情况下，React会通过diff算法只更新需要变化的DOM节点，但forceUpdate会强制整个组件树重新渲染，很容易造成不必要的性能浪费。

3. 那有没有“合规”的手动触发渲染方式？ #

其实完全没必要硬绕开state，React的state设计就是为了让状态变化和UI更新绑定起来，这是最规范的做法。如果实在有特殊场景需要手动触发渲染，也尽量用state来间接实现，比如加一个专门的更新触发器：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { renderTrigger: 0 };
    // 自定义一个手动触发渲染的方法
    this.triggerRender = this.triggerRender.bind(this);
    // 你的类变量
    this.myCustomVar = "初始值";
  }

  triggerRender() {
    // 通过修改state里的无关变量，触发React的渲染流程
    this.setState(prevState => ({
      renderTrigger: prevState.renderTrigger + 1
    }));
  }

  handleClick() {
    // 直接修改类变量
    this.myCustomVar = "修改后的值";
    // 调用自定义方法触发渲染
    this.triggerRender();
  }

  render() {
    return (
      <div>
        <p>{this.myCustomVar}</p>
        <button onClick={() => this.handleClick()}>修改并更新</button>
      </div>
    );
  }
}

这种方式虽然有点取巧，但至少遵循了React的渲染规则，比用forceUpdate靠谱多了。

最后总结 #

React的state不是多余的设计，它是组件状态和UI之间的可靠桥梁：

• 它让React能感知状态变化，自动触发渲染；
• setState的异步批量更新机制，能避免不必要的重复渲染；
• 生命周期方法（比如componentDidUpdate）会和state的变化绑定，让逻辑更清晰。

与其想着绕开state，不如好好利用它——如果觉得类组件的state写法麻烦，也可以试试函数组件+useState Hook，写法更简洁，原理是一样的～

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