React 进修之路(2)

生命周期

　　React中的组件被看成是一个有生命的个体，因此赋予了声明周期的概念，就是为了定义组件所处的状态

　　　　React中组件共分三大周期,11个阶段

　　　　　　创建期（少年，成长）组件创建时候进入的时期

　　　　　　　　getDefaultProps    getInitialState    componentWillDid    render  componentDidMount

　　　　　　存在期（中年，反反复复的工作）组件内部数据（属性或者状态）更新时候进入的时期

　　　　　　　　componentWillReceiverProps   shouldComponentUpdate   componentWillUpdate   render   componentDidUpdate

　　　　　　销毁期（老年，消亡）组件从页面中删除时候进入的时期　　　　　

　　　　　　　　componentWillUnmount
　　

　　下面我们来一一细说每个时期　　

　　创建期

　　　　创建期是组件创建时候进入的时期，共分成五大阶段

　　　　一旦组件创建完成，创建期就结束，就进入下个周期 --> 存在期

　　　　　1　创建默认属性数据 --> getDefaultProps

　　　　　　　　没有参数

　　　　　　　　作用域是构造函数，说明组件构造函数还没有执行完毕，所以不能访问组件实例化对象

　　　　　　　　访问不了组件中任何的数据，方法

　　　　　　　　返回值是默认的属性数据

　　　　　2　初始化状态数据 --> getInitialState

　　　　　　　　没有参数

　　　　　　　　作用域是组件实例化对象

　　　　　　　　所以在这个方法中，可以访问属性数据了，但是不能访问状态数据

　　　　　　　　所以工作中，我们通常在这个方法中用属性的数据，初始化状态数据

　　　　　　　　这样就实现了将外部的数据，传递给内部更新维护

　　　　　　　　返回值是初始化的状态数据

　　　　　3  组件即将被创建 -->  componentWillMount

　　　　　　　　没有参数

　　　　　　　　作用域是组件实例化对象

　　　　　　　　在这个阶段，我们可以获取属性数据，可以获取状态数据，就是不能获取dom元素

　　　　　　　　所以工作中通常会简单处理属性数据，或者状态数据，或者处理内部的方法，但是绝对不能更新属性数据或者状态数据，也不要为组件绑定元素绑定事件

　　　　　4  渲染输出组件 -->  render

　　　　　　　　没有参数
　　　　　　　　作用域是组件实例化对象

　　　　　　　　不能获取dom元素（这个方法执行完毕才能获取），可以获取属性数据，可以获取状态数据

　　　　　　　　返回值是渲染输出的虚拟dom元素

　　　　  5 组件创建完成 -->  componentDidMount

　　　　　　　　没有参数

　　　　　　　　作用域是组件实例化对象

　　　　　　　　工作中很常用

　　　　　　　　可以访问属性数据，可以访问状态数据，可以访问dom元素

　　　　　　　　还可以在这里发送异步请求，请求数据更新状态

　　　　　　　　还可以绑定事件

　　　　　　　　还可以更新状态

　　　　这个方法执行完毕就标志着组件创建期的结束

 

　　　　获取组件对应的真实dom元素

　　　　　　0.13版本之前

　　　　　　　　this.getDOMNode()

　　　　　　　　React.findDOMNode(this)

　　　　　　　　都可以获取

　　　　　　0.13版本之后

　　　　　　　　只能使用ReactDOM.findDOMNode(this)

　　　　

1var GoTop = React.createClass({
2    // 第一个阶段 初始化默认属性
3    getDefaultProps: function () {
4        console.log(111, this)
5        console.log(111, arguments)
6        return {
7            text: '分类网址'
8        }
9    },
10    // 第二个阶段 初始化状态
11    getInitialState: function () {
12        console.log(222, this)
13        console.log(222, arguments)
14        // console.log(this.state)
15        return {
16            color: 'red',
17            // 用属性数据更新状态
18            text: this.props.text
19        }
20    },
21    // 第三个阶段 组件即将构建
22    componentWillMount: function () {
23        console.log(333, this)
24        console.log(333, arguments)
25        // 获取虚拟dom对应的真实的dom元素
26        // console.log(ReactDOM.findDOMNode(this))
27        // console.log(this.props)
28        // console.log(this.state)
29    },
30    // 第四个阶段 渲染组件
31    render: function () {
32        console.log(444, this)
33        console.log(444, arguments)
34        // console.log(ReactDOM.findDOMNode(this))
35        // 渲染输出虚拟dom
36        return (
37            <div className="go-top">
38                {/*这里的文案实时改变，需要在内部围护，因此要使用状态数据*/}
39                <span onClick={this.goTop}>{this.state.text}</span>
40            </div>
41        )
42    },
43    // 返回顶部的方法
44    goTop: function () {
45        if (this.state.text === '返回顶部') {
46            window.scrollTo(0, 0)
47        }
48    },
49    // 第五个阶段 组件构建完成
50    componentDidMount: function () {
51        console.log(555, this)
52        console.log(555, arguments)
53        // 获取虚拟dom对应的真实的dom元素
54        // console.log(ReactDOM.findDOMNode(this))
55        // react以及组件实例化对象上的不建议使用了
56        // console.log(React.findDOMNode(this))
57        // console.log(this.getDOMNode())
58
59        // 事件在最后一个阶段绑定
60        window.onscroll = function () {
61            // console.log(111)
62            // 滚动200更改文案
63            if (window.scrollY > 200) {
64                this.setState({
65                    text: '返回顶部'
66                })
67            } else {
68                this.setState({
69                    text: '分类网址'
70                })
71            }
72        }.bind(this)
73    }
})

 

