React学习(三)React模板项目代码级别分析

不念不忘少年蓝@ 2023-06-20 06:39 12阅读 0赞

在[React学习(一)React开发环境搭建,使用create-react-app创建一个demo][React_React_create-react-app_demo]这篇文章中我们已经搭建好了React项目的开发环境，并且使用create-react-app工具创建了一个模板项目。  
在[React学习(二) React学习之demo分析(项目是怎么运行的？页面是怎么出来的？)][React_ React_demo]这篇文章中我们对第一篇文章中使用create-react-app工具创建的模板项目做了一个简单分析，弄清楚了这个demo的运行原理，搞明白了页面是怎么渲染的，同时我们也提出了两个新的概念：①组件；②组件实例化

现在就对这两个概念做一个理解：

## 组件： ##

什么是组件？我在手机中给一个软件的界面截了一个图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70]  
其实组件说白了就是页面上的一部分，上图中我用红框圈起来的每一部分都可以作为一个组件。组件化开发是前端的一个趋势，我们可以把一个复杂页面拆分成若干个部分，比如顶部的查询部分，对应一个组件，就是查询组件； 底部的菜单部分，对应一个组件，就是菜单组件，中间部分再次分割成若干个组件。一个页面有时候很复杂，很难编写，但是当我们把它拆分成若干个组件的时候，维护这些组件就比较简单了，最后把需要的组件拼接到一起，就组成了一个页面。并且声明了一个组件以后，你可以在你项目的任何地方使用它。。

到这里组件这个概念大家应该就有一个大概的轮廓在脑子里了，后面再细细品味吧。

## 组件实例化 ##

这个概念可以和JAVA中的类进行一个对比记忆，在JAVA中可以编写一个类(class),但是当我们使用类的时候需要把类实例化为一个对象，React中的组件亦是如此，你可以声明一个组件，但是要想使用这个组件，需要把组件实例化，之后才能使用，表达能力有限，如果还是不太理解的话，可以带着问题看看下面的实例分析，或许会帮助你理解。

看一下模板项目的页面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 1]  
我们再次打开代码：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 2]

## 代码分析： ##

**一、App.js文件中声明组件：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 3]  
不要被 import和export 语句给绕晕了，这些都是 JavaScript ES6 的特性，我将在后面的学习中继续分享。  
看一下代码：

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声明组件的一种方式，函数式声明组件，既然这么说，肯定还有其他声明方式，现在先理解这种方式吧。  
在这种声明方式中：

function App() { 
    }

这个函数就是声明了一个名为App的组件，而函数体里面的return()后面的括号中的标签，大家就比较熟悉了，这就是组件包含的页面内容。这里就是我们编码的重点，后续我们想要在页面上展示什么东西，都要在这里编写html标签。App组件由三部分组成：  
第一部分：

这是页面上那个花状的LOGO  
第二部分：

<p>Edit <code>src/App.js</code> and save to reload. </p>

这是LOGO下面的第一行文字  
第三部分：

<a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a>

这是LOGO下面的第二行文字

名为App的组件中包含了这三部分内容。 到这里只是声明了组件，还不能使用，下面看看声明的这个组件是怎么使用的。  
**二、index.js文件中组件的实例化和使用**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 4]

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

ReactDOM.render() 可能新手看到这个会不太理解这是什么东西，这是React特有的语法，叫JSX (现在先不要纠结这到底是什么，后面我们再做详细探索)，这个方法有两个参数：  
**第一个参数就是一个实例化后的组件**  
那么组件是怎么实例化的呢？还记得在前面声明的组件叫什么吗？App  
那么怎么实例化呢？  
`<App /> //这就是组件的实例化方式，先记住格式吧。一个闭合的尖括号，里面是组件名称，这就是组件的实例化。`  
**第二个参数是一个HTML的DOM节点**

记得index.html中的那个id为root的div容器吗？这第二个参数就是获取到那个div容器 document.getElementById(‘root’)，这个有点js基础的都能看懂

//再看一下这行代码
    ReactDOM.render(<App />, document.getElementById('root'));

那么说到这里你应该能猜到ReactDOM.render()方法是干什么的了吧？没错，它的作用就是把实例化后的App组件放到index.html文件中的id为root的div容器中，这样我们就看到了页面中展示了App组件中的内容。

扯了半天其实就是三句话：  
**①组件使用前需要声明！(函数式声明，函数里return我们要显示的元素)  
②组件使用必须实例化！(固定格式：使用尖括号实例化)  
③组件展示需要使用ReactDOM.render！(两个参数代表不同意义，顺序不能反)**

文章中看到了js文件中出现了import和export，还提到了JSX，这些东西在后续的学习中我们会慢慢熟悉。

[React_React_create-react-app_demo]: https://blog.csdn.net/sun_luming/article/details/103442432
[React_ React_demo]: https://blog.csdn.net/sun_luming/article/details/103445251
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191209161429154.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/20191209190759699.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/20191209114748977.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/2019120916590020.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/20191209192113778.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc=,size_16,color_FFFFFF,t_70