React中该state更新方式是否正确？为何输入变化时map重复执行？

State更新方式正误判断 #

对应输入事件的代码片段：

public handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    this.setState({ emptyFields: false, error: false, loading: false });
    this.setState({ product: { ...this.state.product, [e.target.name]: e.target.value } });
}

相关说明：

• 该写法不存在语法错误。React 16+ 版本会自动批量合并同一事件回调内连续调用的setState，最终仅触发一次组件重渲染，不会拆分出两个独立的渲染周期。
• 存在可优化空间：两次独立的setState属于不必要的拆分，可合并为单次调用，减少React的渲染调度开销，优化后写法：

  public handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      const { name, value } = e.target;
      this.setState({
          emptyFields: false,
          error: false,
          loading: false,
          product: { ...this.state.product, [name]: value }
      });
  }
  

输入触发Map重复执行的现象 #

对应Map渲染的代码片段：

<tbody>
    {this.props.products.map((prod: IProduct) =>{
     console.log('remap ???')
     return (<tr key={prod.id}>
     <td>{prod.id}</td>
     <td>{prod.name}</td>
     <td>{prod.price}</td>
    </tr>)
    }                            
   )}
</tbody>

实际运行表现：

• 每次修改输入框内容触发组件状态更新时，上述对this.props.products数组的map遍历操作都会重复执行，控制台会持续输出remap ???的日志，哪怕products作为props未发生任何变化。
• 运行效果截图：
  
  

原理说明：类组件默认在自身state更新时会执行完整render流程，而render执行会遍历JSX内的所有逻辑，哪怕作为依赖的products props没有变化，嵌入在JSX中的map逻辑也会完整跑一遍。这是类组件未启用浅比较优化时的默认行为，不属于代码错误。如果要规避无意义的重复遍历，可以将类组件从直接继承Component改为继承PureComponent，或是手写shouldComponentUpdate做判断，只有当state、props存在实际变更时才执行render。

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