手机版
你好,游客 登录 注册
背景:
阅读新闻

React基础与生命周期

[日期:2018-12-13] 来源:Linux社区  作者:小冉0209 [字体: ]

React基础

一.react简介

1.起源于facebook,2013年5月开源

2.特点

I.声明式设计。(声明式是告诉计算机做什么,不管他怎么做 如map。而命令式式告诉计算机怎么做 如for。)

II.高效

III.灵活

IV.jsx

V.组件

VI.单向数据流

3.虚拟DOM:一个真实的js对象,直接操作DOM会发生回流,成本过高

4.回流与重绘

回流:当render树中的一部分或全部因为大小、边距等问题发生改变而需要重建的过程

重绘:当元素的一部分属性发生变化,如外观和背景,不会引起布局变化而重新渲染的过程

回流一定重绘,重绘不一定回流

5.浏览器如何渲染页面

①HTML解析器,解析html结构,生成DOM树

②CSS解析器,解析css文件及内联样式表,生成样式表

③将DOM树和样式表结合生成render树(每个DOM元素都有一个方法,用来接收样式表信息,返回一个render对象,把这些render对象统一编译生成render树)

④render树渲染完毕后浏览器会根据样式表来决定当前元素在页面的位置

6.专注视图层:专注于提供清晰,简洁的view解决方案

  注:vue和react本质是vc框架,配合第三方(如;vuex)才是mvc框架

7.函数化编程(编程范式)结构化编程的一种

  主要思想:把问题的解决方案写成一系列嵌套的函数调用

①纯函数  输入什么就输出什么,不依赖外部环境的状态。

如:Array.slice(不改变原数组)  纯函数

  Array,splice(改变原数组)    不是纯数组

优点:有效降低系统的复杂性,可缓存性

②科里化函数  传递给函数一部分参数来调用它,让它返回一个函数去处理剩下的参数

如:对var add=(x,y)=>x+y科里化

        var add=(a)+(b)=>a+b  add(3)(2)   //5

是一种“预加载”函数的方法,通过传递较少的参数,得到一个已经记住了这些函数的新函数,是一种对参数的“缓存”

函数式编程的优点:

a:代码简洁,开发快速

b:接近自然语言,易于理解

c:更方便的代码管理,

d:易于“并发编程”

e:代码的热升级

8.vue和react的区别

相同点:①都是用虚拟DOM

    ②都提供了响应式和组件化的视图组件

    ③将注意力集中保持在核心库,而其他功能如路由和全局状态管理交给其他的库

不同点:①优化性能方面 react有自己的一套方法,用来减少一些不必要的虚拟DOM

    ②react用的是jsx语法,而vue是将html,js,css放到vue文件里

    ③react的css写在单独的文件里,vue写在vue文件里

    ④react约束小灵活性大,使用js语法多,适合开发大项目

       vue约束大灵活性小,适合快速开发项目

React的生命周期

当组件第一次渲染的时候执行哪些生命周期?

constructor--->componentWillMount--->render--->componentDidMount

1.constructor

初始化

当前生命值周期可以定义当前组件所需要的状态

当前生命周期函数必须写super,否则就会报错或者this的指向发生改变

如果在super和constructor中没有传递props这个参数的话是访问不到this.props属性的

2.componentWillMount

组件挂载前

在当前生命周期函数里可以访问到props属性,在这里可以接收外部属性,同时可以将外部属性转变成内部属性

在当前生命周期函数里不需要调用setState,因为当前函数执行完毕后会自动执行render

3.render

a.render函数什么时候会执行?

当this.state,this.props发生改变的时候,会执行render函数

b.this.state/this.props发生改变的时候会执行哪些生命周期函数

  this.state:

    shouldComponentUpdate--->componentWillUpdate--->render--->componentDidUpdate

  this.props

    componentWillReveiceProps--->shouldComponentUpdate--->componentWillUpdate--->render--->componentDidUpdate

c.render函数执行的时候会将虚拟DOM和数据相结合,缓存一份虚拟DOM,当数据发生改变的时候会将虚拟DOM与缓存的虚拟DOM作比较(diff算法),比较完毕以后,将需要修改的虚拟DOM进行批量修改,减少不必要的更新。

d.diff算法

新旧两个虚拟DOM的对比就是diff算法

4.componentDidMount

render函数执行后,componentDidMount这个生命周期函数就会执行,在这个生命周期函数里可以进行fatch请求,获取真实DOM

5.componentWillUnMount

组件销毁

6.shouldComponentUpdate

当this.state,this.props发生改变时,会执行render函数

该生命周期函数必须返回一个布尔值,如果返回true,则继续执行下面的生命周期函数;

                 如果返回false,则下面的生命周期函数不执行。

该生命周期函数是用来判断DOM是否更新的,而不是用来判断数据是否更新的(不管返回值是true还是false,this.state里的数据都会改变,但是DOM值不会改变)

该生命周期函数可以做一些相关操作减少虚拟DOM不必要的更新(利用接收到的两个参数props,state来比较)

7.componentWillUpdate

更新前  虚拟DOM与数据相结合,但没有真正的DOM结构

8.componentDidUpdate

更新后  数据与模板结合可以产生真正的DOM结构,在这里可以获取到数据更新后最新的DOM结构

9.componentWillReceiveProps

当外部属性发生变化的时候就会执行当前生命周期函数,当前生命周期函数会有一个新的参数props

操作DOM的两种方式:

 ref="list"      this.refs.list

 ref={(tagName)=>{this.key=tagName}}   this.key

react生命周期函数哪些只执行一次?

constructor 

componentWillMount

componentDidMount

componentWillUnMount

react生命周期函数哪些可以执行多次?

render

shouldComponentUpdate

componentWillUpdate

componentDidUpdate

componentWillReceiveProps

Linux公社的RSS地址https://www.linuxidc.com/rssFeed.aspx

本文永久更新链接地址https://www.linuxidc.com/Linux/2018-12/155827.htm

linux
本文评论   查看全部评论 (0)
表情: 表情 姓名: 字数

       

评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款