React Native之ReactJs生命周期（四）

最新推荐文章于 2021-04-24 17:22:09 发布

回忆往事20_14

最新推荐文章于 2021-04-24 17:22:09 发布

阅读量308

点赞数

文章标签： React Native React

本文链接：https://blog.csdn.net/u010083771/article/details/77993314

版权

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中对应的组件数据结构、销毁一些无效的定时器等

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>

回忆往事20_14

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React Native之ReactJs生命周期（四）

1.创建阶段getDefaultProps：处理props的默认值在React.createClass调用2.实例化阶段getInitialState、componentWillMount、render、componentDidMountstate：组件的属性，主要是用来存储组件资深需要的数据，每次数据的更新都是通过修改state属性的值，ReactJs内部会监听state属
复制链接

扫一扫