网址推荐你会感谢我的_网站建设平台策划_公众号seo排名软件_上海百度竞价托管

React 生命周期可以分为三个主要阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting）

挂载（Mounting）

当组件实例被创建并插入到 DOM 中时，会依次调用以下方法：

1. constructor(props)

   // 1.初始化组件的状态。
   // 2.绑定事件处理器方法。
   // 3.注意：不要在构造函数中调用 setState() 方法。
   constructor(props) {super(props);this.state = {count: 0};
   }

2. static getDerivedStateFromProps(props, state)

   // 1.在组件渲染之前调用，返回一个对象来更新 state，或者返回 null 表示不更新任何内容。
   // 2.注意：这个方法很少使用，因为它容易导致代码难以维护。
   static getDerivedStateFromProps(props, state) {if (props.value !== state.externalValue) {return { externalValue: props.value };}return null;
   }

3. render()

   // 1.必须实现的方法，返回 React 元素、数组、片段、门户、字符串、数字或 null。
   // 2.注意：不要在 render() 方法中调用 setState() 方法.
   render() {return <h1>Hello, {this.state.name}</h1>;
   }

4. componentDidMount()

   // 1.在组件挂载后立即调用。
   // 2.适合进行网络请求、订阅事件等操作。
   // 3.注意：可以在这里调用 setState() 方法，但会导致额外的重新渲染。
   componentDidMount() {fetch('/api/data').then(response => response.json()).then(data => this.setState({ data }));
   }

更新（Updating）

当组件的 props 或 state 发生变化时，会依次调用以下方法：

1. static getDerivedStateFromProps(props, state)-在组件重新渲染之前调用，注意：与挂载阶段相同。

2. shouldComponentUpdate(nextProps, nextState)

   // 1.返回一个布尔值，决定组件是否应该重新渲染。
   // 2.默认返回 true，即组件会在每次更新时重新渲染。
   // 3.注意：可以通过优化性能，避免不必要的重新渲染。
   shouldComponentUpdate(nextProps, nextState) {return nextProps.value !== this.props.value || nextState.count !== this.state.count;
   }

3. render()-与挂载阶段相同

4. getSnapshotBeforeUpdate(prevProps, prevState)

   // 1.在最近一次渲染输出提交到 DOM 之前调用。
   // 2.返回一个值，作为 componentDidUpdate 的第三个参数。
   // 3.注意：很少使用，通常用于从 DOM 中捕获一些信息（如滚动位置）。
   getSnapshotBeforeUpdate(prevProps, prevState) {if (prevProps.list.length < this.props.list.length) {const list = this.listRef.current;return list.scrollHeight - list.scrollTop;}return null;
   }

5. componentDidUpdate(prevProps, prevState, snapshot)

   // 1.在组件更新后立即调用。
   // 2.可以在这里进行网络请求，但需要比较当前 props 和 prevProps。
   // 3.注意：可以在这里调用 setState() 方法，但需要小心避免无限循环。
   componentDidUpdate(prevProps, prevState, snapshot) {if (snapshot !== null) {const list = this.listRef.current;list.scrollTop = list.scrollHeight - snapshot;}
   }

卸载（Unmounting）

当组件从 DOM 中移除时，会调用以下方法：

1. componentWillUnmount()

   // 1. 在组件卸载和销毁之前调用。
   // 2. 适合进行清理工作，如取消网络请求、清除定时器、取消事件订阅等。
   // 3. 注意：不要调用 setState() 方法，因为组件即将被卸载。
   componentWillUnmount() {clearInterval(this.timerID);
   }

错误处理（Error Handling）

1. static getDerivedStateFromError(error)

   // 1.在后代组件抛出错误后调用。
   // 2.返回一个对象来更新 state。
   // 3.注意：用于渲染备用 UI。
   static getDerivedStateFromError(error) {return { hasError: true };
   }

2. componentDidCatch(error, info)

   // 1.在后代组件抛出错误后调用。
   // 2.适合记录错误信息。
   // 3.注意：可以在这里调用 setState() 方法。
   componentDidCatch(error, info) {console.error("Error caught:", error, info);
   }

应用计算器

// src/components/Counter.js
import React, { Component } from 'react';class Counter extends Component {constructor(props) {super(props);this.state = {count: 0};console.log('Constructor called');}static getDerivedStateFromProps(nextProps, prevState) {console.log('getDerivedStateFromProps called');return null; // 返回 null 表示不修改 state}componentDidMount() {console.log('componentDidMount called');}shouldComponentUpdate(nextProps, nextState) {console.log('shouldComponentUpdate called');return true; // 返回 true 表示允许更新}getSnapshotBeforeUpdate(prevProps, prevState) {console.log('getSnapshotBeforeUpdate called');return null; // 返回值将作为 componentDidUpdate 的第三个参数}componentDidUpdate(prevProps, prevState, snapshot) {console.log('componentDidUpdate called');}componentWillUnmount() {console.log('componentWillUnmount called');}incrementCount = () => {this.setState((prevState) => ({count: prevState.count + 1}));};render() {console.log('Render called');return (<div><h1>Count: {this.state.count}</h1><button onClick={this.incrementCount}>Increment</button></div>);}
}export default Counter;

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './components/Counter';ReactDOM.render(<Counter />, document.getElementById('root'));

总结

1. 挂载（Mounting）：初始化组件、绑定事件、获取数据。
2. 更新（Updating）：响应 props 和 state 的变化，优化性能。
3. 卸载（Unmounting）：清理资源，避免内存泄漏。
4. 错误处理（Error Handling）：捕获和处理错误，提供更好的用户体验。
5. 挂载阶段：constructor -> getDerivedStateFromProps -> render -> componentDidMount
6. 更新阶段：getDerivedStateFromProps -> shouldComponentUpdate -> render -> getSnapshotBeforeUpdate -> componentDidUpdate
7. 卸载阶段：componentWillUnmount
8. useEffect：替代 componentDidMount、componentDidUpdate 和 componentWillUnmount。
9. useState：管理组件状态。
10. useMemo 和 useCallback：优化性能，避免不必要的重新渲染。