React 深度学习：2.开始

最新推荐文章于 2024-04-07 09:36:46 发布

weixin_30682415

最新推荐文章于 2024-04-07 09:36:46 发布

阅读量78

点赞数

文章标签：人工智能 javascript ui ViewUI

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

版权

我们从最简易的 React 示例开始：

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);
复制代码

我们在浏览器将得到如下结果：

这简短的代码，是如何变成浏览器的内容的呢？

我们从 ReactDOM.render 入手。

render(
    element: React$Element<any>,
    container: DOMContainer,
    callback: ?Function,
) {
    // do something
}
复制代码

从 React 官方文档中我们知道，ReactDOM.render 方法用于将一个 React 元素渲染到根 DOM 节点中。

React 更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render。

ReactDOM.render 有两个作用：

这里涉及到几个重要的概念：

ReactDOM.render 的第一个参数是一个 React 元素，但在示例代码我们传入的是一个 JSX，那这段 JSX 是什么时候变成 React 元素的呢？请阅读在网站中添加 React。

如果我们使用 JSX 语法，那么就需要在使用这些文件前将其进行预处理，将其转换成普通的 JS。进行预处理有多种方式，可在上面的链接中找到。

这些 JSX 最终会转换为使用 React.createElement 的格式。

元素是构成 React 应用的最小砖块。

通过 React 深度学习：React Core—ReactElement 文章我们知道，React 元素是一个 DOM 节点的抽象。

React 元素不仅能够表现 DOM 节点本身，它还可以表现 DOM 的层级结构。

React 通过 React 元素实现了所谓的【虚拟 DOM】。

ReactDOM.render 方法将生成的 React 元素树渲染到实际的 DOM。

ReactDOM.render 的第二个参数就是一个普通的 DOM 对象。

未完待续

接下来，我们随着 ReactDOM.render 的?继续往下探索...

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

关注