react-3 react 是怎么显示页面的，通过简单的例子来尝试

浅浅的花香味﹌ 2022-03-19 04:57 141阅读 0赞

我们通过create-react-app 创建了简单的 react 项目，也查看了这个自动创建的项目的目录；

下面看一下，这个 react 页面是如何显示的：

![20190215105238771.png][]

第一步，我们打开 public 目录下的index.html

即便我们对这个react 项目一点也不了解，也能够知道这个index.html 文件就是我们的首页文件；

那么我们便找到了一个了解react 项目的突破口，我们打开这个页面：发现和正常的网页没什么区别，

但是就是没什么内容，那网页中显示的内容是从哪里来的呢？我们发现 body 中仅有一个 id=root 的div

好了，刚找的突破口在这里就中断了，react 网页显示的内容到底是从哪里来的，这里明明什么都没有啊；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N2cGVy_size_16_color_FFFFFF_t_70][]

第二步： 我们打开 src 目录中的 index.js

发现这里有个比较特殊的地方：

ReactDOM.render(<App />, document.getElementById('root'));

我们又发现了root 的踪影，这里的 reactDOM.render 方法把我们写的页面渲染到 id= root 的div中了；

所以，react中显示的页面就是这个 reactDom.render() 方法的第一个参数；

这里的第一个参数是 <App/>  ， 这个<App/> 是个 react 组件，这里先不关心这个组件，我们只要知道

这个组件就是页面就可以了，下面我们不使用组件来显示一下页面：

我们直接在这里写上要显示的页面，那么首页的内容就是这个地方的代码，下图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N2cGVy_size_16_color_FFFFFF_t_70 1][]h

所以可以看出，react 是在index.js 中使用 ReactDom.render() 方法，把我们写的页面作为第一个参数，

然后渲染到我们要显示的地方，也就是第二个参数；

[20190215105238771.png]: /images/20220319/9634cee95d884ab1af4f747856ac5e8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N2cGVy_size_16_color_FFFFFF_t_70]: /images/20220319/25e6a23d794d4d47b913fdeb6b00e75d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N2cGVy_size_16_color_FFFFFF_t_70 1]: /images/20220319/7fad152b7da64e92b1d62600cfe0d5c2.png