在react应用开发中，组件之间的数据流通常是单向的，即从父组件流向子组件。然而，在许多场景下，子组件需要向父组件“汇报”某些事件或数据变化，以触发父组件状态的更新。这种从子组件向父组件通信的模式，通常通过“状态提升”（lifting state up）来实现。同时，当组件根据条件被移除出dom时，react的生命周期方法如componentwillunmount就显得尤为重要，它允许我们在组件被销毁前执行必要的清理工作。
状态提升：子组件影响父组件状态
“状态提升”是React中处理共享状态的常用模式。当多个组件需要反映相同的变化数据，或者一个组件需要影响另一个组件的状态时，最接近它们的共同祖先组件应该拥有这个状态。然后，这个祖先组件通过props将状态和修改状态的回调函数传递给子组件。子组件在需要时调用这个回调函数，从而间接更新父组件的状态。
以下是一个具体的示例，展示了如何通过点击子组件的按钮来改变父组件的状态，并以此控制子组件的显示与隐藏：
import React from 'react';
// 父组件：App
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
show: true // 控制 ChildrenUnmounting 组件的显示与隐藏
};
// 绑定this，确保toggleDisplay在作为回调函数传递时能正确访问组件实例
this.toggleDisplay = this.toggleDisplay.bind(this);
}
// 切换show状态的方法
toggleDisplay() {
this.setState(prevState => ({
show: !prevState.show
}));
}
render() {
return (
<div className="App">
<h1>父组件内容</h1>
{/* 根据this.state.show的值条件渲染子组件 */}
{this.state.show && <ChildrenUnmounting onclickfun={this.toggleDisplay} />}
{!this.state.show && <p>子组件已卸载</p>}
</div>
);
}
}
// 子组件：ChildrenUnmounting
class ChildrenUnmounting extends React.Component {
constructor(props) {
super(props);
console.log("ChildrenUnmounting: constructor is called!");
// 通常不建议将props直接复制到state中，除非prop只用于初始化且之后不会改变
// this.state = {
// onclickfun: props.onclickfun, // 这一行通常是不必要的，直接使用props.onclickfun即可
// };
}
render() {
console.log("ChildrenUnmounting: render is called!");
return (
<>
<h2>这是子组件内容</h2>
<button onClick={this.props.onclickfun}>
切换显示
</button>
</>
);
}
// 组件即将被卸载时调用
componentWillUnmount() {
console.log("ChildrenUnmounting: componentWillUnmount is called!");
alert("ChildrenUnmounting: componentWillUnmount is called!"); // 弹窗提示组件卸载
// 在这里执行清理工作，例如清除定时器、取消网络请求、移除事件监听器等
}
}代码解析与注意事项
-
父组件 App 的状态管理：
- App 组件的 state 中定义了 show 属性，其初始值为 true。这个 show 属性将决定 ChildrenUnmounting 子组件是否被渲染。
- toggleDisplay 方法用于切换 show 的布尔值。这里使用了 setState 的函数式更新形式 prevState => ({ show: !prevState.show })，这是推荐的做法，可以避免异步更新带来的潜在问题。
- 关键修正： 在 render 方法中，条件渲染子组件时，必须使用 this.state.show 来访问状态，而不是 this.show。this.show 会导致属性未定义，从而使条件渲染失效。这是原代码中常见的错误点。
- toggleDisplay 方法作为 onclickfun prop 传递给 ChildrenUnmounting 子组件。
-
子组件 ChildrenUnmounting 的交互：
- 子组件通过 this.props.onclickfun 访问父组件传递过来的回调函数。
- 当按钮被点击时，onClick 事件会触发 this.props.onclickfun 的执行，从而调用父组件的 toggleDisplay 方法。
- 注意： 在子组件的 constructor 中将 props.onclickfun 复制到 state 中通常是不必要的，并且可能导致状态与props不同步。直接使用 this.props.onclickfun 即可。
-
componentWillUnmount 生命周期方法：
- 当父组件的 show 状态变为 false 时，ChildrenUnmounting 组件将不再被渲染，这意味着它将从DOM中被移除，即被“卸载”。
- 在组件被卸载之前，componentWillUnmount 生命周期方法会被调用。这是执行清理操作的理想场所，例如：
- 清除在 componentDidMount 中设置的定时器或延时器。
- 取消进行中的网络请求。
- 移除在DOM元素上直接添加的事件监听器。
- 清理任何可能导致内存泄漏的资源。
- 在示例中，当 ChildrenUnmounting 组件被卸载时，会打印一条控制台消息并弹出一个警告框，以直观地展示此方法的触发。
总结
通过本教程，我们深入理解了React中父子组件通信的“状态提升”模式，以及如何利用它实现组件的动态挂载与卸载。关键在于父组件拥有并管理状态，并通过props将状态和修改状态的回调函数传递给子组件。子组件通过调用这些回调函数来间接影响父组件的状态。同时，componentWillUnmount 方法为我们在组件生命周期结束时提供了执行清理工作的机会，这对于避免内存泄漏和确保应用性能至关重要。正确地引用状态（this.state.propertyName）是确保组件行为符合预期的基础。
