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程序设计有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程