我之前问过一个关于react组件状态与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>
)
}
}
首先让我澄清你的疑问,当你应该使用React Component State时,
- 如果某些东西只在组件活动时被存储,则使用react state。
- 如果你想让别人看到相同的ui的组件,因为他们离开之前,即使他们返回后,在其他组件上执行一些其他操作使用Redux。
现在关于你的数据过滤我们同时使用State和Redux.
-
我们使用state来过滤name中的数据,因为我们不想让他在返回页面时看到相同的过滤数据,因为这会造成混淆
-
用于过滤价格数据或其他一些过滤器,我们存储实际数据并在Redux中过滤数据。
-
由于我们将实际数据存储在redux和过滤器中,我们在数据发送到组件之前应用过滤器算法,即在MapStateToProps中。例如data: getFilteredData(state.somestate. somestate.)数据、state.somestate.filters)其中getFilteredData是一个函数,它接受数据,过滤并返回过滤后的数据
您的代码中没有Redux,您的问题似乎与Redux无关。
第二个代码块使用ES6类。用谷歌搜索一下,看看你能用它们做什么。
在Redux中,组件最好是无状态的。它们从Redux或父节点接收数据,但不存储任何数据。所以没有setState
。表不会排序任何东西(它将接收排序的日子作为道具),或者它可能会,但它不会是状态,它会在render
中排序。当然,它将排序一个副本,而不是传入的prop
。
在Redux中存储每一位数据的原因是:事实的单一来源。它允许时间旅行和热装弹。日志记录。保存/恢复状态。它可以防止在哪些数据是最新的或正确的问题上产生分歧。