彻底搞懂react中类组件与函数式组件的区别

> 大家好，我是阿慧，目前正在找工作，太难了，脑子根本记不住啊，整理一些面试官常问的问题，知识点和细节，加深记忆，我会持续更新，每天进步一点点，欢迎大家指出问题，虚心学习，感谢大家的建议

类组件 Class Component

类组件是基于JavaScript中es6的Class语法。先看代码，看图说话。

import React from "react";
class People extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "阿慧",
    };
  }
  // 生命周期方法： 组件挂载后执行
  componentDidMount() {}
  // 生命周期方法： 组件更新后执行
  componentDidUpdate() {}
  // 生命周期方法： 组件挂载前执行
  componentWillUnmount() {}
  // 事件处理
  handleChangeName = () => {
    this.setState({ name: "刘亦菲" });
  };
  render() {
    return (
      <div>
        <div>我梦见我重生变成了</div>
        <div>{this.state.name}</div>
        <button onClick={this.handleChangeName}>许愿池</button>
      </div>
    );
  }
}
export default People;

所以类组件的核心机制是什么

1. this关键字 this.
2. 生命周期方法（componentDidMount componentDidUpdate等）
3. 状态管理 this.state={}, this.setState()
4. 组件实例 类组件组件是面向对象编程，是 OOP 思想。

函数式组件

import React, { useEffect, useState } from "react";
function Home(props) {
  const [name, setName] = useState("？");
  useEffect(() => {
    // axios
  }, []);
  function ChangeName() {
    setName("赵丽颖");
  }
  return (
    <div>
      <div> 函数式 我的爱豆是{name}</div> <button onClick={ChangeName}>Change</button>
    </div>
  );
}
export default Home;

函数组件本质上就是一个函数，没有this关键字，没有实例。使用Hooks去保存状态数据，useEffect可以模拟当作是类组件的生命周期方法。

面试中如果要回答面试官的这个问题，描述区别：可以从语法，状态管理，副作用，生命周期，this指向问题等方面描述。

关于两者的性能优化方式的不同，类组件可以通过shouldComponentUpdate/PureComponent 来避免不必要的渲染, 函数式组件可以用React.memo, useCallBack,useMemo等方法回答。

更多前端知识，持续更新。