什么是react生命周期-创新互联
小编这次要给大家分享的是什么是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 (); } } export default Test; {this.input=input}} value={this.state.inputValue} onChange={this.change.bind(this)}/>{ this.state.list.map((v,i)=>{ return(
); }) }
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前文章:什么是react生命周期-创新互联
网站地址:http://azwzsj.com/article/jiped.html