深度理解React底层实现原理

索引：

当组件的state或者props发生改变的时候，自己的render函数就会重新执行。

注意：当父组件的render被执行的时候，子组件的也render会被重新执行一次（因为在父组件的render里面）。

也就是说当绑定的事件改变了state或者props，render函数就会重新执行解析页面，这个时候解析的时候就会使用新的数据了，所以页面就会变化。

刚才提到只要state、props改变就会重新render，可以想象要不断的重新渲染页面对性能要求非常高，实际上render的性能是非常高的，这是归功于虚拟DOM。

首先明确DOM的相关 *** 作需要调用web application对性能损耗是比较高的。

先看看常规的思路

改良思路（仍然使用DOM）

React的思路

Vue和react的虚拟DOM的原理和步骤是完全一致的。

React中真实DOM的生成步骤：JSX -> createElement方法 -> JS对象(虚拟DOM) -> 真实的DOM

因此可见，JSX中的div等标签仅仅是JSX的语法，并不是DOM，仅用于生成JS对象

其实在React中创建虚拟DOM(js对象)使用的是（没有JSX语法也可以用下面的方式生成）

虚拟DOM的优点：

React中ref的使用

组件挂载的过程

组件更新

组件去除的过程

react修改页面dom的两种办法

一：使用选择器：

1、引入react-dom

    import ReactDom from 'react-dom'

2、给react节点设置id或类名等标识

    <span id='tip'></span>

3、定义变量保存dom元素

const span=documentgetElementById('tip')

4、通过ReactDom的findDOMNode()方法修改dom的属性

ReactDomfindDOMNode(span)stylecolor='red'

点击时： ecurrentTarget 获取到点击的dom,通过改变样式或者innerHtml改变dom

二：使用ref属性

1、给指定标签设置ref属性

    <span ref='tip'></span>

2、通过thisrefsref属性值来修改标签的属性

    thisrefstipstylecolor = "red"

class组件

函数组件使用

1首先我们要在父组件中定义一个空数组setlinksparam[] 这个数据就是用来接受我们动态生成DOM 所需的数据 这个数据是根据具体需要来定义 我这里就是获得数值来填充动态DOM 内容和属性

2我们还有定义一个方法 来接受数据 然后重新渲染DOM 这样我们才能看到我们动态的DOM 这里我们就用到了上面我们所说的 thissetState()方法，

以上就是关于深度理解React底层实现原理全部的内容，包括:深度理解React底层实现原理、react修改页面dom、如何在React中使用数据动态生成DOM标签等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！