【React】函数组件 和 类组件 的区别

一、函数组件 和 类组件

1、函数组件

函数组件也称无状态组件，顾名思义就是以函数形态存在的 React 组件。

在hooks出现之前，react 中的函数组件通常只考虑负责UI的渲染，没有自身的状态，没有业务逻辑代码，是一个纯函数。下面这个函数组件就是一个纯函数，它的输出只由参数props决定，不受其他任何因素影响。

function DemoFunction(props) {
  const { text } = props
  return (
    <div className="demoFunction">
      <p>{`function 组件所接收到的来自外界的文本内容是：[${text}]`}</p>
    </div>
  );
}

但是这种函数组件一旦我们需要给组件加状
态，那就只能将组件重写为类组件，因为函数组件没有实例，没有生命周期。所以我们说在 hook 之前的函数组件和类组件最大的区别又是状态的有无。

Hook

React Hooks 是从 React 16.8 版本推出的新特性，目的是解决 React 的状态共享以及组件生命周期管理混乱的问题。React Hooks 的出现标志着，React 不会再存在无状态组件的情况，React 将只有类组件和函数组件的概念。

hooks为函数组件提供了状态，也支持在函数组件中进行数据获取、订阅事件解绑事件等等。下面先介绍几个最基本的hook作为基础知识。

• useState：通过 useState 为组件提供状态。useState 的参数是 state 的初始值，他只有在组件第一次渲染的时候会生效，他的返回值是一个数组，第一个是 state，第二个是设置state的函数。

const [count, setCount] = useState(0);
1
useEffect：副作用。通常在副作用中进行ajax请求，事件的绑定与解绑，设置定时器与清除等等。

  // useEffect第一个参数是一个回调函数，在里面进行业务逻辑代码的书写
  // 第二个参数是依赖项数组，如果数组中的依赖发生变化，那么该副作用就会重新执行，
  // 如果不设置第二个参数，那么当该组件每渲染一次，副作用就会执行一次
  useEffect(() => {
    console.log("useEffect副作用执行");
    //用setTimeout模拟ajax请求
    setTimeout(() => {
      setList(result);
    }, 3000);
  }, [list]);

• useCallback：用于缓存函数，第一个参数为要缓存的函数，第二个参数为依赖项数组，如果依赖发生了变化，那么就会生成一个新的函数；否则当组件重新渲染时，不会重新定义这个函数，而是会取缓存。

• useMemo：用于缓存函数的返回值，第一个参数为要缓存的函数（注意实际被缓存的是函数被执行过后的值），第二个参数为依赖项数组，如果依赖发生了变化，那么就会重新执行这个函数，得到新的返回值；否则当组件重新渲染时，不会重新执行这个函数，而是直接取被缓存的该函数的返回值。

useCallback，useMemo 都是用作优化函数式组件性能的。

2、类组件

在 React 中，类组件就是基于 ES6 语法，通过继承 React.component 得到的组件。

class Demo extends React.Component {
  // 初始化类组件的 state
  state = {
    text: "111"
  };
  // 编写生命周期方法 didMount
  componentDidMount() {
    // 省略业务逻辑
  }
  // 编写自定义的实例方法
  changeText = (newText) => {
    // 更新 state
    this.setState({
      text: newText
    });
  };
  // 编写生命周期方法 render
  render() {
    return (
      <div className="demoClass">
        <p>{this.state.text}</p>
        <button onClick={() => this.changeText(222)}>点我修改</button>
      </div>
    );
  }
}

二、函数组件和类组件区别

1、表面差异：

• 类组件有生命周期，函数组件没有

• 类组件需要继承 Class，函数组件不需要

• 类组件可以获取实例化的 this，并且基于 this 做各种操作，函数组件不行

• 类组件内部可以定义并维护 state， 函数组件为无状态组件（可以通过hooks实现）

​ 函数组件相比较类组件，优点是更轻量与灵活，便于逻辑的拆分复用。

2、函数式组件捕获了渲染时所使用的值，这是两类组件最大的不同。

示例 点击查看在线演示
index.js

import React from "react";
import ReactDOM from "react-dom";

import ProfilePageFunction from './ProfilePageFunction';
import ProfilePageClass from './ProfilePageClass';

class App extends React.Component {
  state = {
    user: 'Dan',
  };
  render() {
    return (
      <>
        <label>
          <b>Choose profile to view: </b>
          <select
            value={this.state.user}
            onChange={e => this.setState({ user: e.target.value })}
          >
            <option value="Dan">Dan</option>
            <option value="Sophie">Sophie</option>
            <option value="Sunil">Sunil</option>
          </select>
        </label>
        <h1>Welcome to {this.state.user}’s profile!</h1>
        <p>
          <ProfilePageFunction user={this.state.user} />
          <b> (function)</b>
        </p>
        <p>
          <ProfilePageClass user={this.state.user} />
          <b> (class)</b>
        </p>
        <p>
          Can you spot the difference in the behavior?
        </p>
      </>
    )
  }
}


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

ProfilePageClass.js

import React from 'react';

class ProfilePage extends React.Component {
  showMessage = () => {
    alert('Followed ' + this.props.user);
  };

  handleClick = () => {
    setTimeout(this.showMessage, 3000);
  };

  render() {
    return <button onClick={this.handleClick}>Follow</button>;
  }
}

export default ProfilePage;

ProfilePageFunction.js

import React from 'react';

function ProfilePage(props) {
  const showMessage = () => {
    alert('Followed ' + props.user);
  };

  const handleClick = () => {
    setTimeout(showMessage, 3000);
  };

  return (
    <button onClick={handleClick}>Follow</button>
  );
}

export default ProfilePage;

在函数组件的测试情况下，下拉框中选中 Dan，点击关注按钮，迅速将下拉框切换到Sophie，3秒之后，alert弹窗内容仍然是 Followed Dan
在类组件的测试情况下，重复相同的动作，3秒之后，alert弹窗将会显示 Followed Sophie

此案例中，当父组件的state改变时，子组件进行重新渲染，子组件的props改变；

类组件：

• 改变props(Dan-Sophie)，类组件也改变了值，永远保持一致。
• 原因：类组件捕获最新的值（永远保持一致）当实例的props属性发生修改时，class组件直接使用this（组件的实例），所以可以直接获取组件最新的props。

函数组件：函数式组件捕获了渲染所用的值

当我改变props时（Dan->Sophie），你会发现函数组件会渲染之前的值Dan这个名字。
原因：函数式组件捕获了渲染所使用的值。在函数组件中，之前的props参数，已经因为javascript闭包的特性，保存在内存之中，无法从外部进行修改(维护多个人的状态)。所以在定时器执行callback时，打印的还是旧值。

---