基本上，道具和状态是组件可以知道什么以及如何渲染的两种方式。应用程序状态的哪一部分属于状态，哪一部分属于顶级存储，与您的应用程序设计有关，而不是与React的工作方式有关。IMO决定最简单的方法是思考，这块特定的数据对于整个应用程序是否有用，还是某些本地信息。另外，不要复制状态也很重要，因此，如果可以通过props计算某些数据-应该从props计算数据。
例如，假设您有一些下拉控件（包装用于自定义样式的标准HTML选择），它可以a）从列表中选择一些值，以及b）打开或关闭（即显示或隐藏选项列表）。现在，假设您的应用显示了某种类型的项目列表，并且下拉控件过滤了列表项。然后，最好将活动过滤器值作为参数传递，并保持本地打开/关闭状态。同样，为了使其功能正常，您将从父组件传递一个onChange处理程序，该处理程序将在下拉元素内部调用，并立即将更新的信息（新选择的过滤器）发送到商店。另一方面，打开/关闭状态可以保留在下拉组件中，因为应用程序的其余部分并不真正关心控件是否打开，直到用户实际更改其值为止。
以下代码无法完全正常运行，它需要CSS并处理下拉click / blur / change事件，但我想尽量减少示例。希望它有助于理解差异。
const _store = {
items: [
{ id: 1, label: 'One' },
{ id: 2, label: 'Two' },
{ id: 3, label: 'Three', new: true },
{ id: 4, label: 'Four', new: true },
{ id: 5, label: 'Five', important: true },
{ id: 6, label: 'Six' },
{ id: 7, label: 'Seven', important: true },
],
activeFilter: 'important',
possibleFilters: [
{ key: 'all', label: 'All' },
{ key: 'new', label: 'New' },
{ key: 'important', label: 'Important' }
]
}
function getFilteredItems(items, filter) {
switch (filter) {
case 'all':
return items;
case 'new':
return items.filter(function(item) { return Boolean(item.new); });
case 'important':
return items.filter(function(item) { return Boolean(item.important); });
default:
return items;
}
}
const App = React.createClass({
render: function() {
return (
<div>
My list:
<ItemList items={this.props.listItems} />
<div>
<Dropdown
onFilterChange={function(e) {
_store.activeFilter = e.currentTarget.value;
console.log(_store); // in real life, some action would be dispatched here
}}
filterOptions={this.props.filterOptions}
value={this.props.activeFilter}
/>
</div>
</div>
);
}
});
const ItemList = React.createClass({
render: function() {
return (
<div>
{this.props.items.map(function(item) {
return <div key={item.id}>{item.id}: {item.label}</div>;
})}
</div>
);
}
});
const Dropdown = React.createClass({
getInitialState: function() {
return {
isOpen: false
};
},
render: function() {
return (
<div>
<select
className="hidden-select"
onChange={this.props.onFilterChange}
value={this.props.value}>
{this.props.filterOptions.map(function(option) {
return <option value={option.key} key={option.key}>{option.label}</option>
})}
</select>
<div className={'custom-select' + (this.state.isOpen ? ' open' : '')} onClick={this.onClick}>
<div className="selected-value">{this.props.activeFilter}</div>
{this.props.filterOptions.map(function(option) {
return <div data-value={option.key} key={option.key}>{option.label}</div>
})}
</div>
</div>
);
},
onClick: function(e) {
this.setState({
isOpen: !this.state.isOpen
});
}
});
ReactDOM.render(
<App
listItems={getFilteredItems(_store.items, _store.activeFilter)}
filterOptions={_store.possibleFilters}
activeFilter={_store.activeFilter}
/>,
document.getElementById('root')
);
