React 函数组件与class组件的区别

Posted 2022-06-17 面条请不要欺负汉堡

概念

组件，从概念上类似于 javascript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。
   组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。
   定义组件有两个要求：

1. 组件名称必须以大写字母开头；
    2. 组件的返回值只能有一个根元素。

分类

React组件根据定义形式的不同，可以分为函数组件与 class 组件。

（1）函数组件
    定义组件最简单的方式就是编写 JavaScript 函数：

function Welcome(props) 
  return <h1>Hello, props.name</h1>;

该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）对象，并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。

（2）class组件
    class组件就是使用 ES6 的 class 来定义的组件，如需定义 class 组件，需要继承 React.Component或者React.PureComponent。

class Welcome extends React.Component 
  render() 
    return <h1>Hello, this.props.name</h1>;
  

上述两类组件的示例代码在 React 里是等效的。而事实上两类组件的实现是有区别的。

函数组件与class组件的区别

函数组件：

function Welcome = (props) => 
  const sayHi = () => 
    alert(`Hi $props.name`);
  
  
  return (
    <div>
      <h1>Hello, props.name</h1>
      <button onClick =sayHi>Say Hi</button>
    </div>
  )

class组件：

import React from 'react'

class Welcome extends React.Component 
  constructor(props) 
    super(props);
    this.sayHi = this.sayHi.bind(this);
  

  sayHi() 
    alert(`Hi $this.props.name`);
  

  render() 
    return (
      <div>
        <h1>Hello, this.props.name</h1>
        <button onClick =this.sayHi>Say Hi</button>
      </div>
    )
   

区别：

1. 只管直观区别，函数组件的代码量较少，相比类组件更加简洁。
2. 函数组件看似只是一个返回React元素的函数，其实体现的是无状态组件（Stateless
   Components）的思想。函数组件中没有this，没有state，也没有生命周期，这就决定了函数组件都是展示性组件，接收props，渲染DOM，而不关注其他逻辑。
3. 因为函数组件不需要考虑组件状态和组件生命周期方法中的各种比较校验，所以有很大的性能提升空间。