函数组件与类组件

React 函数组件和类组件的区别。

---

1. 基本定义

• 函数组件：就是一个 JavaScript 函数，接收 props 作为参数，返回 JSX。
• 类组件：是一个 JavaScript 类，继承自 React.Component，必须实现 render 方法，返回 JSX。

---

2. 代码结构对比

函数组件

function MyComponent(props) {
  return <div>Hello, {props.name}!</div>;
}

类组件

class MyComponent extends React.Component {
  render() {
    return <div>Hello, {this.props.name}!</div>;
  }
}

---

3. 核心区别

(1) 状态管理

• 函数组件：

  • 以前没有状态管理能力，只能通过 props 接收数据。
  • 现在有了 Hooks（如 useState），可以管理状态。
  • 示例：

    function MyComponent() {
      const [count, setCount] = useState(0);
      return (
        <div>
          <p>Count: {count}</p>
          <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
      );
    }

• 类组件：

  • 通过 this.state 管理状态。
  • 使用 this.setState 更新状态。
  • 示例：

    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = { count: 0 };
      }
    
      render() {
        return (
          <div>
            <p>Count: {this.state.count}</p>
            <button onClick={() => this.setState({ count: this.state.count + 1 })}>
              Increment
            </button>
          </div>
        );
      }
    }

---

(2) 生命周期

• 函数组件：

  • 以前没有生命周期方法。
  • 现在通过 Hooks（如 useEffect）模拟生命周期。
  • 示例：

    function MyComponent() {
      useEffect(() => {
        console.log('Component mounted or updated');
        return () => {
          console.log('Component will unmount');
        };
      }, []); // 空数组表示只在组件挂载和卸载时执行
      return <div>Hello, World!</div>;
    }

• 类组件：

  • 有完整的生命周期方法，如 componentDidMount、componentDidUpdate、componentWillUnmount。
  • 示例：

    class MyComponent extends React.Component {
      componentDidMount() {
        console.log('Component mounted');
      }
    
      componentDidUpdate() {
        console.log('Component updated');
      }
    
      componentWillUnmount() {
        console.log('Component will unmount');
      }
    
      render() {
        return <div>Hello, World!</div>;
      }
    }

---

(3) this 绑定

• 函数组件：

  • 没有 this，直接使用变量和函数。
  • 示例：

    function MyComponent() {
      const handleClick = () => {
        console.log('Button clicked');
      };
      return <button onClick={handleClick}>Click Me</button>;
    }

• 类组件：

  • 需要处理 this 绑定问题。
  • 示例：

    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
      }
    
      handleClick() {
        console.log('Button clicked');
      }
    
      render() {
        return <button onClick={this.handleClick}>Click Me</button>;
      }
    }

---

(4) 代码简洁性

• 函数组件：

  • 代码更简洁，逻辑更清晰。
  • 适合小型组件或逻辑简单的场景。

• 类组件：

  • 代码相对冗长，尤其是需要处理 this 绑定和生命周期方法时。
  • 适合复杂组件或需要精细控制生命周期的场景。

---

(5) 性能

• 函数组件：

  • 通常性能更好，因为函数组件更轻量。
  • 通过 React.memo 可以进一步优化性能。

• 类组件：

  • 性能稍差，因为类组件需要实例化，且生命周期方法可能引入额外开销。

---

4. 如何选择？

• 使用函数组件：

  • 大多数情况下，优先使用函数组件。
  • 逻辑简单、状态少、不需要复杂生命周期的场景。
  • 使用 Hooks 可以覆盖大部分需求。

• 使用类组件：

  • 需要精细控制生命周期的场景。
  • 旧项目维护，或者团队习惯使用类组件。

---

5. 总结

特性	函数组件	类组件
状态管理	使用 useState	使用 this.state 和 this.setState
生命周期	使用 useEffect	使用生命周期方法（如 componentDidMount）
this 绑定	无 this，直接使用变量和函数	需要处理 this 绑定
代码简洁性	更简洁	相对冗长
性能	更轻量，性能更好	稍差

---

6. 趋势

• 函数组件 + Hooks 是 React 的未来，官方推荐优先使用。
• 类组件仍然有用，尤其是在维护旧代码时。

---