飞扬影城官网,慢跑的好处,热敏打印机
本文实例讲述了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程序设计有所帮助。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
JavaScript使用prototype属性实现继承操作示例
JavaScript直接调用函数与call调用的区别实例分析
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
网友评论