Study Notes

React useMemo Hook

useMemo 它在每次重新渲染的时候能够缓存计算的结果。

const cachedValue = useMemo(calculateValue, dependencies)

它接受了两个参数：

第一个是一个无参数函数，返回所需缓存的结果 () => {}

第二个是由响应式变量组成的依赖数组 [dependencies]

react会在首次渲染的时候执行一次函数，并缓存结果，后面在重新渲染的时候，如果dependencies没有变化，则不会执行函数，而是直接返回上一次缓存的结果，就不需要重新计算

如果没有参数，每次重新渲染都会计算新的值

·组件卸载会丢弃缓存值

例子

import { useMemo, useState } from "react";

首先自定义一些todos数据

const todosData: string[] = [
  "Todo 1",
  "Todo 2",
  "Todo 3",
  "Todo 4",
  "Todo 5",
  "Todo 6",
  "Todo 7",
  "Todo 8",
];

自定义对于todos的hook，实现添加、移除、筛选的功能

const useTodos = () => {
  const [todos, setTodos] = useState<string[]>(todosData);

  const addTodo = (todo: string) => setTodos([...todos, todo]);

  const removeTodo = (index: number) => {
    setTodos(todos.filter((_, i) => i !== index));
  };

  const filterTodos = (todos: string[], num: number) => {
    const todesList = todos.slice(0, num);
    console.log(todesList);
    return todesList;
  };

  return { todos, addTodo, removeTodo, filterTodos };
};

而组件函数是这样的

export const Todos = () => {
  const { todos, addTodo, removeTodo, filterTodos } = useTodos();

  const [num, setNum] = useState<number>(5);
  
  const todosList = useMemo(() => filterTodos(todos, num), [todos, num]);

  const [todoIndex, setTodoIndex] = useState<number>(0);

  // 一个触发重新渲染的状态
  const [text, setText] = useState<string>("xxx");

  const todosItems = todosList.map((todo, index) => {
    return (
      <div key={index}>
        <span>{todo}</span>
        <button onClick={() => removeTodo(index)}>Remove</button>
      </div>
    );
  });

  return (
    <div>
      <p>{text}</p>
      <button onClick={() => setText("触发重新渲染"+ new Date())}>Change</button>
      <p>当前显示前{num}个todo</p>
      <button
        onClick={() => {
          addTodo(`new todo ${todoIndex + 1}`);
          setTodoIndex(todoIndex + 1);
        }}
      >
        Add
      </button>
      {todosItems}
      <button onClick={() => setNum(num + 5)}>Load More</button>
    </div>
  );
};