ReactJS-提升状态与保持本地状态

ReactJS-提升状态与保持本地状态

如React文档所述

通常，几个组件需要反映相同的变化数据。我们建议将共享状态提升到最接近的共同祖先。

对于React应用程序中发生的任何数据更改，应该只有一个“事实来源”。通常，首先将状态添加到需要呈现的组件。然后，如果还需要其他组件，则可以将其提升到最接近的共同祖先。与其尝试在不同组件之间同步状态，不如依靠自上而下的数据流。

与双向绑定方法相比，解除状态涉及编写更多的“样板”代码，但这样做的好处是，查找和隔离错误的工作量较小。由于任何状态都“存在”于某个组件中，并且该组件本身可以更改它，因此，大大减少了错误的表面积。此外，您可以实现任何自定义逻辑来拒绝或转换用户输入。

因此，从根本上讲，您还需要将树状结构提升到正在被兄弟姐妹组件使用的状态。因此，您第

selectedItems

一个将状态存储为状态的实现

RightContainer

是完全合理的，这是一个很好的方法，因为父级不需要了解信息，并且这

data

是由的两个

child

组件共享的，而这两个组件

RightContainer

现在只有一个来源真相。

根据您的问题：

作为可行的替代方案，我想到了将_selected属性添加到中的每个项目

state.right.data

，

MainContainer

并将select回调传递到下三个级别，以

SelectableList

处理in中的所有可能的 *** 作

MainContainer

我不同意这是比第一种更好的方法，因为您

MainContainer

不需要知道

selectedItems

或处理程序的任何更新。

MainContainer

对这些州没有做任何事情，只是将其传承下去。

考虑到

optimise onperformance

您自己谈论实现a的问题

shouldComponentUpdate

，但可以通过扩展组件来避免这种情况，方法是扩展

React.PureComponent

和本质上

shouldComponentUpdate

使用and

shallow

比较实现。

state``props

根据文档：

如果您的React组件的

render()

函数在相同的道具和状态下呈现相同的结果，则

React.PureComponen

在某些情况下可以使用t提高性能。

但是，如果多个深度嵌套的组件正在使用同一数据，则使用redux并将该数据存储在redux状态是有意义的。这样，整个应用程序就可以全局访问它，并且可以在不直接相关的组件之间共享它。

例如考虑以下情况

const App = () => {    <Router>         <Route path="/" component={Home}/>         <Route path="/mypage" component={MyComp}/>    </Router>}

现在，如果Home和MyComp都想访问相同的数据。您可以通过

render

prop 调用它们，将数据作为来自prop的prop
传递。但是，可以通过使用以下

connect

函数将这两个组件都连接到Redux状态来轻松实现

const mapStateToProps = (state) => {   return {      data: state.data   }}export connect(mapStateToProps)(Home);

和类似的

MyComp

。易于配置 *** 作以更新相关信息

同样，为您的应用程序配置Redux特别容易，您将能够在单个化简器中存储与相同内容相关的数据。这样，您还可以模块化您的应用程序数据