首页 > 代码库 > React 进修之路(2)

React 进修之路(2)

2024-09-09 02:52:58   220人阅读

生命周期

　　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行)

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

　　

 1 // 创建GoTop组件
 2 var GoTop = React.createClass({
 3     // 定义默认状态数据
 4     getDefaultProps: function () {
 5         return {
 6             text: ‘网址导航‘
 7         }
 8     },
 9     // 定义初始化状态
10     getInitialState: function () {
11         return {
12             // 用属性数据赋值状态数据
13             text: this.props.text
14         }    
15     },
16     // 返回顶部的方法
17     goTop: function () {
18         // console.log(111,arguments)
19         // console.log(222,this);
20         // 在子组件的方法中使用父组件提供的方法
21         this.props.goBackByParent()
22     },
23     render: function () {
24         console.log(this)
25         // 渲染输出虚拟DOM
26         // <span onClick={this.props.goBackByParent}>{this.props.text}</span>
27         return (
28             <div className="go-top">
29                 <span onClick={this.goTop}>{this.props.text}</span>
30             </div>
31         )
32     }
33 })
34 
35 // 定义slider组件
36 var Slider = React.createClass({
37     // 定义属性
38     getDefaultProps: function () {
39         return {
40             title: ‘头条新闻‘
41         }
42     },
43     // 定义状态数据
44     getInitialState: function () {
45         return {
46             text: ‘新闻头条‘
47         }
48     },
49     // 渲染输出虚拟dom
50     render: function () {
51         return (
52             <div className="slider">
53                 {/*GoTop 就是Slider的子组件*/}
54                 <GoTop color="red" title={this.props.title} text={this.state.text} goBackByParent={this.goBack} />
55             </div>
56         )
57     },
58     // 定义返回顶部方法
59     goBack: function () {
60         console.log(123, this, arguments)
61     },
62     // 定义滚动事件
63     componentDidMount: function () {
64         window.onscroll = function () {
65             if (window.scrollY > 200) {
66                 this.setState({
67                     text: ‘返回顶部‘
68                 })
69             } else {
70                 this.setState({
71                     text: ‘网址导航‘
72                 })
73             }
74         }.bind(this)
75     }
76 })
77 
78 // 将组件渲染到页面中
79 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

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

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

  1 // 创建GoTop组件
  2 var GoTop = React.createClass({
  3     // 定义默认状态数据
  4     getDefaultProps: function () {
  5         return {
  6             text: ‘网址导航‘
  7         }
  8     },
  9     // 定义初始化状态
 10     getInitialState: function () {
 11         return {
 12             // 用属性数据赋值状态数据
 13             text: this.props.text
 14         }    
 15     },
 16     // 返回顶部的方法
 17     goTop: function () {
 18         console.log(111)
 19     },
 20     render: function () {
 21         console.log(4, this.state.text)
 22         console.log(4, arguments)
 23         // 渲染输出虚拟DOM
 24         return (
 25             <div className="go-top">
 26                 <span onClick={this.props.goBackByParent}>{this.state.text}</span>
 27             </div>
 28         )
 29     },
 30     // 更新状态
 31     componentDidMount: function () {
 32         // var me = this;
 33         // setTimeout(function () {
 34         //     me.setState({
 35         //         text: ‘返回顶部‘
 36         //     })
 37         // }, 1000)
 38         window.onscroll = function () {
 39             // console.log(111)
 40             // 滚动200更改文案
 41             if (window.scrollY > 200) {
 42                 this.setState({
 43                     text: ‘返回顶部‘
 44                 })
 45             } else {
 46                 this.setState({
 47                     text: ‘分类网址‘
 48                 })
 49             }
 50         }.bind(this)
 51     },
 52     // 第一个阶段是 组件即将接收新的属性
 53     componentWillReceiveProps: function(newProps) {
 54         console.log(1, this)
 55         console.log(1, arguments)
 56         // 用属性数据更新状态
 57         this.setState({
 58             text: newProps.text
 59         })
 60     },
 61     // 第二个阶段 组件是否应该更新
 62     shouldComponentUpdate: function (newProps, newState) {
 63         console.log(2, this)
 64         console.log(2, arguments)
 65         console.log(ReactDOM.findDOMNode(this).innerHTML)
 66         // 组件状态text值更新时候，进入存在期，
 67         // 判断新的text值与旧的text值的变化
 68         if (newState.text !== this.state.text) {
 69             return true;
 70         } else {
 71             return false
 72         }
 73         // return false
 74     },
 75     // 第三个阶段 组件即将更新
 76     componentWillUpdate: function() {
 77         console.log(3, this.state.text)
 78         console.log(3, arguments)
 79     },
 80     // 第五个阶段 组件更新完毕
 81     componentDidUpdate: function() {
 82         console.log(5, this)
 83         console.log(5, arguments)
 84         console.log(ReactDOM.findDOMNode(this).innerHTML)
 85 
 86     }
 87 })
 88 
 89 // 定义slider组件
 90 var Slider = React.createClass({
 91     // 定义属性
 92     getDefaultProps: function () {
 93         return {
 94             title: ‘头条新闻‘
 95         }
 96     },
 97     // 定义状态数据
 98     getInitialState: function () {
 99         return {
100             text: ‘新闻头条‘
101         }
102     },
103     // 渲染输出虚拟dom
104     render: function () {
105         return (
106             <div className="slider">
107                 {/*GoTop 就是Slider的子组件*/}
108                 <GoTop color="red" title={this.props.title} text={this.state.text} goBackByParent={this.goBack} />
109             </div>
110         )
111     },
112     // 定义返回顶部方法
113     goBack: function () {
114         console.log(123, this, arguments)
115     },
116     // 定义滚动事件
117     componentDidMount: function () {
118         
119     }
120 })
121 
122 // 将组件渲染到页面中
123 ReactDOM.render(<Slider />, document.getElementById(‘app‘))

　销毁期

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

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

　　　　　　没有参数

　　　　　　作用域是组件实例化对象

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

 1 // 定义返回顶部组件
 2 var GoBack = React.createClass({
 3     render: function () {
 4         return (
 5             <div className="go-back">
 6                 <span>返回顶部</span>
 7             </div>
 8         )
 9     },
10     // 定义组件销毁期的阶段
11     componentWillUnmount: function () {
12         console.log(this)
13         console.log(arguments)
14     }
15 })
16 
17 // 将组件渲染到页面中
18 ReactDOM.render(<GoBack />, document.getElementById(‘app‘))
19 
20 // 3秒钟之后渲染h1
21 setTimeout(function () {
22     ReactDOM.render(<h1>啦啦啦，我是文字</h1>, document.getElementById(‘app‘))
23 }, 3000)

 

React 进修之路(2)


联系
我们