【边做边学】系统解读一下React Hooks

React Hooks 是 React 16.8 版本引入的新特性，它提供了一种在函数式组件中使用状态和其他 React 特性的方式。相比于类组件的生命周期方法，Hooks 更简单、灵活，并且能够更好地复用逻辑。

当使用 React Hooks 时，我们通常是在函数式组件中使用一些特定的函数，这些函数称为 Hooks。Hooks 提供了一种在函数式组件中使用状态和其他 React 特性的方式，而无需编写类组件。下面是一对常用的 React Hooks：

1. useState Hook:

• 作用： 用于在函数式组件中声明和初始化状态。
• 用法： const [state, setState] = useState(initialState);
• 示例：

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

• 2. useEffect Hook:
• 作用： 用于在函数式组件中执行副作用操作，替代了类组件的生命周期方法。
• 用法： useEffect(() => { /* effect */ }, [dependencies]);
• 示例：

import React, { useEffect } from 'react';
 
function ExampleComponent() {
  useEffect(() => {
    // 在组件挂载或更新后执行的操作
    console.log('Component did mount or update');
    // 清理操作可以在返回的函数中执行
    return () => {
      console.log('Component will unmount');
    };
  }, []); // 传递一个空数组作为第二个参数表示只在挂载和卸载时执行
 
  return <p>Hello, Hooks!</p>;
}

• React Hooks 的核心思想是将组件的逻辑分离成可复用的函数，并且这些函数可以通过 Hook 直接在函数式组件中使用。这使得代码更加简洁、可读，并且能够更好地共享逻辑。Hooks 提供了一种更灵活、更直观的方式来管理组件的状态和生命周期。在使用 Hooks 时，务必遵循它们的规则，比如在顶层使用，不要在循环、条件语句或嵌套函数中调用。