2020.9.4总结 react渲染原理

115 阅读1分钟

jsx如何生成element

写在render里的同步代码,经babel编译后变成生成element的React.CreateElement,element在react里是组成虚拟dom的树结点。 React.CreateElement有三个参数,type,attributes,children。当render函数执行后就会返回一个React.CreateElement,

React.CreateElement有3个参数,type,attributes,children。不一定为Object children有5种类型

1、string

2、原生DOM节点

3、React Component - 自定义组件

4、fale ,null, undefined,number

5、数组 - 使用map方法的时候

element如何生成真实节点

, 根据拿到的element,判断是否为object?

  1. 是object的类型后再判断是否为原生dom?
  • 原生dom将生成ReactDomComponent,自定义类则生成ReactCompositeComponentWrapper
  1. 非object类,再判断是否为null,false还是string,number
  • string,number则为ReactDomTextComponent
  • null,false 则生成ReactDomEmptyComponent