在说下一个生命周期之前，插入一个小知识点

　　子组件　

　　　　　在组件中使用的组件，叫该组件的子组件，在组件中使用子组件很简单，跟使用虚拟DOM元素一模一样

<Slider>
    <GoTop color=“red” />
</Slider>

 

　　　　这里定义的GoTop组件就叫Slider组件的子组件

　　　　在组件中可以为子组件添加属性，添加的属性就是对子组件传递的数据

　　　　传递的数据分成四类

　　　　　　1 如果属性值是一个变量（字符串，对象等）

　　　　　　　　传递给子组件的数据不会改变

　　　　　　2 如果属性值是父组件中的属性数据

　　　　　　　　传递给子组件中的数据往往不会改变（除非父组件也是一个子组件）（因为组件的属性数据只能在外部改变，如果父组件是其他组件的子组件，父组件的属性数据可能会改变，此时传递给子组件的数                        据就可能发生改变）

　　　　　　3 如果属性值是父组件中的状态数据

　　　　　　　　如果父组件中状态数据发生了改变，那么传递给子组件的数据就发生了改变

　　　　　　4 如果属性值是父组件中的方法

　　　　　　　　父组件提供的方法作为子组件的事件回调函数，作用域仍然是父组件

　　　　　　　　回调函数两个参数

　　　　　　　　　　第一个是react封装的事件对象

　　　　　　　　　　第二个是源生的事件对象

　　　　　　　　如果父组件提供的方法在子组件的方法内执行，没有参数了，但作用域依旧是父组件

　　　　　　　　　　(搞不清楚的童鞋们请注意观察下列代码的第26行和29行)

　　　　　　这里的数据传递，父组件将数据传递给子组件，本质上就是父组件向子组件通信

　　

// 创建GoTop组件
var GoTop = React.createClass({
    // 定义默认状态数据
    getDefaultProps: function () {
        return {
            text: '网址导航'
        }
    },
    // 定义初始化状态
    getInitialState: function () {
        return {
            // 用属性数据赋值状态数据
            text: this.props.text
        }    
    },
    // 返回顶部的方法
    goTop: function () {
        // console.log(111,arguments)
        // console.log(222,this);
        // 在子组件的方法中使用父组件提供的方法
        this.props.goBackByParent()
    },
    render: function () {
        console.log(this)
        // 渲染输出虚拟DOM
        // <span onClick={this.props.goBackByParent}>{this.props.text}</span>
        return (
            <div className="go-top">
                <span onClick={this.goTop}>{this.props.text}</span>
            </div>
        )
    }
})

// 定义slider组件
var Slider = React.createClass({
    // 定义属性
    getDefaultProps: function () {
        return {
            title: '头条新闻'
        }
    },
    // 定义状态数据
    getInitialState: function () {
        return {
            text: '新闻头条'
        }
    },
    // 渲染输出虚拟dom
    render: function () {
        return (
            <div className="slider">
                {/*GoTop 就是Slider的子组件*/}
                <GoTop color="red" title={this.props.title} text={this.state.text} goBackByParent={this.goBack} />
            </div>
        )
    },
    // 定义返回顶部方法
    goBack: function () {
        console.log(123, this, arguments)
    },
    // 定义滚动事件
    componentDidMount: function () {
        window.onscroll = function () {
            if (window.scrollY > 200) {
                this.setState({
                    text: '返回顶部'
                })
            } else {
                this.setState({
                    text: '网址导航'
                })
            }
        }.bind(this)
    }
})

// 将组件渲染到页面中
ReactDOM.render(<Slider />, document.getElementById('app'))

 

  存在期

　　存在期也有五个阶段

　　这五个阶段方法的作用域都是组件实例化对象，因此这个五个阶段都能访问组件中的属性和状态，当然还有虚拟DOM

　　6 组件即将接收新的属性 -->  componentWillReceiveProps

　　　　有一个参数表示新的属性对象

　　　　工作中经常在这个阶段用新的属性对象，更新状态数据

　　　　这个方法只有在属性更新的时候，会执行，状态更新的时候不会执行

　　7  组件是否应该更新 --> shouldComponentUpdate

　　　　有两个参数

　　　　　　第一个参数表示新的属性

　　　　　　第二个参数表示新的状态

　　　　通过作用域可以访问原来的属性，原来的状态，原来的dom

　　　　必须有返回值

　　　　　　True表示可以继续更新

　　　　　　False表示不能继续更新

　　　　我们可以通过设置false属性来优化组件更新的频率

　 8  组件即将更新 --> componentWillUpdate

　　　　有两个参数

