react的生命周期是什么？
生命周期是一个组件从生到死的一个过程，react为生命周期提供了一些关键节点，即会被触发的事件，来让组件方便处理各种场景
react的生命周期分为哪几个阶段？每个阶段的作用？
分为3个阶段，分别是：
1. Mounting（挂载阶段）——创建构造函数并初始化，让我们在页面加载完成前后做一些事情
2. Updating（运行阶段）——状态更新引起的变化，更新页面UI显示或数据更改
3. Unmounting（卸载阶段）——销毁一个组件，销毁前暴露出一个事件，让我们可以在组件销毁前做一些逻辑的处理，
比如组件销毁后，也要将组件的定时器销毁，减少内存占用
react各阶段事件节点有哪些？
挂载阶段
1. componentWillMount()-组件将要加载，但还没有加载出来，js逻辑已经可以执行, 异步方法可以放在这里执行
2. componentDidMount()-组件加载完成
运行阶段
1. componentWillUpdate()-组件将要更新
2. componentDidUpdate()-组件更新完成
卸载阶段
1. componentWillUnmount()-组件将要被销毁
还有2个比较特殊的
1. componentWillReceiveProps()-接收父组件传递过来的参数props时触发
2. shouldComponentUpdate()-判断组件是否需要更新, 它需要一个返回值，默认为true，若为false则组件不更新
react整个生命周期加载的过程
创建构造函数constructor并初始化，然后执行componentWillMount()将要加载，接着render()出来, 最后componentDidMount()加载完成
react更新的过程
首先执行shouldComponentUpdate(), 看返回值是不是true，如果是true则继续执行componentWillUpdate()将要更新，然后
render()，最后更新完毕componentDidUpdate()；若返回值为false，则组件不会更新。 如果是组件传值引起的数据改变，
需要在shouldComponentUpdate()执行前先执行componentWillReceiveProps()来接收父组件传递过来的值
演示shouldComponentUpdate() 可查看控制台打印结果
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
// constructor用来初始化组件属性，this.state定义数据，super()为了接收到父类的this指针
// 创建构造函数
constructor(props) {
super(props);
this.state = {
data: 'Old State'
}
console.log('初始化数据', constructor);
}
// 组件将要加载,整个组件还没有加载出来，js逻辑已经可以执行, 异步方法可以放在这里执行
componentWillMount() {
console.log('componentWillMount');
}
// 组件加载完成
componentDidMount() {
console.log('componentDidMount');
}
// 接收父组件传递过来的参数props时触发
componentWillReceiveProps() {
console.log('componentWillReceiveProps');
}
// 判断组件是否需要更新,它需要一个返回值，默认为true
shouldComponentUpdate() {
console.log('shouldComponentUpdate');
return true; // 需要一个布尔返回值, 比如true或false来判断组件是否要根据值的变化而更新,
}
// 组件将要更新, 如果shouldComponentUpdate的返回值为true，那这个函数就要为组件更新做准备了
// 如果shouldComponentUpdate返回值为false，则组件不会更新，componentWillUpdate,componentDidUpdate都不会执行
componentWillUpdate() {
console.log('componentWillUpdate');
}
// 组件更新完成
componentDidUpdate() {
console.log('componentDidUpdate');
}
// 处理点击事件
handleClick() {
console.log('更新数据');
this.setState({
data: 'New State'
})
}
// 把组件渲染到页面上
render() {
console.log('render');
return (
<div>
<h1>Props:{this.state.data}</h1>
<button onClick={() => this.handleClick()}>更新数据</button>
</div>
)
}
}
ReactDOM.render(
<div>
<App />
</div>,
document.getElementById('app')
);
演示componentWillReceiveProps() 可查看控制台打印结果
import React from 'react';
import ReactDOM from 'react-dom';
class Father extends React.Component {
constructor(props) {
super(props);
this.state = {
data: 'Old Props'
}
console.log('初始化数据', constructor);
}
onPropsChange() {
console.log('更新Props:');
this.setState({
data: 'New Props'
})
}
render() {
return (
<div>
<Son data={this.state.data} />
<button onClick={() => this.onPropsChange()}>改变props</button>
</div>
)
}
}
class Son extends React.Component {
// constructor用来初始化组件属性，this.state定义数据，super()为了接收到父类的this指针
// 创建构造函数
constructor(props) {
super(props);
console.log('初始化数据', constructor);
}
// 组件将要加载,整个组件还没有加载出来，js逻辑已经可以执行, 异步方法可以放在这里执行
componentWillMount() {
console.log('componentWillMount');
}
// 组件加载完成
componentDidMount() {
console.log('componentDidMount');
}
// 接收父组件传递过来的参数props时触发
componentWillReceiveProps() {
console.log('componentWillReceiveProps');
}
// 判断组件是否需要更新,它需要一个返回值，默认为true
shouldComponentUpdate() {
console.log('shouldComponentUpdate');
return true; // 需要一个布尔返回值, 比如true或false来判断组件是否要根据值的变化而更新,
}
// 组件将要更新, 如果shouldComponentUpdate的返回值为true，那这个函数就要为组件更新做准备了
// 如果shouldComponentUpdate返回值为false，则组件不会更新，componentWillUpdate,componentDidUpdate都不会执行
componentWillUpdate() {
console.log('componentWillUpdate');
}
// 组件更新完成
componentDidUpdate() {
console.log('componentDidUpdate');
}
// 把组件渲染到页面上
render() {
console.log('render');
return (
<div>
<h1>Props:{this.props.data}</h1>
</div>
)
}
}
ReactDOM.render(
<div>
<Father />
</div>,
document.getElementById('app')
);
演示componentWillUnmount()可控制台查看打印结果
import React from 'react';
import ReactDOM from 'react-dom';
class Father extends React.Component {
constructor(props) {
super(props);
this.state = {
data: 'Old Props',
hasChild: true
}
console.log('初始化数据', constructor);
}
onPropsChange() {
console.log('更新Props:');
this.setState({
data: 'New Props'
})
}
onDestoryChild() {
console.log('干掉子组件');
this.setState({
hasChild: false
})
}
render() {
return (
<div>
{
this.state.hasChild ? <Son data={this.state.data} /> : null
}
<button onClick={() => this.onPropsChange()}>改变props</button>
<button onClick={() => this.onDestoryChild()}>干掉子组件</button>
</div>
)
}
}
class Son extends React.Component {
// constructor用来初始化组件属性，this.state定义数据，super()为了接收到父类的this指针
// 创建构造函数
constructor(props) {
super(props);
console.log('初始化数据', constructor);
}
// 组件将要加载,整个组件还没有加载出来，js逻辑已经可以执行, 异步方法可以放在这里执行
componentWillMount() {
console.log('componentWillMount');
}
// 组件加载完成
componentDidMount() {
console.log('componentDidMount');
}
// 接收父组件传递过来的参数props时触发
componentWillReceiveProps() {
console.log('componentWillReceiveProps');
}
// 判断组件是否需要更新,它需要一个返回值，默认为true
shouldComponentUpdate() {
console.log('shouldComponentUpdate');
return true; // 需要一个布尔返回值, 比如true或false来判断组件是否要根据值的变化而更新,
}
// 组件将要更新, 如果shouldComponentUpdate的返回值为true，那这个函数就要为组件更新做准备了
// 如果shouldComponentUpdate返回值为false，则组件不会更新，componentWillUpdate,componentDidUpdate都不会执行
componentWillUpdate() {
console.log('componentWillUpdate');
}
// 组件更新完成
componentDidUpdate() {
console.log('componentDidUpdate');
}
// 组建将要被销毁
componentWillUnmount() {
console.log('componentWillUnmount');
}
// 把组件渲染到页面上
render() {
console.log('render');
return (
<div>
<h1>Props:{this.props.data}</h1>
</div>
)
}
}
ReactDOM.render(
<div>
<Father />
</div>,
document.getElementById('app')
);
转载：https://blog.csdn.net/qq_44980680/article/details/128459430
查看评论