React Native之ReactJs生命周期(四)
来源:互联网 发布:pinnacle临床数据采集 编辑:程序博客网 时间:2024/05/20 17:07
1.创建阶段
getDefaultProps:处理props的默认值 在React.createClass调用
2.实例化阶段
getInitialState、componentWillMount、render、componentDidMount
state:组件的属性,主要是用来存储组件资深需要的数据,每次数据的更新都是通过
修改state属性的值,ReactJs内部会监听state属性的变化,一旦发生变化的话,就会主动
触发组件的render方法来更新虚拟DOM结构
虚拟DOM:将真实的DOM结构映射成一个JSON数据结构
3.更新阶段
主要发生在用户操作之后或父组件有更新的时候,此时会根据用户的操作行为进行相应的页面结构的调整
componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render
4.销毁阶段
销毁时调用,通常做一些取消事件绑定、移除虚拟DOM中对应的组件数据结构、销毁一些无效的定时器等
getDefaultProps:处理props的默认值 在React.createClass调用
2.实例化阶段
getInitialState、componentWillMount、render、componentDidMount
state:组件的属性,主要是用来存储组件资深需要的数据,每次数据的更新都是通过
修改state属性的值,ReactJs内部会监听state属性的变化,一旦发生变化的话,就会主动
触发组件的render方法来更新虚拟DOM结构
虚拟DOM:将真实的DOM结构映射成一个JSON数据结构
3.更新阶段
主要发生在用户操作之后或父组件有更新的时候,此时会根据用户的操作行为进行相应的页面结构的调整
componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render
4.销毁阶段
销毁时调用,通常做一些取消事件绑定、移除虚拟DOM中对应的组件数据结构、销毁一些无效的定时器等
componentWillUnmount
<!DOCTYPE html><html lang="en"><head lang="en"> <meta charset="UTF-8"/> <title>Hello World</title> <script src="react.js"></script> <script src="react-dom.js"></script> <script type="text/javascript" src="browser.min.js"></script></head><body><div id="root"></div><script type="text/babel"> var ShowEditor=React.createClass( { //1.创建阶段 getDefaultProps:function () { //在创建类的时候调用,this.props该组件的默认属性 console.log("getDefaultProps=="+this.props); }, //2.实例化阶段 getInitialState:function () { //初始化组件的state的值,其返回值会赋给组件的this.state熟悉 console.log("getInitialState=="+this.state); return {value:'请输入文字'}; } , componentWillMount:function () { //在render之前调用 //业务逻辑的处理都应该放在这里,如对state的操作 this.state.value="componentWillMount"; console.log("componentWillMount=="+this.state.value); } , handleChange:function (event) { this.setState({value: event.target.value}); //alert("时间:"+event.target.value); }, render:function () { //渲染返回一个DOM console.log("render"); return( <div> <h3>输入</h3> <textarea style={{width:300,height:200,outline:'none'}} onChange={this.handleChange} ref="textarea" defaultValue={this.state.value} /> <h3>输出</h3> <div>{this.state.value}</div> </div> ); }, componentDidMount:function () { //在render之后调用 //在该方法中,ReactJS会使用render方法返回的虚拟DOM 对象来创建真是的DOM结构 // 在组件内部可以通过this.getDOMNode()来获取当前组件的节点 console.log("componentDidMount"); this.state.value="componentDidMount"; }//3.更新阶段 主要发生在用户操作之后或者父组件有更新的时候,此时会根据用户的操作行为进行相应的页面结构调整 ,componentWillReceiveProps:function () { //当this.props被调用时或者父组件调用setProps()之后调用 console.log("componentWillReciverProps"); },shouldComponentUpdate:function () { //用来拦截新的props或state,根据逻辑来判断 //是否需要更新 console.log("shouldComponentUpdate"); return true; },componentWillUpdate:function () { //shouldComponentUpdate返回true执行 // 组件将更新 console.log("componentWillUpdate"); }, componentDidUpdate:function () { //组件更新完毕调用 console.log("componentDidUpdate"); } //销毁阶段 ,componentWillUnmount:function () { //销毁时调用,通常做一些取消事件绑定、移除虚拟DOM中对应的组件数据结构、销毁一些无效的定时器等 console.log("componentWillUnmount"); } } ); ReactDOM.render(<ShowEditor />,document.getElementById("root"));</script></body></html>
阅读全文
0 0
- React Native之ReactJs生命周期(四)
- React Native实战之ReactJS组件生命周期
- React Native实战之ReactJS
- 自学react-native之必备知识点(ES6+ReactJS+flexbox)
- React Native 之生命周期
- React Native之生命周期
- React Native之生命周期
- React Native入门(十三)之组件的生命周期
- reactJS之react-route
- React-Native学习笔记之生命周期
- React-Native 初学之组件生命周期记录
- ReactJs之组件生命周期
- React Native 入门(四)
- React Native入门(四)之使用Flexbox布局
- ReactJs和React Native的那些事
- React学习之State与生命周期基友情(四)
- 《react-native》从零开始(一)生命周期
- React Native (2)生命周期 详解
- Spring与SpringMVC整合!
- mysql官方源码安装第一部分
- this引用逃逸
- java自定义注解
- HFOI2017.9.14 复习赛02题解
- React Native之ReactJs生命周期(四)
- Lifecycle启动源码分析
- SSM框架(Spring+SpringMVC+MyBatis)详细搭建过程
- Jquery EasyUI 获取其他文件数据(4)
- Java api 调用Sqoop2进行MySQL-->Hive的数据同步
- DAT.GUI-初次了解
- # Software-eng lab 1
- Effective Java中文第二章第6节(个人渣翻)
- get_mainarea()详解