永春网站设计,设计类型的网站,计算机培训班价格,装修房子图片三室一厅效果图在React的类组件中#xff0c;从组件创建到组件被挂载到页面中#xff0c;这个过程react存在一系列的生命周期函数#xff0c;最主要的生命周期函数是componentDidMount、componentDidUpdate、componentWillUnmount
生命周期图例如下 1. componentDidMount组件挂载
如果你…在React的类组件中从组件创建到组件被挂载到页面中这个过程react存在一系列的生命周期函数最主要的生命周期函数是componentDidMount、componentDidUpdate、componentWillUnmount
生命周期图例如下 1. componentDidMount组件挂载
如果你定义了 componentDidMount 方法React 将会在组件被添加到屏幕上 挂载 后调用它。这里是设置数据获取、订阅监听事件或操作 DOM 节点的常见位置。
参数componentDidMount 不需要任何参数返回值componentDidMount 不应该返回任何值场景多用于组件中进行网络请求DOM操作等 componentDidMount() {console.log(component did mount);}
2. componentDidUpdate组件更新
如果你定义了 componentDidUpdate 方法那么 React 会在你的组件更新了 props 或 state 重新渲染后立即调用它。这个方法不会在首次渲染时调用。
参数 prevProps更新之前的 props。prevProps 将会与 this.props 进行比较来确定发生了什么改变 prevState更新之前的 state。prevState 将会与 this.state 进行比较来确定发生了什么改变 snapshot 如果你实现了 getSnapshotBeforeUpdate 方法那么 snapshot 将包含从该方法返回的值。否则它将是 undefined 返回值componentDidMount 不应该返回任何值 注意如果在组件中定义了shouldComponentUpdate 并且返回值是 false 的话componentDidUpdate 将不会被调用。如果在componentDidUpdate 中直接调用 setState方法会造成触发一次发生在浏览器更新屏幕内容之前的额外渲染在这种情况下即使 render 会被调用两次用户也看不到中间状态。这种模式通常会导致性能问题。 componentDidUpdate(prevProps, prevState, snapshot) {console.log(component did update);}
3. componentWillUnmount组件卸载
如果你定义了 componentWillUnmount 方法React 会在你的组件被移除屏幕卸载之前调用它。此方法常常用于取消数据获取或移除监听事件。
参数componentDidMount 不需要任何参数返回值componentDidMount 不应该返回任何值注意componentWillUnmount 内部的逻辑应该完全“对应”到 componentDidMount 内部的逻辑例如如果你在 componentDidMount 中设置了一个监听事件那么 componentWillUnmount 中就应该清除掉这个监听事件例如定时器任务等。 componentWillUnmount() {console.log(component willUnmount);}
4. getSnapshotBeforeUpdate组件快照
getSnapshotBeforeUpdateReact 会在 React 更新 DOM 之前时直接调用它。它使你的组件能够在 DOM 发生更改之前捕获一些信息例如滚动的位置。此生命周期方法返回的任何值都将作为参数传递给 componentDidUpdate。
参数 prevProps更新之前的 Props。prevProps 将会与 this.props 进行比较来确定发生了什么改变。 prevState更新之前的 State。prevState 将会与 this.state 进行比较来确定发生了什么改变。 返回值返回你想要的任何类型的快照值或者是 null。你返回的值将作为第三个参数传递给 componentDidUpdate。 getSnapshotBeforeUpdate(prevProps, prevState) {console.log(getSnapshotBeforeUpdate);return 123}
运行结果
用例组件App:
class HelloWorld extends React.Component {constructor() {super()this.state {banners: [新歌曲,新mv, 新歌单],porductsList: [商品,热门, 流行],count: 100,}}changeCount(count) {this.setState({count: this.state.count count})}render() {const { banners, porductsList, count} this.statereturn (divHeader /Main banners{banners} addClick{(count) this.changeCount(count)} /Footer porductsList{porductsList}/div{count}/div/div)}componentDidMount() {console.log(component did mount);}getSnapshotBeforeUpdate(prevProps, prevState) {console.log(getSnapshotBeforeUpdate);return 123}componentDidUpdate(prevProps, prevState, snapshot) {console.log(component did update);console.log(prevProps, prevState, snapshot, prevProps, prevState, snapshot); // snapshot 就是 getSnapshotBeforeUpdate 返回的值 123}componentWillUnmount() {console.log(component willUnmount);}
}
