东营网站的优化,Wordpress xml 格式,asp网站打开很慢的原因,低代码平台#x1f308;个人主页: 鑫宝Code #x1f525;热门专栏: 闲话杂谈#xff5c; 炫酷HTML | JavaScript基础 #x1f4ab;个人格言: 如无必要#xff0c;勿增实体 文章目录 React 生命周期完全指南一、生命周期概述二、生命周期的三个阶段2.1 挂载阶段个人主页: 鑫宝Code 热门专栏: 闲话杂谈 炫酷HTML | JavaScript基础 个人格言: 如无必要勿增实体 文章目录 React 生命周期完全指南一、生命周期概述二、生命周期的三个阶段2.1 挂载阶段Mounting2.2 更新阶段Updating2.3 卸载阶段Unmounting 三、常用生命周期方法详解3.1 constructor构造函数3.2 componentDidMount3.3 componentDidUpdate3.4 componentWillUnmount 四、生命周期的最佳实践4.1 性能优化4.2 错误处理 五、新旧生命周期的变化5.1 已废弃的生命周期方法5.2 新增的生命周期方法 六、Hooks 时代的生命周期七、总结 React 生命周期完全指南 一、生命周期概述
React 组件的生命周期是指组件从创建、更新到销毁的整个过程。合理地使用生命周期方法可以让我们更好地控制组件的行为优化性能并处理副作用。
二、生命周期的三个阶段
2.1 挂载阶段Mounting
组件实例被创建并插入 DOM 的过程
class MyComponent extends React.Component {// 1. 构造函数constructor(props) {super(props);this.state { count: 0 };console.log(1. constructor);}// 2. 静态方法很少使用static getDerivedStateFromProps(props, state) {console.log(2. getDerivedStateFromProps);return null;}// 3. 渲染方法render() {console.log(3. render);return div{this.state.count}/div;}// 4. 挂载完成componentDidMount() {console.log(4. componentDidMount);}
}2.2 更新阶段Updating
当组件的 props 或 state 发生变化时触发更新
class MyComponent extends React.Component {// 1. 静态方法static getDerivedStateFromProps(props, state) {return null;}// 2. 是否应该更新shouldComponentUpdate(nextProps, nextState) {return true;}// 3. 渲染render() {return div{this.state.count}/div;}// 4. 获取更新前的快照getSnapshotBeforeUpdate(prevProps, prevState) {return null;}// 5. 更新完成componentDidUpdate(prevProps, prevState, snapshot) {// 处理更新后的操作}
}2.3 卸载阶段Unmounting
组件从 DOM 中移除的过程
class MyComponent extends React.Component {componentWillUnmount() {// 清理工作比如清除定时器、取消订阅等console.log(组件即将卸载);}
}三、常用生命周期方法详解 3.1 constructor构造函数
constructor(props) {super(props);// 初始化状态this.state {count: 0,data: []};// 绑定方法this.handleClick this.handleClick.bind(this);
}使用场景
初始化组件的 state绑定事件处理方法不要在这里调用 setState避免在这里执行副作用操作
3.2 componentDidMount
componentDidMount() {// 发起网络请求fetch(api/data).then(res res.json()).then(data {this.setState({ data });});// 添加事件监听window.addEventListener(resize, this.handleResize);// 设置定时器this.timer setInterval(() {this.setState(state ({count: state.count 1}));}, 1000);
}使用场景
发起网络请求DOM 操作添加订阅设置定时器
3.3 componentDidUpdate
componentDidUpdate(prevProps, prevState, snapshot) {// 比较 props 变化if (this.props.userID ! prevProps.userID) {this.fetchData(this.props.userID);}// 比较 state 变化if (this.state.count ! prevState.count) {document.title 点击次数${this.state.count};}
}使用场景
对比更新前后的数据根据条件执行副作用注意避免无限循环
3.4 componentWillUnmount
componentWillUnmount() {// 清除定时器clearInterval(this.timer);// 移除事件监听window.removeEventListener(resize, this.handleResize);// 取消订阅this.subscription.unsubscribe();
}使用场景
清理定时器取消网络请求清除事件监听取消订阅
四、生命周期的最佳实践
4.1 性能优化
class OptimizedComponent extends React.Component {shouldComponentUpdate(nextProps, nextState) {// 只在必要时更新return (this.props.value ! nextProps.value ||this.state.count ! nextState.count);}render() {return (divh1{this.props.value}/h1p{this.state.count}/p/div);}
}4.2 错误处理
class ErrorBoundary extends React.Component {state { hasError: false };static getDerivedStateFromError(error) {return { hasError: true };}componentDidCatch(error, errorInfo) {// 记录错误日志console.error(错误信息, error);console.error(错误详情, errorInfo);}render() {if (this.state.hasError) {return h1出错了/h1;}return this.props.children;}
}五、新旧生命周期的变化
5.1 已废弃的生命周期方法
componentWillMountcomponentWillReceivePropscomponentWillUpdate
5.2 新增的生命周期方法
getDerivedStateFromPropsgetSnapshotBeforeUpdate
六、Hooks 时代的生命周期 function HooksComponent() {// 相当于 constructor 和 componentDidMountconst [count, setCount] useState(0);// 相当于 componentDidMount 和 componentDidUpdateuseEffect(() {document.title 点击次数${count};}, [count]);// 相当于 componentDidMount 和 componentWillUnmountuseEffect(() {const handler () console.log(窗口大小改变);window.addEventListener(resize, handler);// 清理函数return () {window.removeEventListener(resize, handler);};}, []);return div计数{count}/div;
}七、总结
React 生命周期方法为我们提供了在组件不同阶段执行代码的机会。合理使用这些方法可以
优化组件性能正确处理副作用管理组件状态避免内存泄漏
在实际开发中最常用的生命周期方法是
constructor初始化componentDidMount副作用处理componentDidUpdate更新后的操作componentWillUnmount清理工作
随着 React Hooks 的普及函数组件正在逐渐取代类组件。但理解生命周期概念对于深入理解 React 的工作原理仍然至关重要。
