生命周期

  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)

React 进修之路(2)的更多相关文章

  1. React进阶之路书籍笔记

    React进阶之路: "于复合类型的变量,变量名不指向数据,而是指向数据所在的地址.const命令只是保证变量名指向的地址不变,并不保证该地址的数据不变,所以将一个对象声明为常量必须非常小心 ...

  2. React 入门之路(1)

    React React简介 是由Facebook公司推广的一套框架,已经应用instagram等产品 React就是为了提供应用程序性能而设计的一套框架 在angular中,对dom提供了一些指令,让 ...

  3. React学习之路(二)

    状态(state) 状态就是组件描述某种显示情况的数据,由组件自己设置和更改,也就是所组件自己维护,目的就是为了在不同状态下使组件的显示不同 在组件中只能通过getInitialState的钩子函数来 ...

  4. 我的react+material-ui之路

    在学习react和material-ui时我遇到的问题和解决方法 react要安装得在当前文件夹下面安装, npm命令在当前文件夹执行 npm install -g全局安装, 不会安装在当前包下 np ...

  5. React 学习之路 (一)

    先说一说对React的体验,总结 首先react相对angular来说入手简单暴力,在学习的这段时间里发现: 我们每天做的事就是在虚拟DOM上创建元素然后在渲染到真实的DOM中 渲染到真实DOM上的R ...

  6. react学习之路-配制antd-mobile

    经过将近三个月的使用,现在终于在我老大的带领下做完了一个react的项目,感觉还可以,最大的不足就是,对于react中的很多的东西都是掺杂着jq使用来做的,这是最不满意的一点吧,但是开发进度很近,只能 ...

  7. React 入门之路

    React React简介 是由Facebook公司推广的一套框架,已经应用instagram等产品 React就是为了提供应用程序性能而设计的一套框架 在angular中,对dom提供了一些指令,让 ...

  8. 通过阅读《React 进阶之路》之学习笔记

    第一章: React 通过引入虚拟DOM.状态.单向数据流等设计理念,形成以组件为核心,用组件搭建UI的开发模式.

  9. React学习之路之创建项目

    React 开发环境准备 IDE工具 visual studio code 开发环境 开发环境需要安装nodejs和npm,nodejs工具包含了npm. nodejs下载官网:https://nod ...

随机推荐

  1. ASP.NET Zero--12.一个例子(5)商品分类管理-编辑分类

    1.添加编辑按钮 打开文件Index.js [..\MyCompanyName.AbpZeroTemplate.Web\Areas\Mpa\Views\Category\Index.js] 在acti ...

  2. [linux]ngrep命令、常见用法

    1.ngrep命令 ngrep命令是grep命令的网络版,ngrep用于搜寻指定的数据包(抓包.过滤).能识别TCP.UDP和ICMP包,理解bpf的过滤机制. 1.1 安装 brew install ...

  3. 模仿qq界面实现(WTL)

    前面对于界面用哪一种我试过用duilib,但是老感觉和MFC差距有点多,终于发现WTL的库能够实现我的所有界面功能,几天的努力终于搞定界面的重写.还是见我的成果吧: 1登录界面: 2主界面: 3.主界 ...

  4. The certificate used to sign "" has either expired or has been revoked.

    这句话的意思就是"签名"的证书已过期或已被吊销. 说白了就是有人删除了你的证书,解决的办法就是在创建一个,创建证书有两种办法,. 第一: 在苹果开发者中心,进入自己的账号,请求一个 ...

  5. Condition源码分析

    转:http://www.nbtarena.com/Html/soft/201308/2429.html Condition的概念 大体实现流程 I.初始化状态 II.await()*作 III.si ...

  6. 【c基础】之 文件及其操作

    文件的打开与关闭 首先要定义一个文件指针类型,格式为 FILE *文件指针名; ; FILE *fp; //fp就是定义的文件指针 ●打开文件fopen()函数,格式: fp = fopen(&quo ...

  7. PHP使用hash_algos函数计算哈希值,之间的性能排序

    PHP从5.1.2版本以上开始支持hash_algos函数,看这个名字就知道了,algos在英文中也表示算法的意思,hash_algos就是哈希算法,收集了一些常用的哈希算法,从5.1.2开始不同版本 ...

  8. linux的Make使用的重定向

    Linux中,脚本语言环境中,即你用make xxx即其他一些普通linux命令,比如ls,find等,不同的数字,代表不同的含义:  数字 含义  标准叫法   0  标准输入   stdin = ...

  9. cmake工具链

    命令project() enable_language()try_compile() 变量CMAKE_<LANG>_COMPILERCMAKE_<LANG>_COMPILER_ ...

  10. UI进阶 XML解析适配 引入GDataXML文件时候 'libxml/tree.h'file not found 错误解决办法

    在工程的"Build Settings"页中找到"Header Search Path"项,添加"/usr/include/libxml2" ...