Javascript 在React JS中，什么时候应该使用存储，而不是直接操作视图'；什么州？

现在我理解了商店是React应用程序的真实来源这一概念，但有时使用商店似乎有些过火，尤其是在只有UI的情况下

例如，假设我正在制作一个包含电影列表的应用程序。该应用程序包含一个搜索栏，可以让你根据标题过滤这些电影。这个搜索栏的值（我们称之为

searchTerm

）应该包含在存储中吗？它唯一的影响是显示的电影列表，这纯粹是一个UI功能。它不会被发送到服务器或保存到本地存储。因此，在我的

handleTextChange

函数中，我应该向存储发出警报，还是简单地设置组件的状态：

如果是这样（使用商店）：

var Actions=reflow.createActions([
“搜索已更改”
]);
var Store=reflow.createStore({
可侦听对象：[操作]，
getInitialState:函数（）{
返回数据；
},
onSearchChanged:函数（searchTerm）{
此.trigger（data.filter）函数（el）{
返回el.name.toLowerCase（）.indexOf（searchTerm.toLowerCase（））！=-1；
}));
}
});
var View=React.createClass({
混合：[回流.连接（存储，“电影”）]，
handleTextChange:函数（e）{
已更改的操作（如目标值）；
},
render:function（）{
//在此处渲染。在某个地方有此输入元素：
}
)};

或者（不使用商店）：

var Store=reflow.createStore({
getInitialState:函数（）{
返回数据；
},
});
var View=React.createClass({
混合：[回流.连接（存储，“电影”）]，
handleTextChange:函数（e）{
this.setState（{searchTerm:e.target.value}）；
},
render:function（）{
var filtered=this.movies.filter（函数（el）{
返回el.name.toLowerCase（）.indexOf（this.state.searchTerm.toLowerCase（））！=-1；
});
//在此处使用过滤变量进行渲染。在某个地方有此输入元素：
}
}

---

后一个例子显然更简单。是否有充分的理由使用存储来过滤数据？或者视图是否应该有

searchTerm

变量并在

render（）中执行过滤

功能？

这两种方法都是正确的！但对于您的情况，在组件中进行过滤更好。因为搜索结果是可计算的。商店应该只保留原始数据。“开发反应边缘”一书以filterableForm为例，将搜索关键字保留在视图组件中是完全正确的。

正如您的示例所示，不使用存储更简单，在这种情况下可以说是正确的

要回答的一个薄弱问题是：

是否有其他组件需要了解搜索结果

一个更好的问题是：

其他组件是否需要了解搜索结果

考虑一下，如果你在结果中添加分页，或者甚至添加一个简单的“找到12个结果”标题，那么这些组件需要知道结果，并且需要从应用商店获取结果。或者，你可能需要添加一个路由器，让搜索更新url，并更改url以驱动应用程序

---

如果您可以肯定地说只有子组件才会关心某个值，那么状态是确定的。

取决于您在存储中缓存数据的方式。在某个时候，您可能希望使用searchTerm筛选数据。您可以在组件中执行此操作，让存储知道搜索哪个searchTerm，或者将其作为参数发送在获取数据时。我喜欢不向组件发送太多不需要的信息。因此，我使用过尽早过滤的方法，但不能说最好的方法是什么。如果数据集很小，并且确实不需要缓存数据，那么组件过滤就可以了。

var Actions = Reflux.createActions([
    "searchChanged"
]);

var Store = Reflux.createStore({
    listenables: [Actions],
    getInitialState: function () {
        return data;
    },
    onSearchChanged: function (searchTerm) {
        this.trigger(data.filter(function (el) {
            return el.name.toLowerCase().indexOf(searchTerm.toLowerCase()) != -1;
        }));
    }
});

var View = React.createClass({
    mixins: [Reflux.connect(Store, "movies")],
    handleTextChange: function (e) {
        Actions.searchChanged(e.target.value);
    },
    render: function(){
        //Render here. Somewhere there is this input element:
        <input onChange={this.handleTextChange} type="text"/>
    }
)};

var Store = Reflux.createStore({
    getInitialState: function () {
        return data;
    },
});
var View = React.createClass({
    mixins: [Reflux.connect(Store, "movies")],
    handleTextChange: function (e) {
        this.setState({searchTerm: e.target.value});
    },
    render: function(){
        var filtered = this.movies.filter(function (el) {
            return el.name.toLowerCase().indexOf(this.state.searchTerm.toLowerCase()) != -1;
        });

        //Render here using the filtered variable. Somewhere there is this input element:
        <input onChange={this.handleTextChange} type="text"/>
    }
}