react中的reconciliation与ref and DOM

2401_84093054

于 2024-04-20 02:56:18 发布

阅读量827

点赞数 28

分类专栏：程序员文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/2401_84093054/article/details/137984193

版权

程序员专栏收录该内容

278 篇文章 0 订阅

订阅专栏

本文解释了React中如何通过state和JSX生成虚拟DOM，比较并更新DOM的DIFF算法，以及ref在管理DOM节点和打破数据流模式的应用。强调了虚拟DOM对性能的提升。同时提到了如何创建和合理使用ref，以及获取学习资源的方法。

摘要由CSDN通过智能技术生成

4.生成真实的DOM

5.state数据改变

6.state + JSX模板，生成一个新的虚拟DOM

7.原始的虚拟DOM和新生成的虚拟DOM进行比较，找出改变的数据

（虚拟DOM直接的比较算法时DIFF算法，DIFF算法的比较原理是同级比较，如果发现

原始同级不同，则直接重新渲染所有的结点，然后再进行下一个节点的比较，这样做的好处

是算法比较简单。如果有多处的setState（异步函数）连续发生改变，则在虚拟DOM中，其进行的方式就是

同时发生，这样会提高性能）

8.只改变原来DOM中改变的数据中的元素。

只要明白了这个过程，就在很大程度上去认识到了react中是如何协调你react树的，DIFF算法会比较你DOM节点，以及属性，一旦这些内容不同时，就会将原来的DOM树给删除，换成新的节点，但是在react并没有将这个DOM树给构建起来。因此叫其为虚拟DOM,这样的好处就是大大的提高你整个程序的性能与运行速率。

ref and DOM

对于其提供了一种方式在render方法中去接受DOM节点和组件元素

在典型的React数据流传递过程中，props是唯一的一种方式去将父组件中的数据传递到子组件当中，为看改变子节点，你需要将子节点再一次的渲染作为一个新的props，然而在某些情况下你需要去强制的更改典型的数据流的模式。那么ref是一种方式去改变子节点在组件元素和DOM节点中都可以去使用。

ref的应用的一些位置：

1. 管理聚焦，文本框的选择，媒体播放器的播放 2. 触发命名动画 3. 与第三方库集成的时候

切记不要去过渡的使用ref，因为在有的时候拥有此状态的层级在比较高的位置

ref相关的语法

怎样去创建ref，ref的创建要使用React.createRef()，然后经由React元素中的属性进行绑定，下面就体现了这样一个过程

接收ref属性，其具体是什么类型，取决你节点的类型，对于节点的应用应该使用的语法是const node = this.Myref.current

1.如果你接受的节点是html中的DOM节点，那么其就是一个DOM节点； 2.如果你接收的结点时react中的元素，那么其就是一个元素节点 3.可能不会在函数组件上去使用ref因为对此并没有什么实际例子

上面的这个例子是ref运用在DOM节点中的类型

这上面的这个例子是应用在react中元素节点上的，需要注意的是这种方式是应用在类组件上的

当你这样去使用ref时，程序是不会运行的，因此你可以采用下面的这种形式去进行表达

将DOM直接暴露给父组件

在有的时候你想在父组件中去访问子节点的DOM,这种情况打破了原有的react结构，通常在很多情况下是不被采用的，但是在有的时候，对于触发焦点或测量子DOM节点的大小或位置很有用。如果您使用React 16.3或更高版本，我们建议在这些情况下使用ref转发。Ref转发允许组件选择将任何子组件的Ref公开为它们自己的。
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。