生命周期钩子函数
- constructor
- static getDerivedStateFromProps
- render
- componentWillMount
- componentDidMount
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- componentDidUpdate
- componentWillUnmount
最常用的几个生命周期钩子函数
* componentDidMount 类似于 VUE mounted DOM加载完成
* shouldComponentUpdate 该函数会在 props更新 或者 state更新 的时候触发
* componentDidUpdate 类似于 VUE的 update
* componentWillUnmount 类似于 VUE的 beforeDestroy
import React from 'react';
import reactDOM from 'react-dom';
class App extends React.Component {
constructor(props) {
super(props);
}
static getDerivedStateFromProps(props, state) {
// 两个固定参数 props就是从父组件接收过来的数据 state就是当前组件的私有数据
// 会把返回值 合并到 state 中
// 该钩子函数主要目的就是为了 把 props转成 state
// 不常用
return {
...props
}
}
render() {
return <div className=''>
</div>;
}
// componentWillMount() {
// // 将要被废弃 不能跟 static getDerivedStateFromProps 共存
// }
componentDidMount() {
// 类似于 VUE mounted DOM加载完成
// 一般用来做一些 DOM操作 或者 ajax请求
}
componentWillReceiveProps(newProps) {
// 后期将要被废弃
// 初始化的时候 不会执行该函数
// 只有当父组件传进来的props更新的时候才会触发这个钩子
}
shouldComponentUpdate(nextProps, nextState) {
let bol = false
Object.keys(nextProps).forEach(item => {
nextProps[item] !== this.props[item] ? bol = true : null
})
Object.keys(nextState).forEach(item => {
nextState[item] !== this.state[item] ? bol = true : null
})
// 该函数会在 props更新 或者 state更新 的时候触发
// 父组件更新的时候 子组件的 该函数 也会执行
// 若该函数的返回值是false 那么这次更新时 就不会执行 当前组件 的render函数
// 若该函数的返回值是true 那么这次更新时 就会执行 当前组件 的render函数
// 可以用来提高组件的性能
return true
}
componentWillUpdate() {
// 组件更新之前 类似于 VUE的 beforeUpdate
}
componentDidUpdate() {
// 类似于 VUE的 update
}
componentWillUnmount() {
// 类似于 VUE的 beforeDestroy
}
/**
* 最常用的几个生命周期钩子函数
* componentDidMount 类似于 VUE mounted DOM加载完成
* shouldComponentUpdate 该函数会在 props更新 或者 state更新 的时候触发
* componentDidUpdate 类似于 VUE的 update
* componentWillUnmount 类似于 VUE的 beforeDestroy
*/
}
class App2 extends React.PureComponent {
// 相当于默认进行了 shouldComponentUpdate 的判断
}
reactDOM.render(<><App /></>, document.querySelector("#root"))