react重要基础概念---05react与dom

最新推荐文章于 2025-08-13 21:05:35 发布

weixin_33958585

最新推荐文章于 2025-08-13 21:05:35 发布

阅读量93

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c18aa005188257c1260f29c

ReactDOM

要把 React 渲染的 Virtual DOM 渲染到浏览器的 DOM 当中，就要使用 render 方法了：

    ReactComponent render(
        ReactElement element,
        DOMElement container,
        [function callback]
    )
复制代码

该方法把元素挂载到 container 中，并且返回 element 的实例（即 refs 引用）。当然，如果是无状态组件， render 会返回 null 。当组件装载完毕时， callback 就会被调用。

当组件在初次渲染之后再次更新时，React 不会把整个组件重新渲染一次，而会用它高效的 DOM diff 算法做局部的更新。这也是 React 最大的亮点之一！

refs

refs 就是为此而生的，它是 React 组件中非常特殊的 prop，可以附加到任何一个组件上。从字面意思来看， refs 即 reference，组件被调用时会新建一个该组件的实例，而 refs 就会指向这个实例。

对于 React 组件来说， refs 会指向一个组件类的实例，所以可以调用该类定义的任何方法。如果需要访问该组件的真实 DOM，可以用 ReactDOM.findDOMNode 来找到 DOM 节点，但我们并不推荐这样做。因为这在大部分情况下都打破了封装性，而且通常都能用更清晰的办法在 React 中构建代码。

React 之外的 DOM 操作

如果要调用 HTML5 Audio/Video 的 play 方法和 input 的 focus 方法， React 就无能为力了，这时只能使用相应的 DOM 方法来实现
React 提供了事件绑定的功能，但是仍然有一些特殊情况需要自行绑定事件，例如 Popup 等组件，当点击组件其他区域时可以收缩此类组件。这就要求我们对组件以外的区域（一般指 document 和 body ）进行事件绑定
React 正在自己构建一个 DOM 排列模型，来努力避免这些 React 之外的 DOM 操作。我们相信在不久的将来，React 的使用者就可以完全抛弃掉 jQuery 等 DOM 操作库。

转载于:https://juejin.im/post/5c18aa005188257c1260f29c