我目前正在开发一款应用程序，该应用程序在其UI的某些部分使用React来实现一些非常交互式的复杂功能。应用程序中的一些部分，实际上是React组件，在大小上变得非常复杂。
这使我能够通过将代码划分为多个子组件(以及它们自己的子组件中的子组件，依此类推(来组织代码。主要问题是主组件的一些子系统可能需要修改与它们无关的另一个子系统的状态。要做到这一点，我最终必须在公共父级中具有状态，并将许多事件处理程序(父组件的方法(传递给他们的子级，而这些子级则需要将其传递给孙辈。
正如你所能想象的，这正变得一团糟。
// MyComponent.js
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
list: [1, 2, 3, 4],
selected: '',
}
this.add = this.add.bind(this)
this.handleChange = this.handleChange.bind(this)
}
add() {
const newNumber = this.state.list[this.state.list.length - 1] + 1,
list = [...this.state.list, newNumber]
this.setState({list})
}
handleChange({target}) {
this.setState({
selected: target.value,
})
}
render() {
return (
<>
<List items={this.state.list} selected={this.state.selected} />
<Button onClick={this.add} />
<input type="text" value={this.state.selected} onChange={this.handleChange} />
</>
)
}
}
// Button.js
class Button extends React.Component {
render() {
return (
<button onClick={this.props.onClick}>Click me!</button>
);
}
}
// List.js
class List extends React.Component {
constructor(props) {
super(props)
this.refs = props.items.map(_ => React.createRef())
}
render() {
return (
<ul>
{this.props.items.map((item, key) =>
(<li ref={this.ref[key]} key={key}>{item}</li>)
)}
</ul>
);
}
}
在前面的伪代码中，您可以看到我需要如何在MyCompoent组件中定义add()方法，以便在Button组件中发生的操作可以修改List中显示的内容。尽管这似乎是一种显而易见的方法，但我的组件有一个大的组件树和很多方法，其中大部分都在树中丢失了，从父级传递到子级，直到到达预期的组件。
我在互联网上做了一些研究，结果发现这是一个非常常见的问题。在大多数站点中，建议使用Redux或其他状态管理库。然而，我看到的所有使用React实现Redux的教程和指南似乎都认为你只是在使用React以单页应用程序的方式构建你的应用程序。这不是我的情况。
有没有什么方法可以共享组件的状态来避免这种问题？是否有一种方法可以为同一应用程序中的多个组件多次使用Redux，其中一个存储区只保存MyComponent的状态，并且可以由List或其任何可能的子级访问？
-
Redux不需要整个站点都在React中。它实现了一个更高级别的组件，即使它们嵌入在另一个站点中，也可以与任何React组件一起使用。
-
您可以查看React挂钩来解决类似的问题。具体来说，请检查
useContext()和useState()。
您在示例中的react中使用了提升状态向上模式。
这是一种非常常见的好方法，但当你的应用程序正在发展时，你需要通过组件树传递所有的道具。维护起来很困难。
在这种情况下，您需要使用分隔存储或useContext((钩子签出redux。