React学习(二) React学习之demo分析(项目是怎么运行的？页面是怎么出来的？)

野性酷女 2023-06-20 06:15 80阅读 0赞

首先，React项目都不会创建的朋友们可以查看一下我React系列笔记一的文章：[React学习(一) React开发环境搭建][React_ React]。接下来这篇文章是在一的基础上写的。  
现在，我们已经有能力创建一个React项目了，那么React项目的运行原理是什么呢？代码在哪里？我是谁？我在哪儿？  
上篇文章提到，React项目中我们主要编码区域就在src/ 路径下，这次我们展开项目目录详细学习一下：  
回顾一下项目运行后的结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70]  
我们所看到的这个页面是怎么出来的呢？首先浏览器所能识别的只有html,css和JavaScript。既然有页面展示出来，必有html文件，记着页面上的这几个元素，我们接下来从代码中一一找出来，看看React是怎么渲染这个页面的。  
**①index.html**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 1]  
我们看到pubic文件夹下有一个名为index.html的文件。在这个文件的body标签中有一个id为root的div标签。先记着，后面我们再看看有什么用处。  
**②App.js**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 2]  
再看src文件夹下这个App.js文件，发现是不是找到了浏览器页面上的这几个元素了呢？页面上的logo和下面的两行文字都在这里找到了。但是这些元素是怎么被放到页面上的呢？  
别急，往下看！  
**③index.js**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 3]  
看到这里你能联想到什么了吗？  
渲染过程：

## 第一步： ##

首先在index.html文件中定义了一个页面，在这个页面上定义了一个容器：

## 第二步： ##

在App.js文件的App()方法中声明了一堆标签：

function App() { 
      return (
        <div className="App">
          <header className="App-header">
            <img src={ logo} className="App-logo" alt="logo" />
            <p>
              Edit <code>src/App.js</code> and save to reload.
            </p>
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
          </header>
        </div>
      );
    }

稍微扩展一下，在React中可以使用函数形式声明一个组件，这个App()方法就声明了一个组件，新手可能对这个组件不太理解是什么意思，别急，我们慢慢学习，后续我们会做出解释。

## 第三步： ##

在index.js文件中告诉我们第二步声明的标签在哪儿渲染？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 4]  
为了讲清楚我把页面展示在一屏了，希望各位看官别吐！！！  
其实过程就是，在index.html定义了一个id为root的div容器，在App.js文件中定义了一个名为App()的函数（其实应该叫组件），函数中写了一些标签，最后在index.js文件中，通过ReactDOM的render方法把在App()方法中定义的标签渲染在了index.html文件的div容器中，这样浏览器就能展示出来了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 5]  
稍微扩展点，看一下index.js(上图)的这行代码其实做了两件事：第一件事是把App.js中声明的App()组件实例化了；第二件事是把实例化后的组件放到了index.html的div容器中。  
这里有提到了一个新词“组件实例化”，不懂没关系，先有个印象，后续文章我们再搞清楚 组件 组件实例化 都是什么东西

**以上权当推测吧，我们来验证一下：**  
初始页面和代码：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 6]  
①我们把index.html文件中的id为root的div上面再放一个div，内容为“做个小测试吧”，如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 7]  
修改完Ctrl+s会发现页面已经刷新了。看内容已经变化了。  
由此可见页面中展示的确实是index.html  
②我们把App.js文件中的内容修改一下，然后保存：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 8]  
由此可见页面的div容器中展示的确实是App.js文件中App()方法中声明的标签。  
③我们再来修改一下index.js文件中的内容：  
![在这里插入图片描述][20191209090051761.png]  
由此可见index.html的id为root的div中的内容确实是在这个地方渲染的。  
其实ReactDOM.render的这个方法名render就是渲染的意思。

**笔者目前也是个初学者，正在慢慢摸索，待有新的收获会继续更新，有兴趣的小伙伴一起探索吧，新手上路，内容若有错误之处期待指正，大佬轻拍。**

[React_ React]: https://blog.csdn.net/sun_luming/article/details/103442432
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191208155745135.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191208155338855.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191208160005330.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191208160326850.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191208162336150.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191209100540930.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191209085919338.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191209085946438.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20191209090008848.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc=,size_16,color_FFFFFF,t_70
[20191209090051761.png]: https://img-blog.csdnimg.cn/20191209090051761.png