React-销毁阶段介绍

源码

//生命周期脚本
var HelloMassage = React.createClass({
    //设置默认属性
    getDefaultProps: function() {
        console.log("初始化默认的属性");
        return {
            name: "test"
        }
    },
    //设置默认状态
    getInitialState: function() {
        console.log("初始化状态成功");
        return {
            isLoading: false
        }
    },
    //组件被挂载之前，Render 之前最后一次修改状态的机会
    componentWillMount: function() {
        //修改状态
        this.setState({
            isLoading: true
        });
        console.log("组件被挂载之前");
    },
    //组件被渲染之后
    componentDidMount: function() {
        console.log("组件被真实的渲染到页面中完成");
        // console.log(this.refs);
        // console.log(this.refs.uname);
        //获取 jquery dom 
        // console.log($(this.refs.uname));
        //获取 value
        // console.log($(this.refs.uname).val());
        //修改 css
        // $(this.refs.uname).css({
        //     "color": "red"
        // });
        //自动完成(Autocomplete) 单词补充的示例
        // var availableTags = [
        //     "ActionScript",
        //     "AppleScript",
        //     "Asp",
        //     "BASIC",
        //     "C",
        //     "C++",
        //     "Clojure",
        //     "COBOL",
        //     "ColdFusion",
        //     "Erlang",
        //     "Fortran",
        //     "Groovy",
        //     "Haskell",
        //     "Java",
        //     "JavaScript",
        //     "Lisp",
        //     "Perl",
        //     "PHP",
        //     "Python",
        //     "Ruby",
        //     "Scala",
        //     "Scheme"
        // ];
        // $(this.refs.uname).autocomplete({
        //     source: availableTags
        // });
        //获取 ReactDOM 这个获取到的是一个纯粹的 DOM 节点
        console.log(ReactDOM.findDOMNode(this.refs.uname));
    },
    //不能修改属性和状态
    componentWillUpdate: function(data) {
        console.log("componentWillUpdate", data);
    },
    //可以修改 DOM
    componentDidUpdate: function(data) {
        console.log("componentDidUpdate", data);
    },
    //返回 false 会阻止 render 调用
    shouldComponentUpdate: function(nextrops) {
        console.log("shouldComponentUpdate", nextrops);
        //返回一个 boolean 值
        // return false;//false 的话页面就不会更新
        return true;
    },
    //父组件修改属性触发，可以修改新属性和方法
    componentWillReceiveProps: function(nextrops) {
        console.log("componentWillReceiveProps", nextrops);
    },
    //销毁阶段  默认是不会触发的需要 给 dom 绑定事件
    componentWillUnmount: function() {
        console.log("已经删除了");
    },
    _change: function(e) {
        // console.log(e);
        // console.log(e.target);
        // console.log(e.target.value);
        //判断改变的内容
        if (e.target.value == "123") {
            //移除 React 创建的 DOM 节点 
            //需要注意的是这里移除的控件一定得是最终创建时的那个 dom 不然是不会成功的
            // ReactDOM.unmountComponentAtNode(document.getElementById("xx"));//会报错 因为传的阶段不是当初创建时所用的
            ReactDOM.unmountComponentAtNode(document.getElementById("example"));
        }
    },
    render: function() {
        console.log("render 页面");
        return (
            <div>
        {/*这里可以获取到父组件传递过来的 name 属性的值*/}
        <label htmlFor="uname">{this.props.name}</label>
            {/*<input ref="uname" value={this.props.name} onChange={this._change} type="text"/>*/}
            <input id="uname" ref="uname" onChange={this._change} type="text"/>
            <h1>{this.props.name}</h1>
                {!this.state.isLoading ? <h1>loading...</h1> : <h1>ok</h1>}
            </div>
        )
    }
});
//新建一个父组件
var HelloWorld = React.createClass({
    getInitialState: function() {
        return {
            data: "父容器的状态"
        }
    },
    click: function() {
        this.setState({
            data: "被改变"
        })
    },
    render: function() {
        return (
            <form onClick={this.click} id="xx">
            {/*使用父组件标签包裹着子组件  这样就可以通过父组件来给子组件传递一些属性了
    */}
        <HelloMassage name={this.state.data} />
            </form>
        )
    }
});
ReactDOM.render(
    <HelloWorld name="我是父组件" />,
    document.getElementById("example")
);

React 生命周期总结：

1. componentWillUnmount

清理操作，也就是销毁阶段，它可以在我们卸载组件的时候处理一些代码中的逻辑、操作和其他的一些脏东西

1. componentDidMount

获取真实的 DOM 节点，这个是在组件被渲染之后才会执行的操作

1. componentWillReceiveProps

通过父组件控制子组件，这个是说在父组件修改属性触发，可以修改新属性和方法

1. shouldComponentUpdate

动态设置更新增强性能，返回 false 会阻止 render 调用

1. render 最重要的点

控制 state ，在整个的组件中到处都在执行 render ，所以 render 的性能是必须要把控好的