从内而外，探寻React Hooks与class组件的不同

前端

2023-11-02 12:17:51

起因：Class组件的痛点

在React中，class组件是开发人员创建可复用组件的主要方式。然而，class组件存在一些固有的痛点：

语法臃肿：class组件的语法相对复杂，尤其是在需要处理状态和副作用时，代码量会变得很大，可读性和可维护性都会受到影响。
组件复用困难：class组件的复用性相对较差，在不同的组件中需要编写大量重复的代码，这增加了开发和维护的成本。

破局：Hooks的诞生

为了解决class组件的痛点，React团队在2018年推出了Hooks，这是一种全新的组件开发方式。Hooks的主要优势在于：

语法简洁 ：Hooks使用函数式组件作为基础，语法更加简洁，减少了代码量，提高了可读性和可维护性。
组件复用性强 ：Hooks可以轻松地将状态和副作用提取出来，形成独立的函数，这些函数可以被多个组件复用，提高了开发效率。
更符合React的组件模型 ：Hooks基于函数式编程范式，更符合React的组件模型，使得组件更加易于理解和调试。

比较：Hooks与class组件的区别

为了更直观地比较Hooks与class组件的区别，我们以一个简单的计数器组件为例，该组件包含一个状态变量count和一个事件处理函数incrementCount。

使用class组件实现：

import React, { Component } from 'react';

class Counter extends Component {
  state = {
    count: 0
  };

  incrementCount = () => {
    this.setState({
      count: this.state.count + 1
    });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>+</button>
      </div>
    );
  }
}

export default Counter;

使用Hooks实现：

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>+</button>
    </div>
  );
};

export default Counter;