在 React JS 中，啥时候应该使用存储与直接操作视图的状态？

Posted 2023-02-22

技术标签:

【中文标题】在 React JS 中，啥时候应该使用存储与直接操作视图的状态？【英文标题】：In React JS, when should you use a store vs directly manipulating the view's state?在 React JS 中，什么时候应该使用存储与直接操作视图的状态？ 【发布时间】：2015-05-18 11:47:11 【问题描述】：

现在我将 store 的概念理解为 React 应用程序的真实来源，但似乎有时使用 store 是多余的，尤其是在仅 UI 的情况下。

例如，假设我正在制作一个包含电影列表的应用。该应用程序包含一个搜索栏，可让您根据标题过滤这些电影。这个搜索栏的值（我们称之为searchTerm）是否应该包含在商店中？它唯一的影响是显示的电影列表，这纯粹是一个 UI 功能。它不会被发送到服务器或保存到本地存储。所以在我的handleTextChange 函数中，我应该提醒商店还是简单地设置组件的状态：

应该是这样（使用商店）：

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"/>

后一个例子显然更简单。是否有充分的理由使用商店来过滤数据？或者视图应该有一个searchTerm 变量并在render() 函数中执行过滤？

【问题讨论】：

取决于您在存储中缓存数据的方式。在某些时候，您可能希望使用您的 searchTerm 过滤数据。您可以在组件中执行此操作，让商店知道搜索了哪个 searchTerm，或者在获取数据时将其作为参数发送。我喜欢不向他们不需要的组件发送太多信息。所以尽早过滤是我用过的一种方法，但不能说什么是最好的方法。如果数据集很小，真的不需要缓存数据，组件过滤就可以了。 【参考方案1】：

正如您的示例所示，不使用商店更简单，并且在这种情况下可以说是正确的。

要回答的弱问题是：