react渲染

react渲染

1 、渲染方式：

1. component ——每次都会触发组件的生命周期 //component /kerm 'pao nent/成分；组件
2. render —— 内联模式渲染，性能会更高，props需要传递到函数内 //render v .使成为；给与；
3. children ——会一直渲染 不管匹配模式 //children n.孩子们

2、渲染机制

渲染过程：

1. react渲染整个渲染机制就是React渲染会调用函数 render（）构建一个新的（虚拟）DOM树。//DOM 判断
2. 在state 或props发生改变的时候，reader()函数会被调用，构造出另外一棵新的（虚拟）DOM树，渲染所有节点，用新构造的新的（虚拟）DOM树和原来的DOM树进行比较，找到旧树和新树之间的差异，然后再渲染到真实的DOM树上 ，这样就减少了对DOM树的频繁操作，从而提升性能。//state n.状态；props n.道具

3、render() /ˈrendər/函数

**作用：**我们在使用react渲染的时候，render()函数会有以下作用：

• 将虚拟DOM树渲染到真实的DOM树上
• 将任务交给浏览器
• 进行layout和paint等操作； // layout n.布局； paint n.画，颜料，涂料

接口定义：

ReactComponent render( ReactElement element, DOMElement container, [function callback] )

// ReactComponent n.react组件；

// element /ˈeləmənt/ n.元素；

// container /kənˈtānər/ n.容器

// function /ˈfang(k)sh(ə)n/ n. 功能

// callback n.回调

// param /pai er rua mu/ n.参数

// document /daocument/ n.文件

/**
*@param{ReactElement}nextElement 要插入到DOM中的组件
*@param{DOMElement} container要插入的容器
*@param{?function} callback 回调
*@param{ReactComponent}component instance rendered in 'container'//返回ReactComponet
*/
render: function(nextElenent,container,callback){
    
},

在react渲染过程中render()函数接收2-3个参数，这三个参数有react元素，DOM容器，回调方法。当组件被添加到DOM中，并选择好要插入的容器后，执行回调，render（）函数完成后，返回react组件。

在函数调用的过程中涉及到了两个react类型：reactElement和ReactCompoent(react元素和react组件)

4、ReactElement(react元素)渲染：

JSX中创建React元素最终会被babel转译为CreateElement(type, config, children)，babel根据JSX中标签的首字母来判断组件是原生DOM组件，还是自定义React组件。

const element = <h1 className='greeting'>Hello, world</h1>;//创建一个react元素
然后JSX会自动调用CreateElement()函数把它编译成类似下面的JS对象：
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }，
  _context: Object,
  _owner: null,
  key: null,  
  ref: null, 
}
原文链接：https://blog.csdn.net/b954960630/article/details/79809898

ReactElement（ReactElement元素）是通过React.CreateElement()函数来创建的，它的接口定义：

ReactElement createElement( string/ReactClass type, [object props], [children …] )

1. string/ReactClass type ：可以接受字符串（如“p”，“div”等HTML的tag）或ReactClass。

2. [object props] ：传递的参数。

3. [children …] ：子元素，ReactElement有4个属性：type，ref，key，props，并且轻量，没有状态，是一个虚拟化的DOM元素。

   createElement()接收三个参数（type，config，children），做了一些变量初始化，接着调用ReactElement()方法。 ReactElement( ) 是一个工厂方法，根据传入的参数返回一个element对象。