React中是否仅应渲染state变量？渲染类变量是否为不良实践？

这得看你这个变量的用途，不能一概而论说“是”或者“不是”，核心区别在于这个值是否需要触发UI更新：

• 如果这个值是固定不变的，或者它的变化不需要同步到UI上，那直接渲染类变量完全没问题，甚至是合理的做法。比如组件初始化时设置的唯一标识、只在内部逻辑里用的缓存值、定时器ID这类不需要展示的内容，哪怕你要把固定标识渲染出来，用this.value也没毛病——反正它不会变，不需要React去追踪更新。举个例子：

  class MyComponent extends React.Component {
    constructor(props) {
      super(props);
      this.uniqueId = `comp-${Math.random()}`; // 固定值，不会变
    }
    render() {
      return <span>组件ID：{this.uniqueId}</span>;
    }
  }
  

• 但如果这个值会发生变化，且变化后需要更新UI，那直接用类变量就是典型的不良实践了。因为React只会在state或props变化时自动触发重新渲染，你直接修改this.value = 新值的话，React根本感知不到这个变化，UI会停留在旧值，导致数据和视图不一致。这种场景下必须用state，更新时通过this.setState()来通知React：

  class MyComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = { value: '初始值' };
    }
    updateValue() {
      this.setState({ value: '更新后的值' }); // 触发重新渲染
    }
    render() {
      return <span>{this.state.value}</span>;
    }
  }
  

另外还要提醒一句：别想着用this.value改完再手动调用forceUpdate()来触发渲染——这种做法会打破React的状态驱动UI的设计逻辑，让组件的数据流变得混乱，后续维护起来坑特别多，绝对不推荐。

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