react的一些常用hook介绍与基本用法（一）

1、useState

useState用于在函数组件中添加和管理局部状态（state）。
基本用法如下：

const [state, setState] = useState(initialState);
//其中，initialState为初始状态的值，state表示当前状态的变量，
//setState是一个用于更新状态的函数。

一个简单示例

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>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}
export default Counter;

在这个示例中，我们创建了一个计数器组件Counter，通过useState(0)来定义一个名为count的状态变量，初始值为0。setCount函数可以用来更新count的值，通过点击按钮实现计数器的加减操作。
useState返回一个数组，其中第一个元素为当前状态的值（count），第二个元素为更新状态的函数（setCount）。当调用setCount函数时，React会重新渲染组件（但若传入null则不会重新渲染），并将新的状态值传递给count。

2、useEffect

useEffect是一个用于处理副作用的钩子函数，例如订阅事件、数据获取、DOM操作等。
可以把useEffect hook想象成类组件中componentDidMount、componentDidUpdate和componentWillUnmount的结合体
基本用法如下：

useEffect(effectFunction, dependencyArray)
//effectFunction为副作用逻辑的函数。该函数会在组件渲染完成后执行，并且每次组件重新渲染都会执行一次。
//dependencyArray是一个可选参数，用于指定依赖项数组。如果指定了依赖项数组，则只有依赖项发生变化时，才会重新执行effectFunction。如果忽略了依赖项数组，则每次组件重新渲染都会执行effectFunction。

一些简单示例：

1. 相当于componentDidMount。只执行一次副作用逻辑，在组件挂载后执行：

useEffect(() => {
  // 执行副作用逻辑
}, []);

2. 相当于componentDidUpdate。在某个状态(例子中为dependency)发生变化时执行副作用逻辑：

useEffect(() => {
  // 执行副作用逻辑
}, [dependency]);

3. 相当于componentWillUnmount。在组件卸载时执行清理逻辑：

useEffect(() => {
//注意是在return返回函数中处理
  return () => {
    // 执行清理逻辑
  };
}, []);

要注意的点是在useEffect中进行的异步操作，例如定时器等，需要正确地处理异步操作的取消和清理，以避免出现内存泄漏或其他问题

useContext

useContext用于在函数组件中获取并使用父组件传递进来的上下文（Context），可以通过 Context 在组件树中传递数据，避免了在层层传递 props 的麻烦。

使用 useContext 需要先创建一个上下文对象，在父组件中通过 React.createContext 创建，然后可以通过上下文对象提供者 Context.Provider 将数据传递给下层的子组件，而子组件可以通过 useContext 来访问上层组件提供的上下文数据。
简单示例如下：

import React, { createContext, useContext } from 'react';
// 创建上下文对象
const UserContext = createContext();
// 提供器组件
//UserProvider 组件作为上下文的提供者
function UserProvider({ children }) {
  const user = { name: 'John', age: 30 };
  return (
  //UserContext.Provider 将 user 对象传递给子组件。
    <UserContext.Provider value={user}>
      {children}
    </UserContext.Provider>
  );
}
// 子组件
function UserInfo() {
  //UserInfo 组件使用 useContext(UserContext) 来获取并使用父组件提供的上下文数据。
  const user = useContext(UserContext);
  return (
    <div>
      <h2>User Info:</h2>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
    </div>
  );
}
// 父组件
function App() {
  return (
    <UserProvider>
      <UserInfo />
    </UserProvider>
  );
}

使用 useContext，我们可以在函数组件中轻松地访问共享的上下文数据，而不需要通过 props 一层一层地传递下去。这在多个层级嵌套的组件中非常有用，可以提高代码的可读性和维护性。