reactライフサイクルの実例分析
この実例はreactライフサイクルを述べている。皆さんに参考にしてあげます。具体的には以下の通りです。
コンポーネントマウント:
componentWillMount(コンポーネントをページにマウントします)->レンダー(コンポーネントマウント中)->componentDidMount(コンポーネントマウント完了後)
コンポーネント更新:
1、ShuldComponentUpdate(renderの前に実行し、パラメータがtureの時にrenderを実行し、falseの時にrenderを実行しない)
component WillUpdate(shuldComponentUpdate後実行)
component DidUpdate(render後実行)
順番:ShuldComponentUpdate-」component WillUpdate-「render-」component DidUpdate
componentWillUnmount(サブコンポーネントは削除された時に実行されます。)
コンポーネントマウント:
componentWillMount(コンポーネントをページにマウントします)->レンダー(コンポーネントマウント中)->componentDidMount(コンポーネントマウント完了後)
コンポーネント更新:
1、ShuldComponentUpdate(renderの前に実行し、パラメータがtureの時にrenderを実行し、falseの時にrenderを実行しない)
component WillUpdate(shuldComponentUpdate後実行)
component DidUpdate(render後実行)
順番:ShuldComponentUpdate-」component WillUpdate-「render-」component DidUpdate
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、componentWillReceive Props(サブコンポーネントで実行します。コンポーネントは初めて仮想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プログラムの設計に役に立ちます。