组件相亲角之通讯录公开，Context如何做媒？
2023-10-09 12:39:46
组件通讯中的Context：认识你的远房亲戚
在React的组件世界中，我们经常会遇到这样的情况：两个组件需要相互通信，但它们之间没有任何直接的关系，或者它们是嵌套多层的远房亲戚。在这种情况下，Context就闪亮登场了，它就像一个桥梁，连接着这些远房亲戚，让它们能够无缝地传递信息。
Context：组件通讯大户
Context是一个React组件，它有两种组件：Provider和Consumer。Provider组件就像一个数据提供者，它提供数据，而Consumer组件就像一个数据消费者，它使用这些数据。
比如，假设我们有一个"父母"组件，它有"姓名"和"职业"属性。我们想在"子女"组件中访问这些属性。这时，我们可以使用Context。
// 父母组件
const Parent = () => {
const name = "张三";
const occupation = "医生";
return (
<Context.Provider value={{ name, occupation }}>
<Child />
</Context.Provider>
);
};
// 子组件
const Child = () => {
const data = useContext(Context);
return (
<div>
姓名：{data.name}
职业：{data.occupation}
</div>
);
};
在这个例子中，Provider组件在父母组件中，它提供"姓名"和"职业"数据。Consumer组件在子女组件中，它使用useContext(Context)钩子来获取数据。
组件生命周期：组件发展的历程
组件生命周期就像组件发展的一个过程，它从出生（组件被创建）到死亡（组件被卸载）。这个过程中，组件会经历一系列的阶段，每个阶段都会触发一些特殊的方法，这些方法就是生命周期钩子函数。
最常用的生命周期钩子函数有：
- componentDidMount()： 当组件被挂载到页面中时调用。
- componentDidUpdate()： 当组件更新时调用。
- componentWillUnmount()： 当组件被卸载时调用。
class MyComponent extends React.Component {
// 组件挂载时调用
componentDidMount() {
console.log("组件挂载了");
}
// 组件卸载时调用
componentWillUnmount() {
console.log("组件卸载了");
}
}
生命周期钩子函数可以帮助我们执行一些特殊任务，比如：
- 在组件挂载时，我们可以获取DOM元素的引用，然后在组件卸载时释放它们。
- 在组件更新时，我们可以比较新旧属性，然后只更新必要的DOM元素。
- 在组件出错时，我们可以记录错误信息，然后在控制台中显示它们。
Context和生命周期：相辅相成
Context和生命周期是React中两个非常重要的概念，它们相辅相成，缺一不可。Context帮助我们解决组件通讯的问题，而生命周期帮助我们了解组件的运行过程和执行特殊任务。
掌握了Context和生命周期，你就能写出更强大的React组件，轻松应对各种组件通讯和状态管理的挑战。
常见问题解答
-
Context和Redux哪个更好？
- Context更适合简单的组件通讯，而Redux更适合复杂的状态管理。
-
何时使用生命周期钩子函数？
- 当需要执行特殊任务时，比如获取DOM元素的引用、比较新旧属性或记录错误信息。
-
componentDidMount()和componentWillMount()的区别？
- componentWillMount()在组件挂载之前调用，而componentDidMount()在组件挂载之后调用。
-
componentWillUnmount()何时会被调用？
- 当组件从DOM中移除时，componentWillUnmount()会被调用。
-
生命周期钩子函数可以异步吗？
- 只有componentDidMount()和componentDidUpdate()可以异步。
