React高级Hook

useReducer 

useReducer 是 React 提供的一个 Hook，用于在函数组件中使用 reducer 函数来管理组件的 state。它类似于 Redux 中的 reducer，但仅用于组件内部的状态管理。useReducer 可以使复杂的状态逻辑更加清晰和可维护。

基本用法

useReducer 接收一个 reducer 函数和一个初始状态，并返回当前的 state 和一个 dispatch 函数。你可以通过 dispatch 函数来触发 reducer 函数，并传递一个 action 对象，reducer 根据 action 来更新 state。

参数

1. reducer (Function): 一个纯函数，它接收当前的 state 和一个 action 对象，并返回一个新的 state。
2. initialState (any): 组件的初始状态。
3. [init (Function)] (可选): 一个可选的初始化函数，如果提供，它将在 reducer 调用之前被调用，以生成初始 state。它接收 initialState 并返回经过初始化的 state。

返回值

1. state (any): 当前的状态。
2. dispatch (Function): 一个 dispatch 函数，它接收一个 action 对象，并调用 reducer 函数来更新 state。

示例

下面是一个简单的计数器组件示例，展示了如何使用 useReducer。

seReducer 是 React 提供的一个 Hook，用于在函数组件中使用 reducer 函数来管理组件的 state。它类似于 Redux 中的 reducer，但仅用于组件内部的状态管理。useReducer 可以使复杂的状态逻辑更加清晰和可维护。

基本用法

useReducer 接收一个 reducer 函数和一个初始状态，并返回当前的 state 和一个 dispatch 函数。你可以通过 dispatch 函数来触发 reducer 函数，并传递一个 action 对象，reducer 根据 action 来更新 state。

参数

1. reducer (Function): 一个纯函数，它接收当前的 state 和一个 action 对象，并返回一个新的 state。
2. initialState (any): 组件的初始状态。
3. [init (Function)] (可选): 一个可选的初始化函数，如果提供，它将在 reducer 调用之前被调用，以生成初始 state。它接收 initialState 并返回经过初始化的 state。

返回值

1. state (any): 当前的状态。
2. dispatch (Function): 一个 dispatch 函数，它接收一个 action 对象，并调用 reducer 函数来更新 state。

示例

下面是一个简单的计数器组件示例，展示了如何使用 useReducer。

import React, { useReducer } from 'react';  
  
// 定义 action 类型  
const increment = () => ({ type: 'INCREMENT' });  
const decrement = () => ({ type: 'DECREMENT' });  
const reset = () => ({ type: 'RESET' });  
  
// 定义 reducer 函数  
const counterReducer = (state, action) => {  
  switch (action.type) {  
    case 'INCREMENT':  
      return { count: state.count + 1 };  
    case 'DECREMENT':  
      return { count: state.count - 1 };  
    case 'RESET':  
      return { count: 0 };  
    default:  
      throw new Error();  
  }  
};  
  
// 初始状态  
const initialState = { count: 0 };  
  
function Counter() {  
  const [state, dispatch] = useReducer(counterReducer, initialState);  
  
  return (  
    <div>  
      <h1>Count: {state.count}</h1>  
      <button onClick={() => dispatch(increment())}>Increment</button>  
      <button onClick={() => dispatch(decrement())}>Decrement</button>  
      <button onClick={() => dispatch(reset())}>Reset</button>  
    </div>  
  );  
}  
  
export default Counter;

详细说明

1. 定义 action 类型:
   • increment, decrement, reset 是三个返回 action 对象的函数。每个 action 对象都有一个 type 属性，用于在 reducer 中识别 action。
2. 定义 reducer 函数:
   • counterReducer 是一个纯函数，它接收当前的 state 和一个 action 对象，并返回一个新的 state。
   • 根据 action.type，reducer 更新 state。
3. 初始状态:
   • initialState 是组件的初始状态，这里我们设置 count 为 0。
4. 使用 useReducer:
   • 在 Counter 组件中，使用 useReducer Hook 传入 counterReducer 和 initialState。
   • useReducer 返回当前的 state 和 dispatch 函数。
   • 通过 dispatch 函数调用不同的 action 来更新 state。

复杂示例

在实际应用中，useReducer 通常用于管理更复杂的状态。例如，假设我们有一个待办事项列表。

import React, { useReducer } from 'react';  
  
// 定义 action 类型  
const addTodo = (text) => ({ type: 'ADD_TODO', text });  
const toggleTodo = (id) => ({ type: 'TOGGLE_TODO', id });  
  
// 定义 reducer 函数  
const todoReducer = (state, action) => {  
  switch (action.type) {  
    case 'ADD_TODO':  
      return {  
        ...state,  
        todos: [...state.todos, { id: Date.now(), text: action.text, completed: false }],  
      };  
    case 'TOGGLE_TODO':  
      return {  
        ...state,  
        todos: state.todos.map((todo) =>  
          todo.id === action.id ? { ...todo, completed: !todo.completed } : todo  
        ),  
      };  
    default:  
      throw new Error();  
  }  
};  
  
// 初始状态  
const initialState = { todos: [] };  
  
