Question

我之前曾询问question反应组件状态与Redux状态一起工作。下面的第一个代码链是我最初提出的解决问题的方法，第二个代码是我建议我没有复制redux状态的答案。这是因为制作复制品的速度很慢吗？并且在本地状态下尽可能少地存储它然后JS负责排序会更快吗？

在相关的说明中，第二代码链要求我总是使用将返回对象的函数，这感觉很奇怪。这是唯一的出路吗？我知道在React.createClass中你可以存储变量来保存对象等，但是使用es6的扩展组件版本，似乎你必须使用函数。有没有办法解决这个问题，还是仅仅是这样？

const Table = React.createClass({
  getInitialState () {
    return {contacts: []}
  },
  componentWillReceiveProps () {
    this.setState({ contacts: this.props.data.contacts})
  },
  sortContacts (parameter, e){
    ...
  },
  render () {
    return (
      <table>
        <thead>
          <tr>
            <th onClick={this.sortContacts.bind(this, "firstName")}>First Name</th>
          </tr>
        </thead>
        <tbody>
          {contactRows}
        </tbody>
      </table>
    )
  }
})

VS。

const Table extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sortBy: 'id' // default sort param
    }
  }

  sortContacts(param) {
    this.setState({ sortBy: param})
  }

  sortedContacts() {
    return this.props.contacts.sort(...); // return sorted collection
  }

  render() {
    return (
      <table>
        <thead>
          <tr>
            <th onClick={() => this.sortContacts("firstName")}>First Name</th>
          </tr>
        </thead>
        <tbody>
          {this.sortedContacts()}
        </tbody>
      </table>
    )
  }
}

Answer 1

首先让我清楚你应该使用React Component State，

如果某些内容仅在组件处于活动状态时存储，请使用react状态。
如果你希望有人看到他们之前离开的组件的ui，即使在对其他组件执行其他操作后再返回使用Redux。

现在关于您的数据过滤我们使用State和Redux ..

我们使用州来过滤来自姓名的数据，因为我们不希望他在返回页面时看到相同的过滤数据，因为这会造成混淆
用于过滤价格或其他过滤器的数据，我们存储实际数据并过滤Redux中的数据。
因为我们将实际数据存储在redux和filters中，所以我们在将数据发送到组件之前，即在MapStateToProps中应用过滤器算法。例如data：getFilteredData（state.somestate.data，state.somestate.filters）其中getFilteredData是一个接受数据和过滤器并返回过滤数据的函数

Answer 2

您的代码中没有Redux，您的问题似乎与Redux无关。

第二个代码块使用ES6类。谷歌它找出你可以用它们做什么。

在Redux中，组件最好是无状态的。他们从Redux或父母那里接收数据并且根本不存储任何数据。所以没有setState。表格不会对任何东西进行排序（它会接收排序的天数作为道具），或者它可能会但它不会是状态，它会在render中对其进行排序。当然它会对副本进行排序，而不是传入的prop。

这些事情听起来很疯狂，当然。抱歉每个渲染？性能怎么样，人们！？答案是记忆。使用选择器（重新选择包）。

在Redux中存储每一位数据的原因是：单一的事实来源。它允许时间旅行和热重装。日志记录。状态保存/恢复。它可以防止对哪些数据是最新的或正确的不一致。还有更多，但这个问题太多了。

为什么不将redux存储状态存储在本地组件状态中？

2 个答案: