react创建一个组件（函数组件和类组件及区别）

今天药忘吃喽~ 2022-11-12 15:59 211阅读 0赞

## 函数组件和class组件 ##

1、**函数组件**：编写 JavaScript 函数，返回一个react元素（组件名首字母要大写）

function Welcome(props) { 
    
    // 此处可以写入你想写的一些逻辑语句
    // 最后只需要return出react元素
      return <h1>Hello, { props.name}</h1>;
    }
    // 或者
    const Welcome = (props) => { 
    // 此处可以写入你想写的一些逻辑语句
    //最后只需要return出react元素
     return <h1>Hello, { props.name}</h1>;
    }

2、**class组件**：使用 ES6 的 class 来定义组件

class Welcome extends React.Component { 
    // 此处可以写入你想写的一些逻辑语句
    //最后只需要return出react元素
      render() { 
        return <h1>Hello, { this.props.name}</h1>;
      }
    }

## 函数组件和class组件的异同 ##

**1、相同点**

*  无论是使用函数或是类来声明一个组件，它决不能修改它自己的 props。
 *  所有 React 组件都必须是纯函数，并禁止修改其自身 props 。
 *  React是单项数据流，父组件改变了属性，那么子组件视图会更新。
 *  属性 props 是外界传递过来的，状态 state 是组件本身的，状态可以
 *  组件中任意修改组件的属性和状态改变都会更新视图。

**2、区别**

函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。

<table> 
 <thead> 
  <tr> 
   <th align="center">不同点</th> 
   <th align="center">函数组件</th> 
   <th align="center">类组件</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">是否有this</td> 
   <td align="center">无</td> 
   <td align="center">有</td> 
  </tr> 
  <tr> 
   <td align="center">是否有生命周期</td> 
   <td align="center">无</td> 
   <td align="center">有</td> 
  </tr> 
  <tr> 
   <td align="center">是否有状态state</td> 
   <td align="center">无</td> 
   <td align="center">有</td> 
  </tr> 
 </tbody> 
</table>