React 共享组件状态及其实践

React 是一个强大的JavaScript库，它提供了一种简单的方式来构建用户界面。然而，随着应用规模的增长，状态管理成为一个复杂的问题。本篇文章将深入探讨如何在React组件之间共享状态。

状态提升

首先，我们来谈谈"状态提升"。这是React中最常见的共享状态方式。当两个或更多组件需要访问相同的数据时，我们可以创建一个新的组件并将所有涉及状态的组件作为其子组件。然后，我们将状态移动到这个新的组件中，最后通过props向下传递数据。

class ParentComponent extends React.Component {constructor(props) {super(props);this.state = { sharedData: 'Hello World' };}render() {return (<div>{/* Child component A */}<ChildA data={this.state.sharedData} />{/* Child component B */}<ChildB data={this.state.sharedData} /></div>);}
}class ChildA extends React.Component {render() {return <p>Child Component A: {this.props.data}</p>;}
}class ChildB extends React.Component {render() {return <p>Child Component B: {this.props.data}</p>;}
}

useContext Hook

另外一种共享状态的方式是使用useContext Hook。useContext是一个可以在React组件树上下文中传递数据的方法，它可以让我们在不需要props的情况下就能访问到特定的值。

首先，我们需要创建一个 context 对象:

const MyContext = React.createContext();

然后，我们在需要共享状态的组件的最顶层使用MyContext.Provider来提供这个 context 对象:

<MyContext.Provider value={{ sharedData }}>{/* 子组件 */}
</MyContext.Provider>

最后，我们在需要访问这个状态的任何组件中，都可以通过useContext(MyContext)来获取 context 中的数据:

function SomeComponent() {const context = useContext(MyContext);console.log(context.sharedData); // 输出 'Hello World'
}

MobX 或 Redux

对于大型项目，推荐使用专门的状态管理库如MobX或者Redux。这些库提供了更加高级的功能，例如时间旅行、可预测性等。

下面是一个简单的使用MobX的例子:

import { observable } from "mobx";class Store {@observable sharedData = "Hello World";
}const store = new Store();// 使用store中的sharedData
const App = observer(() => (<div><p>{store.sharedData}</p></div>
));