Question

我有一个问题，关于如何处理多个组件之间的状态。假设我有以下组件结构：

class ExampleComponent extends React.Component<...> {
    public render() {
        return <div>
            <h1>Hello world</h1>
            <SomeComponent {...this.props} />
            <SomeOtherComponent = {...this.props} />
        </div>
    }
}

connect方法如下所示

export default connect(
    (state: ApplicationState) => state.ExampleComponent, 
    ExampleComponentStore.actionCreators                 
)(ExampleComponent) as typeof ExampleComponent;

我当然简化了上面的例子，以说明我的要求。

这里底层组件SomeComponent和SomeOtherComponent使用父状态进行更新。我不知道这是否是正确的方法，我理想的是每个组件都有自己的状态，并且顶级组件可以访问所有底层组件状态。顶级的这样的事情

export default connect(
    (state: ApplicationState) => Object.assign(state.ExampleComponent, state.SomeComponent, state.SomeOtherComponent), 
    ExampleComponentStore.actionCreators                 
)(ExampleComponent) as typeof ExampleComponent;

但是，当状态更新时，这不起作用。这里的正确方法是拥有一个顶级组件，其中包含其他组件的所有状态，并将它们作为道具传递？或者是否所有子组件都有自己的状态，并根据需要在顶级组件中合并？我很感激任何意见。

Answer 1

这将是其中一个＆＃34;一般来说答案＆＃34;因为当涉及哪些组件connect以及应该作为道具传递时，没有严格的规则，但这是我对它的想法。

<SomeComponent {...this.props} />
<SomeOtherComponent = {...this.props} />

我不建议将所有props从一个组件传递给它的子组件。造成这种情况的主要原因是，当不相关的props发生变化时，很难确定component should update和你是否可能会得到一些不必要的渲染。你最好只传递所需的props。它在维护方面做了一些努力，但从长远来看它是值得的。

如果SomeComponent和SomeOtherComponent在redux商店中有自己的状态，那么connect将它们带到商店以及获取其状态并不会造成太大的危害。事实上，react-redux可以很好地确定组件是否应该根据它的状态和道具进行更新，因此在很多情况下，您可以从中获得性能提升。 这是我向您推荐的。

如果他们仍然需要来自父组件状态的某些值，他们可以自己映射这些值，也可以从父组件传递它们。 connect ed组件仍然可以像标准组件一样接受props。

@markerikson在评论中提到了这一点，但我也将其包括在内：

(state: ApplicationState) => Object.assign(state.ExampleComponent, state.SomeComponent, state.SomeOtherComponent)

此mapStateToProps已被破坏。 Object.assign的第一个参数是变异的参数。这更准确地写为

(state: ApplicationState) => Object.assign({}, state.ExampleComponent, state.SomeComponent, state.SomeOtherComponent)

或使用 object spread

(state: ApplicationState) => ({ ...state.ExampleComponent, ...state.SomeComponent, ...state.SomeOtherComponent })

请记住，这将使状态变平，因此如果状态树的每个分支之间存在任何重复键，则其中一些将丢失。如果这是你想做的事情，你可能最好不要传递整个状态树。

理想情况下，每个组件都拥有自己的状态，并且顶级组件可以访问所有底层组件状态。

我很好奇为什么顶级组件需要访问底层组件的状态。

不要误解我，在redux中，组件使用相同的状态彼此通常是正常的（在某些情况下鼓励），但在这种情况下，我不会＆＃39 ;除了将它传递给底层组件（如果你采取的方法）之外，我知道为什么它本身需要它。

将多个状态合并到组件道具中

1 个答案: