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

1、useRef

useRef用于在组件的多次渲染之间存储持久值，类似于类组件中的实例属性。
useRef有以下几个特点：

• useRef返回的ref对象在组件的生命周期内保持不变。当组件重新渲染时，useRef返回的引用不会发生变化。这意味着可以在组件的多次渲染之间存储数据，而不会触发重新渲染。
• useRef可以用于在函数组件中存储任意可变值，不仅限于DOM引用。它可以存储函数、对象、数组等。
• useRef通过current属性访问存储的值。current属性是一个可变的值，可以在组件的整个生命周期中进行读取和更新。

以下是一个基本使用的示例：

import React, { useRef } from 'react';
function Example() {
  //创建了一个ref对象countRef,并将初始值设置为0
  const countRef = useRef(0);
  const handleClick = () => {
    countRef.current += 1;
    console.log(countRef.current);
  };
  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

当然，我们也可以使用useRef引用dom：

import React, { useRef } from 'react';
function Example() {
  const myRef = useRef();
  const handleClick = () => {
    //myRef.current来获取到DOM元素的引用，然后进行操作，例如修改样式、添加事件监听器等
    myRef.current.style.backgroundColor = 'red';
  };
  return (
    <div>
      <div ref={myRef}>
        {/* ... */}
      </div>
      <button onClick={handleClick}>Change Color</button>
    </div>
  );
}

2、useMemo

useMemo用于在函数组件中缓存计算结果。它接受一个依赖数组和一个计算函数，并返回计算结果。只有在依赖数组发生变化时，useMemo才会重新计算并返回新的结果，否则会直接返回上一次的缓存结果。
使用useMemo有以下几个特点：

• useMemo可以用来缓存一些昂贵的计算结果，避免在每次渲染时都进行重复计算。这可以提高性能并减少不必要的计算。
• 通过指定依赖数组，可以控制在依赖数组发生变化时才重新计算结果。如果依赖数组为空数组[]，则计算只会在初始渲染时进行一次，并且不会重新计算。
• useMemo适用于计算结果的值依赖于一些不会频繁变化的数据，例如常量、props或state等。

以下是一个基本使用的示例：

import React, { useMemo } from 'react';
function Example({ value1, value2 }) {
  const result = useMemo(() => {
    // 进行一些昂贵的计算
    console.log("Calculating...");
    return value1 + value2;
  }, [value1, value2]);//依赖数组包括了value1和value2，只有当它们的值发生变化时，才会重新计算结果。
  return <div>Result: {result}</div>;
}

3、useReducer

useReducer用于在函数组件中管理复杂的状态逻辑。它可以替代useState来处理具有复杂状态转换的场景，并提供了一种更好的管理状态的方式。

基本语法如下：

// 使用useReducer需要传入一个reducer函数和initialState初始状态
//reducer函数接收两个参数：当前的状态和一个action对象，并根据action的类型来更新状态。它返回一个新的状态。
//useReducer返回一个包含当前状态和dispatch函数的数组。
//通过调用dispatch函数并传入一个action对象，可以触发状态的更新。
const [state, dispatch] = useReducer(reducer, initialState);

以下是一个基本使用的示例：

import React, { useReducer } from 'react';
function reducer(state, action) {//将当前状态和action作为参数，并根据action的类型来更新状态
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error(`Unsupported action type: ${action.type}`);
  }
}
function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });//传入reducer函数和初始状态对象{ count: 0 }
  const handleIncrement = () => {
    dispatch({ type: 'increment' });
  };
  const handleDecrement = () => {
    dispatch({ type: 'decrement' });
  };
  return (
    <div>
      Count: {state.count}
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
}

useReducer适用于以下几种场景：

• 状态逻辑较为复杂，包含多个相关联的状态或需要根据当前状态进行状态转换的情况。
• 状态之间有复杂的依赖关系，需要在状态更新时进行复杂计算。
• 需要在组件层级之间共享状态和逻辑的情况，可以通过Context传递dispatch函数和state。