将多个状态合并为组件道具

Question

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

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

连接方法看起来像这样

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

我当然简化了上面的示例来说明我的要求。

在这里，基础组件组成部分和某些hotherComponent使用父母状态进行更新。我不知道这是正确的方法，理想情况下，每个组件都有自己的状态，并且最高级别的组件可以访问所有基础组件状态。像这样的东西在顶级

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

但是，当状态更新时，这无效。这里的正确方法是具有具有其他组件的所有状态并将其作为道具传递的顶级组件吗？还是所有儿童组件都应该根据需要在顶级组件合并的状态？感谢任何输入。

Answer 1

这将是其中之一，因为当涉及到哪个组件应为 connect ed时，没有艰难而快速的规则作为道具，但这是我对此的想法。

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

我不建议将所有props从一个组件传递给其孩子。造成这种情况的主要原因是，它使得很难确定组件是否应该更新，并且当不相关的props更改时，您最终可能会出现不必要的渲染。您最好只通过所需的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)

或使用对象扩展

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

请记住，这将使状态变平，因此，如果状态树的每个分支之间都有任何重复的键，则其中一些将丢失。您可能会像您想做的那样，在整个状态树中经过。

---

我理想的是，每个组件都有自己的状态，并且最高级别的组件可以访问所有基础组件状态。

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

不要误会我的意思，在redux中，组件使用相同的状态通常是正常的(在某些情况下是鼓励(，但是在这种情况下，我不明白为什么它需要它本身，除了将其传递给基础组件(如果是您采用的方法(。