React 中的组件

今天讲一下 React 中的组件。组件就是页面上的一部分，大大小小的各种组件拼在一起就变成了一个完整的页面，就像我们玩的拼图，需要一块一块的拼接在一起才能变成一副完整的拼图。

以上图为例，每个框框就可以当做一个组件，组件的拆分可以根据自己开发的页面决定。一个完整的页面非常复杂，很难编写。但是，当我把页面分成一个个小组件进行开发之后，再进行开发和维护这些组件就会比较简单了。

这就是我们前端通常说的前端组件化的概念。有了组件化这么一个概念之后，打开我们之前创建好的项目代码。

项目目录，我展开了开发当中最主要的两个文件夹，在 src 文件夹下现在又一个 App.js 的文件和一个 index.js 文件、在 public 文件夹下有一个图标文件 favicon.ico 和一个 index.html 文件。

打开 index.js 文件，它是整个程序的运行入口。

./src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(, document.getElementById('root'));

上面的第三行代码通过 import 导入 App 文件，这个 App 其实就是一个组件。

接下来看一下，该如何定义一个组件。import App from './App'; 中的 App 来自于 ./src/App.js 这个文件。下面就是一个最基础的 React 组件。

./src/App.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      
Hello React
    );
  }
}

export default App;

看一下上面的代码是如何定义一个组件的。

第一行有一个 { Component } ，这是一个 ES6 的语法。上面的所有代码可以改写成下面这样，你们应该就理解 { Component } 这个语法是表达什么的了。

import React from 'react';

class App extends React.Component {
  render() {
    return (
      
Hello React
    );
  }
}

export default App;

忽略空行，第二行代码，通过 ES6 中的 class 语法定义了一个叫做 App 的类，并继承了 React.Component 的方法。这样就相当于定义了一个 React 的组件了。

接着往下看，这个 App 组件里有一个 rander() 方法。这个方法返回了一些 html 标签。

这些返回的内容是挂载到 indesx.html 页面上的内容。

最后通过 import React from 'react'; 导出这个 App 组件。

在 ./src/index.js 文件中使用 import App from './App'; 引入了 ./src/App.js 这个组件。这样就可以通过 index.js 这个入口文件把组件显示在页面上。

npm start 启动项目，再次看一下组件显示的内容。还是跟上次一样，显示出了 Hello React 。

重新去我们的 ./src/App.js 文件下修改一下里面的代码。把第六行的

Hello React

修改成

Hello World

。保存，回到浏览器，刷新。

页面内容就变成了 Hello World 。为什么会这样呢？原因就在于，在 ./src/index.js 中引入了 App 组件，而这个组件渲染的内容就是 Hello World ，这样你的页面就会跟着变了。

到现在，你们应该对组件有了细微的了解。

一开始 ./src/App.js 文件的代码是这样的。

import React, { Component } from 'react';

// import { Component } from 'react';   这个 { Component } 可以单独取出来
// 上面那行就等价于
// import React from 'react'
// const Component = React.Component

class App extends Component {
  render() {
    return (
      
Hello World
    );
  }
}

export default App;

了解一下是这样写的就好。

再看一下 ./src/index.js ，我们在这个文件中引入了 App.js 这个组件。看一下最后一行 ReactDOM.render() 做了些什么工作。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(, document.getElementById('root'));

ReactDOM 是一个第三方的模块，它有一个方法叫做 render() ，这个方法可以帮我们把一个组件挂载到我们的一个 DOM 节点上。

最后一句我们把 App 这个组件挂载到 id 等于 root 这样的一个 DOM 节点上。

切换到浏览器上，打开控制台看一下。

很明显的看到，Hello World 这个内容的标签就挂载到了

标签上。

为什么要把 App 这个组件挂载到 id 为 root 这个节点上呢？在 ./public 这个目录中有一个 index.html 的文件。这是我们工程文件的 html 模板。在这个模板里有一个

的标签，它就是我们整个网页的内容部分。把所有的内容都放到了那个节点上。

./public/index.html

里面的内容是由谁生成的呢？很明显是我们使用的 React 生成的。生成的内容就是 App 组件里的内容。

在 ./src/App.js 文件和 ./src/index.js 文件中都引入了 React 模块，但是并没有发现在哪里使用到了这个模块。

我们试着把 ./src/index.js 中的导入 React 模块的那句注释掉。

// import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(, document.getElementById('root'));

保存一下，到网页上刷新页面。

会提示 Failed to compile ，编译失败。

当我们用 ReactDOM.render() 的时候，里面有 这样的一个自定义标签参数。其实，这是 React 的一种语法。叫做 JSX 语法，过阵子会给大家详细的讲解。只要你使用了这种语法，就要引用 React 模块。不引用 React 就没办法编译这种 JSX 语法的。这样 ./src/index.js 里面的四行代码大概知道了是用来干嘛的了。

再打开 ./src/App.js，里面的引用的 React 也是为了编译这种语法。

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      
Hello World
    );
  }
}

export default App;

在 render() 方法中，return 的内容就包含了 JSX 语法。

今天就那么多，溜了溜了，喜欢的就给我点个喜欢吧。

---