　　　　　　第一个参数表示新的属性

　　　　　　第二个参数表示新的状态

　　　　通过作用域可以访问原来的属性，原来的状态，原来的dom

　　　　在这个阶段，一定不要再更新属性或者状态了

　　　　属性或者状态数据，在这个阶段更新完毕的

　　9 组件即将渲染输出新的虚拟DOM --> Render（这里的render方法跟创建期是同一个）

　　　　通过作用域可以访问新的的属性，新的的状态，原来的dom

　　　　在这里绝对不能操作原来的dom，因为在创建期也使用这个方法（在创建期的render方法中是不能访问dom的）

　　10 组件更新完毕 --> componentDidUpdate

　　　　有两个参数

　　　　　　第一个表示原来的属性对象

　　　　　　第二个表示原来的状态对象

　　　　是最后一次可以访问到原来的属性数据或者状态数据了

　　　　通过作用域可以访问新的的属性，新的的状态，新来的dom

　　　　这个方法执行完毕，组件存在期就完成一次更新，我们可以在这个方法中再次更新属性，再次更新状态，发送请求，绑定事件等等

　　　　当组件中属性数据或者状态数据发生了改变的时候，会进入该周期

// 创建GoTop组件
var GoTop = React.createClass({
    // 定义默认状态数据
    getDefaultProps: function () {
        return {
            text: '网址导航'
        }
    },
    // 定义初始化状态
    getInitialState: function () {
        return {
            // 用属性数据赋值状态数据
            text: this.props.text
        }    
    },
    // 返回顶部的方法
    goTop: function () {
        console.log(111)
    },
    render: function () {
        console.log(4, this.state.text)
        console.log(4, arguments)
        // 渲染输出虚拟DOM
        return (
            <div className="go-top">
                <span onClick={this.props.goBackByParent}>{this.state.text}</span>
            </div>
        )
    },
    // 更新状态
    componentDidMount: function () {
        // var me = this;
        // setTimeout(function () {
        //     me.setState({
        //         text: '返回顶部'
        //     })
        // }, 1000)
        window.onscroll = function () {
            // console.log(111)
            // 滚动200更改文案
            if (window.scrollY > 200) {
                this.setState({
                    text: '返回顶部'
                })
            } else {
                this.setState({
                    text: '分类网址'
                })
            }
        }.bind(this)
    },
    // 第一个阶段是 组件即将接收新的属性
    componentWillReceiveProps: function(newProps) {
        console.log(1, this)
        console.log(1, arguments)
        // 用属性数据更新状态
        this.setState({
            text: newProps.text
        })
    },
    // 第二个阶段 组件是否应该更新
    shouldComponentUpdate: function (newProps, newState) {
        console.log(2, this)
        console.log(2, arguments)
        console.log(ReactDOM.findDOMNode(this).innerHTML)
        // 组件状态text值更新时候，进入存在期，
        // 判断新的text值与旧的text值的变化
        if (newState.text !== this.state.text) {
            return true;
        } else {
            return false
        }
        // return false
    },
    // 第三个阶段 组件即将更新
    componentWillUpdate: function() {
        console.log(3, this.state.text)
        console.log(3, arguments)
    },
    // 第五个阶段 组件更新完毕
    componentDidUpdate: function() {
        console.log(5, this)
        console.log(5, arguments)
        console.log(ReactDOM.findDOMNode(this).innerHTML)

    }
})

// 定义slider组件
var Slider = React.createClass({
    // 定义属性
    getDefaultProps: function () {
        return {
            title: '头条新闻'
        }
    },
    // 定义状态数据
    getInitialState: function () {
        return {
            text: '新闻头条'
        }
    },
    // 渲染输出虚拟dom
    render: function () {
        return (
            <div className="slider">
                {/*GoTop 就是Slider的子组件*/}
                <GoTop color="red" title={this.props.title} text={this.state.text} goBackByParent={this.goBack} />
            </div>
        )
    },
    // 定义返回顶部方法
    goBack: function () {
        console.log(123, this, arguments)
    },
    // 定义滚动事件
    componentDidMount: function () {
        
    }
})

// 将组件渲染到页面中
ReactDOM.render(<Slider />, document.getElementById('app'))

　销毁期

　　销毁期：当组件从页面中删除，组件就进入了销毁期

　　　　11 销毁期只有一个阶段 --> componentWillUnmount

　　　　　　没有参数

　　　　　　作用域是组件实例化对象

　　　　这个方法是能够访问组件的最后一次机会了，这个方法执行完毕之后，组件就销毁了

// 定义返回顶部组件
var GoBack = React.createClass({
    render: function () {
        return (
            <div className="go-back">
                <span>返回顶部</span>
            </div>
        )
    },
    // 定义组件销毁期的阶段
    componentWillUnmount: function () {
        console.log(this)
        console.log(arguments)
    }
})

// 将组件渲染到页面中
ReactDOM.render(<GoBack />, document.getElementById('app'))

// 3秒钟之后渲染h1
setTimeout(function () {
    ReactDOM.render(<h1>啦啦啦，我是文字</h1>, document.getElementById('app'))
}, 3000)