React类组件中如何正确更新对象数组并控制渲染时机？

嘿，这个问题问得很实在！咱们来好好聊聊这两种实现思路，看看哪种才是React类组件里的正确姿势：

1. 关于this.myArr + forceUpdate()的方案 #

这种方式确实能实现“按需渲染”的需求，但绝对不是React推荐的做法。原因有几点：

• 它违背了React「状态驱动UI」的核心设计理念——React的视图更新应该由状态（state）或属性（props）的变化自动触发，而不是手动强制刷新。
• forceUpdate()会绕过React的diff算法优化，直接强制整个组件重渲染，可能带来不必要的性能开销。
• 代码可读性和维护性差：其他开发者接手时会困惑“为什么要手动强制更新？数据状态到底存在哪里？”，增加了理解成本。

2. 把myArr放进this.state的方案 #

这才是符合React最佳实践的正确做法！React的核心就是用状态来驱动视图，把myArr放在state里管理，完全契合这种设计模式：

• 每次需要修改数组时，你要创建数组的新副本（不能直接修改this.state.myArr，因为state是不可变的），然后通过setState更新状态。React会自动检测到状态变化，高效地完成组件重渲染。
• 代码逻辑清晰，其他开发者一眼就能看出“这是组件的状态，修改它会触发UI更新”，维护起来更轻松。

举个正确修改state数组的例子：

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myArr: [] // 把数组放进state里
    };
  }

  // 添加新对象到数组的方法
  addNewItem = (newObj) => {
    // 用展开运算符创建新数组，避免直接修改原state
    this.setState(prevState => ({
      myArr: [...prevState.myArr, newObj]
    }));
  }

  // 删除指定下标的元素
  deleteItem = (index) => {
    this.setState(prevState => ({
      myArr: prevState.myArr.filter((_, i) => i !== index)
    }));
  }

  render() {
    // 在render里直接使用state中的数组
    return (
      <div>
        {this.state.myArr.map((item, index) => (
          <div key={index}>{item.name}</div>
        ))}
        <button onClick={() => this.addNewItem({name: 'New Item'})}>添加</button>
      </div>
    );
  }
}

总结 #

虽然forceUpdate()能临时解决问题，但它属于“hack”式的 workaround，不符合React的设计原则。而将数组放在state中，通过setState进行更新，才是React类组件中管理可变数据并触发渲染的标准方式，既健壮又易于维护。

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