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

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

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

组件：

什么是组件？我在手机中给一个软件的界面截了一个图：

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

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

组件实例化

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

看一下模板项目的页面：

我们再次打开代码：

代码分析：

一、App.js文件中声明组件：

不要被 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组件由三部分组成：
第一部分：

<img src={logo} className="App-logo" alt="logo" />

这是页面上那个花状的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文件中组件的实例化和使用

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

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

<div id="root"></div>

记得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，这些东西在后续的学习中我们会慢慢熟悉。