更新状态不会使用 props react-redux connect 重新渲染孩子答案

【问题标题】：Updating state doesn't re-render child with props react-redux connect更新状态不会使用 props react-redux connect 重新渲染孩子
【发布时间】：2018-11-21 21:12:24
【问题描述】：

我刚刚开始使用 React Redux，所以我只是在我的一些旧东西上乱用它。我有一个需要道具的组件：

 <DataTable dataType = {this.state.dataType} 
        drinkArray = {this.state.drinkArray} 
        foodArray = {this.state.foodArray} 
        sort = {this.sort}/>

DataTable 所做的只是映射到 dataType 选择的任何一个数组，并在表格中显示一些信息。

<div sytle = {{textAlign: 'center'}}>
  {(this.props.dataType === 'food' &&
    <table className = 'foodTable'>
      <tbody>
        <tr>
          <th>Name</th>
          <th  id = 'price' onClick = {(e) => {this.props.sort(e,'food')}}>Price</th>
          <th  id = 'stock' onClick = {(e) => {this.props.sort(e,'food')}}>Stock</th>
        </tr>
        {this.props.foodArray.map((x,i) => {
          return (
            <tr key ={i}>
              <td>{x.name}</td>
              <td>{x.price}</td
              <td>{x.stock}</td>
            </tr>
            )
          })
        }
      </tbody>
    </table>
  )}
//etc.

基本上问题是当我添加连接到 DataTable 组件时：

export default connect()(DataTable)

在这种情况下，我只是在胡闹，并不打算真正做任何事情，但这会导致我无法解释的奇怪行为。我通过 props 传递的排序函数不再导致 DataTable 重新渲染。但是，如果我通过单击按钮更改父级的 dataType，则 DataTable 会重新呈现。排序函数和更改数据类型都使用 setState()，并且我知道排序函数正在被调用并且从将其记录到控制台中正常工作。调用排序函数时也会重新渲染父级。如果我从 DataTable 组件中删除 connect，排序函数会再次重新呈现 DataTable。

所以我的问题是，为什么通过 setState 更改其中一个道具会导致孩子重新渲染，但通过 setState 更改不同的道具不会？这只是一个普遍的好奇心问题。

【问题讨论】：

标签： reactjs react-redux

【解决方案1】：

connect() 进行浅比较（作为优化） - 可能sort 只改变现有数组，它应该创建一个新对象（新引用）。

【讨论】：