react 对象渲染_React渲染原理

React渲染原理看了公众号的文章【第1386期】React从渲染原理到性能优化(一)​mp.weixin.qq.com

,做一个简单的摘抄。侵权即删

文中有一句话我是很赞同的其实渲染原理决定着性能优化的方法，只有在了解原理之后，才能完全理解为什么这样做可以优化性能。正所谓：知其然，然后知其所以然。

按照原文结构，本文也分为四个部分。

JSX如何生成element

element如何生成真实DOM节点

性能优化

React16异步渲染方案

1. JSX如何生成element

先来看一下render里的jsx经过babel编译后的React.createElement;

# render jsx

return (

hello

start

Right Reserve

)

# babel React.createElement

return (

React.createElement(

'div',

{

className : 'cn'

},

React.createElement(

Header,

null,

'hello'

),

React.createElement(

'div',

null,

'start'

),

'Right Reserve'

)

)什么是createElement?

生成element。element在React里是组成虚拟Dom树的节点。这个表达式会在render被调用的时候执行并返回一个element。它有三个参数:

type -> 标签

attributes -> 标签属性，若无则为null

children -> 标签的子节点

element的结构(不一定是Object类型)

{

type : 'div',

props: {

className : 'cn',

children : [

{

type : function Header,

props : {

children : 'hello'

}

},

{

type : 'div',

props : {

children : 'start'

}

},

'Right Reserve'

]

}

}chil