偷懒不可取：React中DOM

2024年2月29日 231次阅读 来源: 远远的飞梦

原由

初出茅庐的我一猛子扎进React的海洋，挣扎的历程当中可谓用力浑身解数，只假如React文档中有提到过的，无所不必其极。末了，在先辈的陶冶另有编写项目和自我进修中，规范性也愈来愈强，思绪也愈来愈清楚——狗刨终究进化成自由泳。
这篇文章中呢，原由就是在完成一些需求的时刻，通篇React语法中加入了陈旧的DOM读写，然后就被老大批评了。青少年最不缺的就是锐气和研讨精力，哈哈，没错，写这篇文章最大的缘由就是——我不服~
为啥不让我用DOM？DOM有什么不好？React很难完成的需求应当怎么做？

效果

没错，效果就是——服。在阅历很多代码重构和逻辑修正后，发明React中有个DOM从视觉上觉得就有些不爽，不加上解释或许纵然加上解释都给人一种不知所谓的觉得，保护上也有很大难度，比方

if (this.tableIsOpen) { // 表格自睁开
  setTimeout(() => {
    const openClick = document.querySelectorAll('.testToggle');
    for (let i = 0; i < openClick.length; i += 1) {
      openClick[i].click();
    }
  }, 10);
}

固然最主要的是机能，由于React在DOM二次衬着时的效力会比原生DOM的效力高的多，所以会有更好的体式格局去处理。下面就来详细的说一下。

历程

用DOM的场景

1、在已有组件的基础上，待组件衬着完成后，挪用其内部的要领。比方uxcore-table完成二级表格自睁开时，须要挪用组件元素中绑定的toggleSubComp(rowData)。
2、DOM猎取document.body.className来推断国际化环境是不是为中文。
3、多个组件，一个组件的状况须要坚持稳定，然则其他组件须要依据交互来转变状况。比方

<Father>
    <brother>
        <child></child>
    </brother>
    <notChange></notChange>
</Father>

可优化计划

1

首先说第三个场景，说到转变状况固然就是state和setState，那末顺着这个思绪走的话，好的，分割好每一个组件，各个组件的要领最好不能有交织。
然并卵,一旦各个组件之间有了交互上的关联，状况转变前提相互依靠，纵然让种种props交叉通报状况前提,然则，props的变化关于须要吸收它的组件，componentWillReceiveProps(nextprops)在父级有变化(setState)时，才会吸收新的props。垮台，又回到原点，须要坚持状况稳定又与须要变化的组件有交互关联的照样要被setState影响。
所以，用DOM吧。。。然则，用DOM修正元素，是很影响机能的，下个小结会说。实在这个思绪实在并没有错，这个时刻就要用到react特地为一些特殊情况预备的refs，官方文档上说：ref添加到Compoennt上猎取的是Compoennt实例，添加到原生HTML上猎取的是DOM

When attaching a ref to a DOM component like <div />, you get the DOM node back; when attaching a ref to a composite component like <TextInput />, you'll get the React class instance. In the latter case, you can call methods on that component if any are exposed in its class definition.

这个意义，就是我在本身的class xxx extends React.Component的组件上加上refs中，猎取的是假造DOM节点(ReactElement)，那末，就好说了，再也不必乱搞一气的props另有原生DOM的一堆转变款式的操纵，在组件内部写要领，然后依据父级状况前提，运用this.refs.xxx.fn(status)挪用即可。

2

第二个场景，个人觉得并没有影响到机能，毕竟React的组件在<script></script>标签中，浏览器剖析html的时刻，在React的组件加载前，<body></body>元素已存在，纯真的查询DOM不会致使页面的重写和回流。所以个人认为，React中照样能够少许用一些息息相关的DOM(我会说我照样宠爱原生DOM吗)。

3

第一个场景，最最先举的例子。用于componentDidMount中，哈哈，死循环——在睁开二级表格时不停的重新衬着继而不停挪用该要领，那末用在componentDidUpdate中就能够了，然则为何要用定时器呢，由于在元素节点悉数衬着出来时，只会在末了一个元素实行点击事宜，用refs也是一样的。
现在还没有找到缘由，探究中。。。假如有大大晓得，能够告诉我啊~不胜感激^ο^

DOM影响React机能剖析

关于机能的影响，很明显了，就是过剩的DOM盘算。既然React用的假造DOM情势，再用DOM去修正，那末，浏览器再盘算悉数React的变动后，再去盘算一遍原生DOM修正，这就异常为难了，React还不如不去用，也没有勤俭若干时候。
再次整体用React中交叉DOM看着也不是很雅观。

总结

在运用一个框架的时刻，那末，我们不但要明白它的头脑，还要严厉的实行它，固然这个头脑必需是准确的，高效的。比方React的假造DOM，就要在假造DOM中操纵。
假如代码不遵照它的头脑，那末就相当于不认可这个框架，这类争执假如涌现，要么重构代码，要么就摒弃这个框架。
以上是本人这个小前端的一点履历和肤见，愿望人人赋予斧正~

    原文作者：远远的飞梦
    原文地址: https://segmentfault.com/a/1190000009020774
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