React 进修之路(2)

时间:2022-09-30 18:32:11

生命周期

  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 入门之路&lpar;1&rpar;

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

  3. React学习之路(二)

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

  4. 我的react&plus;material-ui之路

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

  5. React 学习之路 &lpar;一&rpar;

    先说一说对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. 关于 pgsql 数据库json几个函数用法的效率测试

    关于 pgsql 数据库json几个函数用法的效率测试 关于pgsql 几个操作符的效率测试比较1. json::->> 和 ->> 测试方法:单次运行100次,运行10个单次 ...

  2. 根据数据库输出XML菜单

    USE [test_YTHH] GO /****** Object:  StoredProcedure [dbo].[usp_Print_SCC_Menu]    Script Date: 04/08 ...

  3. Log4j配置全说明

    转载:http://zhangjunhd.blog.51cto.com/113473/21014/ 1.Log4j简介 Log4j是Apache的一个开源项目,它允许开发者以任意间隔输出日志信息.Lo ...

  4. 各种driver的继承关系

    AndroidDriver extends AppiumDriver extends DefaultGenericMobileDriver extends RemoteWebDriver

  5. 英文长单词断行 word-break VS word-wrap

    你真的了解word-wrap和word-break的区别吗? 这两个东西是什么,我相信至今还有很多人搞不清,只会死记硬背的写一个word-wrap:break-word;word-break:brea ...

  6. iOS开发之property属性介绍

    大家都知道@property和@synthesize可以自动生成某个类成员变量的存取方法,但可能对property中的一些属性不是很了解,网上的一些介绍有的不是很正确,感觉会误导新手,于是准备详细介绍 ...

  7. 【UNIX网络编程第三版】阅读笔记(一):代码环境搭建

    粗略的阅读过<TCP/IP详解>和<计算机网络(第五版)>后,开始啃这本<UNIX网络编程卷一:套接字联网API>,目前linux下的编程不算太了解,在阅读的过程中 ...

  8. MVC使用 Elmah 日志记录组件

    在后台管理中,有一些操作是需要增加操作日志的,尤其是对一些比较敏感的金额类的操作,比如商城类的修改商品金额.删除商品.赠送金额等人工的操作.日志中记录着相关操作人的操作信息,这样,出了问题也容易排查. ...

  9. 简单了解如何使用vue-router和vue-resource

    我们先来看看vue-router 1.npm install vue-router --save 2.调用vue-router: 第一种方法: 直接在main.js中调用 import vueRout ...

  10. springboot 前后端分离开发 从零到整(四、更改密码操作)

    前端发送更改密码请求,头部携带token,服务端拦截器拦截头部token并解析,根据token中的信息来查询用户信息.需要登录才能进行的操作是由自己定的,有些操作可以直接放行.具体实现是: 上一章写到 ...