Class和Fn组件：心智模型的区别

2023-12-27 08:33:07

在前端开发领域，React框架因其高效和灵活而广受开发者青睐。其中，Class组件和Function（简称Fn）组件作为构建React应用的基本单元，各有特点且适用于不同场景。理解这两种组件之间的差异，可以帮助开发者更好地利用它们，进而提高开发效率。

生命周期的区别

Class组件拥有完整的生命周期方法，如componentDidMount, componentWillUnmount, 以及render等。这些方法允许在组件的不同阶段执行特定的操作。例如，在componentDidMount中发起数据请求，或是在componentWillUnmount中清理资源。

Fn组件则通过React Hooks来管理状态和生命周期行为，如使用useEffect替代Class组件中的生命周期方法。这种方法使得代码更简洁，并且更容易理解函数的依赖关系。

示例代码

Class 组件

class MyComponent extends React.Component {
  componentDidMount() {
    // 执行一些操作
  }

  componentWillUnmount() {
    // 清理资源
  }

  render() {
    return <div>Class Component</div>;
  }
}

Fn 组件

import { useEffect } from 'react';

function MyComponent(props) {
  useEffect(() => {
    // 执行一些操作

    return () => {
      // 清理资源
    };
  }, []);

  return <div>Function Component</div>;
}

Props和State的使用区别

Class组件中，props可以通过this.props访问，而状态（state）则通过this.state来管理，并且可以调用setState方法更新状态。这种模式下，this关键字扮演了重要的角色。

Fn组件利用Hooks中的useState和useContext等Hook来处理状态和props的传递。这种方式不仅更简洁，而且在函数式编程的思想指导下，代码可读性更强。

示例代码

Class 组件

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

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

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

Fn 组件

import { useState } from 'react';

function MyComponent(props) {
  const [count, setCount] = useState(0);

  function incrementCount() {
    setCount(count + 1);
  }

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