react 生命周期实例分析
网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要介绍了react 生命周期,结合实例形式分析了react 生命周期基本原理、操作步骤与注意事项,需要的朋友可以参考下
本文实例讲述了react 生命周期。分享给大家供大家参考，具体如下
组件挂载
ponentWillMount(组件将要挂载到页面)->render(组件挂载中)->ponentDidMount（组件挂载完成后）
组件更新
1、shouldComponentUpdate(render之前执行，参数为ture时执行render,为false时不执行render)
ponentWillUpdate(shouldComponentUpdate之后执行)
ponentDidUpdate(render之后执行)
顺序shouldComponentUpdate-》ponentWillUpdate-》render-》ponentDidUpdate
import React, { Component, Fragment } from 'react';
import List from './List.js';
class Test extends Component {
constructor(props) {
super(props);
this.state={
inputValue:'aaa',
list:['睡觉','打游戏'],
}
// this.add=this.add.bind(this);
}
addList() {
this.setState({
list:[...this.state.list,this.state.inputValue],
inputValue:''
})
}
change(e) {
this.setState({
// inputValue:e.target.value
inputValue:this.input.value
})
}
delete(i) {
// console.log(i);
const list = this.state.list;
list.splice(i,1);
this.setState({
list:list
})
}
//组件将要挂载到页面时
ponentWillMount() {
console.log('ponentWillMount');
}
//组件完成挂载后
ponentDidMount() {
console.log('ponentDidMount');
}
//组件被修改之前，参数为ture时执行render,为false时不往后执行
shouldComponentUpdate() {
console.log('1-shouldComponentUpdate');
return true;
}
//shouldComponentUpdate之后
ponentWillUpdate() {
console.log('2-ponentWillUpdate');
}
//render执行之后
ponentDidUpdate() {
console.log('4-ponentDidUpdate');
}
//组件挂载中
render() {
console.log('3-render');
return (
<Fragment>
<div>
<input ref={(input)=>{this.input=input}} value={this.state.inputValue} onChange={this.change.bind(this)}/>
<button onClick={this.addList.bind(this)}>添加</button>
</div>
<ul>
{
this.state.list.map((v,i)=>{
return(
<List key={i} content={v} index={i} delete={this.delete.bind(this)} />
);
})
}
</ul>
</Fragment>
);
}
}
export default Test;
2、ponentWillReceiveProps(子组件中执行。组件第一次存在于虚拟dom中，函数不会被执行，如果已经存在于dom中，函数才会执行)
ponentWillUnmount(子组件在被删除时执行)
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class List extends Component {
constructor(props) {
super(props);
this.delete = this.delete.bind(this);
}
//组件第一次存在于虚拟dom中，函数不会被执行
//如果已经存在于dom中，函数才会执行
ponentWillReceiveProps() {
console.log('ponentWillReceiveProps');
}
//子组件被删除时执行
ponentWillUnmount() {
console.log('ponentWillUnmount');
}
render() {
return (
<li
onClick={this.delete}>{this.props.name}{this.props.content}</li>
);
}
delete=() => {
this.props.delete(this.props.index);
}
}
List.propTypes={
name:PropTypes.string.isRequired,
content:PropTypes.string,
index:PropTypes.number,
delete:PropTypes.func
}
//设置默认值
List.defaultProps={
name:'喜欢'
}
export default List;
组件性能优化
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class List extends Component {
constructor(props) {
super(props);
this.delete = this.delete.bind(this);
}
//组件第一次存在于虚拟dom中，函数不会被执行
//如果已经存在于dom中，函数才会执行
ponentWillReceiveProps() {
console.log('ponentWillReceiveProps');
}
//子组件被删除时执行
ponentWillUnmount() {
console.log('ponentWillUnmount');
}
shouldComponentUpdate(nextProps,nextState) {
if (nextProps.content !== this.props.content) {
return true;
} else {
return false;
}
}
render() {
return (
<li
onClick={this.delete}>{this.props.name}{this.props.content}</li>
);
}
delete=() => {
this.props.delete(this.props.index);
}
}
List.propTypes={
name:PropTypes.string.isRequired,
content:PropTypes.string,
index:PropTypes.number,
delete:PropTypes.func
}
//设置默认值
List.defaultProps={
name:'喜欢'
}
export default List;
希望本文所述对大家react程序设计有所帮助。