溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編這次要給大家分享的是什么是react生命周期，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
組件掛載：
componentWillMount(組件將要掛載到頁面)->render(組件掛載中)->componentDidMount（組件掛載完成后）
組件更新：
1、shouldComponentUpdate(render之前執行，參數為ture時執行render,為false時不執行render)
componentWillUpdate(shouldComponentUpdate之后執行)
componentDidUpdate(render之后執行)
順序：shouldComponentUpdate-》componentWillUpdate-》render-》componentDidUpdate
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
})
}
//組件將要掛載到頁面時
componentWillMount() {
console.log('componentWillMount');
}
//組件完成掛載后
componentDidMount() {
console.log('componentDidMount');
}
//組件被修改之前，參數為ture時執行render,為false時不往后執行
shouldComponentUpdate() {
console.log('1-shouldComponentUpdate');
return true;
}
//shouldComponentUpdate之后
componentWillUpdate() {
console.log('2-componentWillUpdate');
}
//render執行之后
componentDidUpdate() {
console.log('4-componentDidUpdate');
}
//組件掛載中
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、componentWillReceiveProps(子組件中執行。組件第一次存在于虛擬dom中，函數不會被執行，如果已經存在于dom中，函數才會執行)
componentWillUnmount(子組件在被刪除時執行)
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中，函數才會執行
componentWillReceiveProps() {
console.log('componentWillReceiveProps');
}
//子組件被刪除時執行
componentWillUnmount() {
console.log('componentWillUnmount');
}
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中，函數才會執行
componentWillReceiveProps() {
console.log('componentWillReceiveProps');
}
//子組件被刪除時執行
componentWillUnmount() {
console.log('componentWillUnmount');
}
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生命周期的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
