从开始接触React至今已有两年的时间,但是对我而言,仍然有些雾里看花的感觉:我们为什么要使用它? React中有哪些概念、包含什么东西?
本文梳理一些React主要概念,希望能我们平时在使用过程中有更加清晰的认识,了解背后的原理。
- Virtual DOM(虚拟DOM)
- Basic render
- diff 算法
- setState
- 更新机制
为了在浏览器中使用react,我们需要引用两种类库:React和ReactDOM。React是用来创建视图的;ReactDOM是用来在浏览器中渲染UI的。
Virtual DOM
当浏览器载入HTML文档并渲染用户界面时,构成HTML文档的元素就是DOM(文档对象模型)
JS可以通过与浏览器交互并修改DOM,如:document.creatElement或document.appendChild。但是这样做非常低效,想要使用JS高效的管理DOM元素可能会变得复杂而又耗时。
React的初衷就是帮助用户更新浏览器的DOM,我们不再需要关心和构建复杂的高性能单页应用,这些都可以交给React。使用React后,我们不直接和DOM API打交道,取而代之的是Virtual DOM。
Virtual DOM实际上是JS对象,我们直接访问JS对象比访问DOM API高效的多。我们可以修改JS对象,然后React通过DOM API为用户尽可能高效地渲染这些变更。
Basic render
React元素
Virtual DOM是由React元素是构成的,创建React元素:
React
第一个参数表示我们希望创建的元素类型,第二个参数表示元素的特性,第三个参数表示元素的子节点。最终会生成:
<
⚠️ data-reactroot 是用来标记React元素的根节点的,用于渲染时跟踪元素。
在控制台打印该元素,会得到一个对象
ReactDOM
ReactDOM中包含React元素在浏览器中渲染所必需的工具,它负责与DOM API交互,将VirtualDOM渲染到浏览器中
const dish = React.creatElement('div', null, "hello")
const rootElement = document.getElementById("root");
ReactDOM.render(dish, rootElement);
ReactDOM.render()第一个参数表示希望渲染的节点,第二参数代表目标节点,即渲染的具体位置。
⚠️ 这里的root节点,是在HTML模板中定义的。HTML模板一般在 ./public/index.html
通过 Bebal编译,我们可以看到 React与 ReactDOM两者之间是如何配合的:
子节点
React是采用props.children渲染子元素的。上面我们讲到React使用data-reactroot标记根节点,其他的React元素都可以通过嵌套的方式合成到其中 。
使用数据构造元素
React的主要优点是它可以将数据和UI元素有效隔离。比如,我们要创建一个食材成分的无序列表:
React
成分列表中用到的数据,我们也可以使用数组映射到React元素上 :
const
⚠️ 通过遍历生成的React元素,需要指定一个key值,用来辅助React高效的更新DOM。
持续更新中......