function TodoApp() {  
  const [state, dispatch] = useReducer(todoReducer, initialState);  
  
  const handleAddTodo = (e) => {  
    const text = e.target.value.trim();  
    if (text) {  
      dispatch(addTodo(text));  
      e.target.value = '';  
    }  
  };  
  
  return (  
    <div>  
      <h1>Todo List</h1>  
      <input type="text" onKeyDown={(e) => e.key === 'Enter' ? handleAddTodo(e) : null} />  
      <button onClick={handleAddTodo}>Add Todo</button>  
      <ul>  
        {state.todos.map((todo) => (  
          <li key={todo.id} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>  
            <span onClick={() => dispatch(toggleTodo(todo.id))}>  
              {todo.text}  
            </span>  
          </li>  
        ))}  
      </ul>  
    </div>  
  );  
}  
  
export default TodoApp;

 useMemo

useMemo是React提供的一个自定义Hook，它允许你在渲染过程中执行一些昂贵的计算，并且仅在依赖项发生变化时重新计算。这有助于优化性能，避免在每次渲染时都重新计算相同的数值或对象。

基本语法

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• 第一个参数是一个返回需要记忆值的函数。
• 第二个参数是一个依赖项数组，这个数组中的值会决定何时重新计算记忆值。

使用场景

useMemo适用于以下场景：

• 当你有一个计算成本高昂的值，并且这个值在组件的某些渲染中可能保持不变时。
• 当你想要避免在每次渲染时都重新执行昂贵的计算时。

注意事项

• useMemo主要用于性能优化，不要滥用。
• 只有当你确定计算是昂贵的且结果可以安全地在渲染之间共享时才应该使用。
• useMemo不会阻止渲染，它只会优化计算过程。

使用案例

以下是一个使用useMemo的示例，假设我们有一个React组件，用于显示一个列表中所有项目的名称，并且这个列表可能非常大。我们可以使用useMemo来优化过滤操作，避免在每次渲染时都重新执行过滤逻辑。

import React, { useEffect, useState, useMemo } from 'react';  
  
const LargeListComponent = () => {  
  const [list, setList] = useState([]);  
  const [filterText, setFilterText] = useState('');  
  
  // 模拟一个大型列表的加载  
  useEffect(() => {  
    // 这里通常是从API获取数据，但为了简化，我们使用一个静态数组  
    const largeList = Array.from({ length: 10000 }, (_, i) => ({  
      id: i + 1,  
      name: `Item ${i + 1}`,  
    }));  
    setList(largeList);  
  }, []);  
  
  // 使用useMemo来优化过滤操作  
  const filteredList = useMemo(() => {  
    return list.filter(item =>  
      item.name.toLowerCase().includes(filterText.toLowerCase())  
    );  
  }, [list, filterText]);  
  
  return (  
    <div>  
      <input  
        type="text"  
        value={filterText}  
        onChange={(e) => setFilterText(e.target.value)}  
        placeholder="Filter items..."  
      />  
      <ul>  
        {filteredList.map(item => (  
          <li key={item.id}>{item.name}</li>  
        ))}  
      </ul>  
    </div>  
  );  
};  
  
export default LargeListComponent;

在这个例子中，useMemo接收一个过滤函数和一个依赖项数组[list, filterText]。每当list或filterText发生变化时，useMemo会重新执行过滤函数，并返回一个新的过滤后的列表。如果list和filterText都没有变化，那么useMemo会返回上一次计算的结果，从而避免不必要的过滤操作。

这个优化对于大型列表来说是非常有用的，因为它可以减少不必要的计算量，提高组件的渲染性能。

在React和Vue中，useMemo（React）和computed（Vue）都是用于计算派生状态（或称为“计算属性”）的工具，但它们在使用方式和底层实现上有所不同。

React中的useMemo

useMemo是React的一个Hook，它用于在函数组件中优化性能。当你有一个计算成本高昂的值，并且这个值在组件的某些渲染中可能保持不变时，useMemo可以帮助你避免不必要的计算。

useMemo接收一个创建函数和一个依赖项数组。当依赖项数组中的任何一个值发生变化时，创建函数会重新运行，并返回一个新的值。如果依赖项没有变化，那么useMemo会返回上一次计算的值，从而避免不必要的计算。

需要注意的是，useMemo主要用于性能优化，并且只有在你能确定计算是昂贵的且结果可以安全地在渲染之间共享时才应该使用。

Vue中的computed

在Vue中，computed属性用于声明式地计算派生状态。当你有一个基于组件响应式数据计算出来的值，并且你希望这个值在响应式数据变化时自动更新时，computed是非常有用的。

computed属性可以是基于一个或多个响应式依赖的函数，这些依赖可以是组件的data属性、props或其他computed属性。当这些依赖发生变化时，computed属性会自动重新计算，并且Vue会确保它的值是最新的。

与useMemo不同，computed在Vue中是声明式的，并且它总是会在依赖变化时重新计算，而不是基于性能优化的考虑。此外，computed属性还可以被用作模板中的绑定，并且它们具有缓存行为，这意味着如果依赖没有变化，那么computed属性的值也不会变化。

总结

• useMemo（React）：一个性能优化工具，用于避免不必要的昂贵计算。它返回一个记忆化的值，这个值在依赖项没有变化时保持不变。
• computed（Vue）：一个声明式的计算属性，用于基于响应式依赖计算派生状态。它总是会在依赖变化时重新计算，并且具有缓存行为。