一文带你快速了解React常用hook useMemo、useCallback、useImmer 特点与使用

茶老师
581 阅读3分钟

随着React框架的普及，越来越多的开发者加入React的怀抱，友好而强大的hooks API是这款UI库最大的魅力之一。其中useMemo、useCallback、useImmer是React开发中应用广泛的hooks，它们有共同之处也有不同之处，本文带大家简单介绍下React几个常用hook的特点与使用方式。

一、useMemo

useMemo能够帮助我们使用React hooks有效地记住特定函数的返回值。它有助于避免在渲染期间做不必要的计算，当需要重渲染时，只需要获取预缓存的计算结果，因此可以提高渲染性能，提高应用的反应速度与流畅性。

示例代码：

const [x, setX] = useState(2);
const [y, setY] = useState(6);

const result = useMemo(() => {
  return x + y;
}, [x, y]);

// ...

//在另一块代码中使用
return <div>{result}</div>

在上面的代码中，我们使用 useMemo 包裹了 x 加 y 的计算，实际上它会在 render 前就缓存 x 加 y 的结果，然后在实际渲染时，如果 x 和 y 发生变化，我们将重新进行计算，否则就直接获取缓存的值，这样可以减少不必要的浪费，有效提高性能。

二、useCallback

useCallback可以帮助我们有效地缓存函数，作用与 useMemo 类似，但适用范围更广，因为它不仅仅限于缓存简单的变量，也可以缓存整个函数，这样当依赖的值发生变化时，我们只需要重新设置缓存的函数，而不需要重新构建函数。

示例代码：

const someValue = 2;

// 不使用 useCallback 时
function computeSomething() {
  console.log('compute');
  return someValue * 2;
}

// 使用 useCallback 时
const computeSomething = useCallback(() => {
  console.log('compute');
  return someValue * 2;
}, [someValue])

从上面的代码可以看出，当我们使用 useCallback 包裹函数时，它会缓存该函数以便后续调用，这样可以减少不必要的函数构建，既可以提高效率，也可以提高不需要学习的复杂度。

三、useImmer

useImmer是一个可以更容易地执行不可变数据更新的hooks，它结合了useState和useReducer两个hook的优点，能够更好的让我们的业务逻辑变得更加清晰，而又不会因为无法更新数据而让代码包裹在大量的if else语句下。

示例代码：

const [data, setData] = useImmer({
  count: 0,
  name: 'John',
  isActive: true
});

//添加一项
setData(draft => {
  draft.name = 'Will';
});

//减少count
setData(draft => {
  draft.count -= 1;
});

从上面的代码可以看出，使用useImmer，我们创建了一个useImmer状态，它接收一个初始值，我们可以在函数中访问这个当前状态，如果需要更新状态，只需要在回调函数中简单地编写新的属性即可。

总结

使用Memo、Callback和Immer可以有效地提高React应用的性能，他们是妙手回春的利器，可以让我们的业务代码变得更加清晰，可以减少不必要的计算，非常值得探索。

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情

avatar
文章
阅读
粉丝