Hooks 是 React 的全新功能，它能让函数组件拥有状态和生命周期

2024-01-11 07:46:14

Hooks：React 函数组件的强大补充

在 React 的世界中，Hooks 是一项突破性的创新，它彻底改变了我们使用函数组件的方式。Hooks 赋予函数组件强大的状态管理和生命周期控制能力，使其与基于类的组件不相上下。

传统技术：HOC 和 Render Props

在 Hooks 出现之前，我们使用高阶组件（HOC）或 Render Props 来弥补函数组件的不足。

高阶组件 (HOC) 通过包裹原始组件来增强其功能。例如，我们可以创建一个 HOC 来添加状态管理功能：

const withState = (initialState) => (Component) => {
  return class extends Component {
    state = initialState;
    render() {
      return <Component {...this.props} state={this.state} />;
    }
  };
};

Render Props 通过将函数作为属性传递给子组件，允许父组件控制子组件的渲染行为：

const Button = (props) => {
  return (
    <button onClick={props.onClick}>
      {props.children}
    </button>
  );
};

Hooks：简洁、强大、易学

Hooks 完全改变了游戏规则。它引入了两个关键钩子函数：

useState 用于管理组件状态：

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

useEffect 用于处理生命周期事件和副作用：

useEffect(() => {
  console.log(`The count is now ${count}`);
}, [count]);

使用 Hooks，我们可以编写功能强大的函数组件，代码比 HOC 和 Render Props 更简洁、更强大：

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

  useEffect(() => {
    console.log(`The count is now ${count}`);
  }, [count]);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};