react渲染

1.生成虚拟dom

createElement的作用就是生成虚拟dom。虚拟dom到底是个啥,其实它就是个javascript对象~,这个对象的属性有props,vType,type, 而props也是个对象,它有children属性也有其他的,比如className,onClick之类的。

2.虚拟dom转化成dom

虚拟dom的vtype是3的时候对应的type是自定义组件,vtype是2的时候是对应的type是div之类的浏览器原生组件。

涉及到一个递归函数initVnode,initVnode接收一个参数:虚拟dom,返回一个参数dom。

a.如果是vtype等于3那么对应的type就是自定义的组件的构造函数,这时候,需要new一个自定义组件的对象,然后调用这个对象的render方法,

这个组件的render方法返回的仍然是个虚拟dom。 这时候就轮到递归上场了,调用自己去把这个虚拟dom转化成dom节点,并返回这个节点。

b.如果是vtype等于2,那么对应的type是浏览器原生组件,这个时候就document.createElement(type),这里children有可能是个虚拟dom数组,

遍历这个数组,用initVnode把虚拟dom转化成dom节点,再把dom节点appendChild到他们的父组件上,并返回父组件。

当调用render方法时,render会去调用一个map方法,根据传入参数的不同,把被render的对象分为以下三类: 
* 文本 
* 原生 
* 自定义标签

文本

对于文本,React会实例化一个文本节点的对象,并且调用该对象的mount方法。在这个mount方法中,把文本放到一个span中,调用容器组件的innerHTML,进行渲染。

原生标签

对于原生标签,React会实例化一个处理原生标签的对象,并且调用该对象的mount方法。在这个mount方法中,拼接一个字符串,并且不断递归上面的map方法,最后把拼接好的字符串放到容器组件的innerHTML中,进行渲染。

自定义标签

这个应该是大家最好奇的。自定义标签虽然叫标签,其实就是一个类。实例化一个处理自定义标签的对象后,首先React会处理自定义标签的生命周期方法,然后再次递归调用子组件的render方法进而调用map方法,直至把自定义标签分解为前两种标签。

更新

在调用this.setState()以后,也是调用了一个map方法,根据传入参数不同,依然把要更新的标签分为文本、原生标签、自定义标签三类。具体处理过程如下。

文本

文本节点处理很简单,判断要更新后的文本与当前文本是否===,不是全等就删除原来文本,插入新文本。

自定义标签

对于自定义标签,首先根据对象的引用、key是否相同,判断是否需要更新。如果需要更新,就继续调用上述map方法进行子组件的更新。又是一个递归。但是注意,这里的map方法和渲染部分的map方法不是一个方法哟。

原生标签

对于原生标签,首先更新组件的属性,然后update子树,用diff算法来比较新的子树与目前标签的子树的不同,形成一个差异树,然后用patch方法,把这个差异树更新到真正的DOM树上。

时间: 2024-10-27 12:58:59

react渲染的相关文章

react渲染机制

react组件 class Form extends React.Compoent{ constructor() { super() } render(){ return( <from><input type="text"/></from> ) } } ReactDOM.render((<div><Form/></div>)).document.getElementById('app') ReactDOM.rend

react渲染条件

用数组渲染: <Search placeholder="请输入验证码" enterButton="获取验证码" onSearch={this.sendcode} size="large" key="1" />, <Input placeholder="请输入密码" type="password" size="large" style={{ margi

React 渲染嵌套对象,内部对象会是undefined

在编译器中获取数据 发现报错 原因: render()一加载就会渲染,渲染的数据是初始state里的值 ,当setState会再次渲染 解决方法 1.三元运算 判断对象是否存在 2.在初始化对象的时候嵌套对象 原文地址:https://www.cnblogs.com/SallyShan/p/11864859.html

详解React 的几种条件渲染以及选择

对于一个展示页面来讲, 通常有好几种展示状态(以列表页为例): 数据为空, 空页面 取数据时发生错误, 错误页面 数据正常 加载状态 针对以上三种情况, react渲染列表的时候要正确判断并渲染出相应的视图, 也就是条件渲染. 不同于vue的v-if, v-show等框架提供的api, react的条件渲染都是js原生的再加上一点点的hack. 比如react文档提到的. if/else, && 和三目等等. 当然上面的都是常用的一些方法, 但是也存在着各种问题, 比如条件分支过多的的事时

React学习系列

React学习系列 系列学习react 翻译地址 https://scotch.io/tutorials/learning-react-getting-started-and-concepts 我是初学者,英语也不是很好,不过一直强迫自己看英文文档. 这是理解翻译,翻译的不好,请见谅!()中的是我翻译过程中理解,参考下,有什么说的不对的欢迎指点下! 第一节:如何开始react和了解react的概念 1.React是什么 react是Facebook 开发出来用于促进UI交互,创建带有状态的,可复

【翻译】光速React – Vixlet

翻译原文链接:https://blog.vixlet.com/react-at-light-speed-78cd172a6411 个人翻译小站链接:http://www.zcfy.cc/article/react-at-light-speed-vixlet-2920.html 在过去的几年里, 我们Vixlet (http://www.vixlet.com) 的web团队,着手了一项激动人心的项目,将我们的整个web应用迁往React+Redux的建设.对于我们整个团队来说 这是一个不断增长的机

Reactjs相比较原生方案是绝对的快吗?哪些情况下React有优势

作者:尤雨溪链接:http://www.zhihu.com/question/31809713/answer/53544875来源:知乎著作权归作者所有,转载请联系作者获得授权. 1. 原生 DOM 操作 vs. 通过框架封装操作. 这是一个性能 vs. 可维护性的取舍.框架的意义在于为你掩盖底层的 DOM 操作,让你用更声明式的方式来描述你的目的,从而让你的代码更容易维护.没有任何框架可以比纯手动的优化 DOM 操作更快,因为框架的 DOM 操作层需要应对任何上层 API 可能产生的操作,它的

初学React:组件的样式

React中组件的样式有三种: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React工程模板</title> <!-- react.js 是React的核心库 --> <script src="./build/react.js charset="utf-8&qu

初学React:定义一个组件

接着聊React,今天说说如何创建一个组件类. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React工程模板</title> <!-- react.js 是React的核心库 --> <script src="./build/react.js charset="