[React 2021新书]103、第一个组件

React新手村

创建组件最常用的方法有两种：

• Class 组件. 使用 ES6 的 class 来定义组件，class继承 React.Component.

• 函数 组件. 就是 JavaScript 函数，该函数返回一个 React 元素（JSX）.

选择哪种方式创建组件

是使用Class组件还是函数组件，该如何选择呢?

一般来说，在需要使用state的时候我们用Class 组件，在不需要修改数据而只是传输和展示数据的情况下我们使用函数组件。在hooks发布后，我们也可以在任何时候使用函数组件，这也是笔者推荐的方式.

我们将演示两种方式的用法，如果你在维护旧的代码库，坚持混合使用样式并不是好的选择。

示例 - 创建一个class组件

按照以下步骤:

• 定义组件, 包含定义一个继承React.Component 的Class，并定义一个render()方法.

• 在app中使用组件. 如何在app中添加组件.

-1- 定义组件

1. 运行 git clone 克隆开始项目:

   git clone https://github.com/softchris/react-starter-project my-first-app
   cd my-first-app
   

   该开始项目基于上一节的教程使用webpack配置react项目

2. 运行 npm install 命令安装依赖包:

   npm install
   

3. 在 src 目录添加 Jedi.js 文件，并添加以下内容:

    import React from 'react';
   
    class Jedi extends React.Component {
      render() {
        return (
          <div>I am a Jedi Component</div>
        );
      }
    }
    
    export default Jedi;
   

   首先创建一个名为 Jedi 的class，该class继承 React.Component。然后创建了render() 方法，返回一段JSX给调用的app。

-2- 使用组件

现在我们来使用刚刚定义的组件：

1. 在 index.js 文件中使用import引入组件:

   import Jedi from './Jedi';
   

2. 找到 ReactDOM.render 并在其中添加使用组件的代码:

   ReactDOM.render(
      <div>
        <Jedi />
      </div>,
      document.getElementById('app')
    );
   

   <Jedi> 组件就已经添加成功.

3. 在终端运行项目 npm start，查看组件是否生效:

   npm start
   

   命令行会显示正在编译的包，成功后可以通过 http://localhost:8080 访问。

4. 打开浏览器访问 http://localhost:8080. 查看结果:

   I am a Jedi Component
   

   成功!

示例 - 创建一个函数组件

我们现在通过另外一种方式创建组件，查看它们之间的区别.

1. 修改 Jedi.js 文件:

   import React from 'react';
   
   const Jedi = () => <div>I am a Jedi Component</div>
   
   export default Jedi;
   

   函数组件，顾名思义就是一个函数。使用箭头函数或者function关键字创建函数，函数返回一个JSX表达式。

2. 运行项目 npm start:

   npm start
   

3. 打开浏览器访问 http://localhost:8080. 查看结果:

   I am a Jedi Component
   

   成功 !