React hooks，你必须知道的那些事

2024-01-23 09:58:18

使用 React hooks 重构组件

在 React 中，我们经常需要对组件进行重构，以提高其性能和可维护性。传统上，我们会使用类组件来定义组件的状态和生命周期方法。然而，随着 React hooks 的出现，我们现在可以使用函数式组件来管理组件的状态和行为，而无需使用类组件。

useState 和 useEffect

useState 和 useEffect 是两个最常用的 React hooks。useState 用于管理组件的状态，而 useEffect 用于在组件生命周期中执行某些操作。

重构示例

为了演示如何使用 React hooks 重构组件，我将使用一个简单的示例。我们有一个类组件，它显示一个计数器并允许用户增加计数。

class Counter extends React.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>
    );
  }
}

我们可以使用函数式组件和 React hooks 来重构这个组件：

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log(`Count: ${count}`);
  }, [count]);

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

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