useCallback、useMemo 分析 & 差别 about blog HOT 13 OPEN

这篇文章是我看到useCallback和useMemo讲的比较好的，可以转载否？另外，直接加上codepen的代码例子，就更好了

from blog.

如果useCallback或者useMemo的依赖是引用对象呢？比如Object/Array，如果没有记错的话，每次它们都会触发重新计算

from blog.

这篇文章是我看到useCallback和useMemo讲的比较好的，可以转载否？另外，直接加上codepen的代码例子，就更好了

嗯，可以转载的哈。

上面的代码部份是有codepen演示的哈，仔细看应该能发现😀

from blog.

const handleCount = React.useCallback(() => setCount(count => count + 1), [count]);

该句加了[count]之后，handleCount每次的值都会变。这代码其实没有做到性能优化。

from blog.

const handleCount = React.useCallback(() => setCount(count => count + 1), [count]);

该句加了[count]之后，handleCount每次的值都会变。这代码其实没有做到性能优化。

是的，正确的应该是这样使用
const handleCount = React.useCallback(() => setCount(count => count + 1), []);

from blog.

const handleCount = React.useCallback(() => setCount(count => count + 1), []);

这样还是有问题，useCallback绑定的回调函数拿不到最新的count的值

from blog.

@monsterooo

我同意@AlexZhong22c的说法。

• 这个依赖是要写的，useCallback只是说当依赖不变的时候，返回同一个函数，但是不能省略依赖的。

• useCallback应该是说避免了其他的state对当前函数的影响。这个count的依赖项我认为是必须要的。

• 另外呢，还可以用useReducer去维护一个局部的redux，dispatch去做，见useReducer

from blog.

const handleCount = React.useCallback(() => setCount(count => count + 1), []);

这样还是有问题，useCallback绑定的回调函数拿不到最新的count的值

感觉你还是没理解，count可以拿到最新的值(闭包作用域)， 在这个例子中已经很明确的展示出来了。

如果还有撒疑问可以继续讨论

from blog.

@monsterooo

我同意@AlexZhong22c的说法。

• 这个依赖是要写的，useCallback只是说当依赖不变的时候，返回同一个函数，但是不能省略依赖的
• useCallback应该是说避免了其他的state对当前函数的影响。这个count的依赖项我认为是必须要的。
• 另外呢，还可以用useReducer去维护一个局部的redux，dispatch去做，见useReducer

我看错了， setCount(count => count + 1) setCount是个函数，可以拿到最新的值。相当于以前的setState(prevState => prevState.count + 1)。
不过，useCallback(() => setCount(count => count + 1), [])第二个参数写空数组不合适的吧，毕竟官方文档描述认为函数中引用的项都应该出现在依赖中

from blog.

@monsterooo

我同意@AlexZhong22c的说法。

• 这个依赖是要写的，useCallback只是说当依赖不变的时候，返回同一个函数，但是不能省略依赖的
• useCallback应该是说避免了其他的state对当前函数的影响。这个count的依赖项我认为是必须要的。
• 另外呢，还可以用useReducer去维护一个局部的redux，dispatch去做，见useReducer

我看错了， setCount(count => count + 1) setCount是个函数，可以拿到最新的值。相当于以前的setState(prevState => prevState.count + 1)。
不过，useCallback(() => setCount(count => count + 1), [])第二个参数写空数组不合适的吧，毕竟官方文档描述认为函数中引用的项都应该出现在依赖中

最佳实践还是按照官方的来没问题，因为那个比较适合大多数情况。

像我们讨论的这种情况(优化依赖和缓存函数)，不是应用特别大或者组件特别多的时候不会有太大的问题。

但是如果我们在写代码之前就知道并且做一些优化，对于以后可能会出现的性能问题就会有所避免。

from blog.

React.useEffect(() => {
ref.current = value;
});
这些尽量都写上依赖，其实不写和写也是一样的

from blog.

https://jancat.github.io/post/2019/translation-usememo-and-usecallback/

useCallback 和 useMemo的成本是：对于你的同事来说，你使代码更复杂了；你可能在依赖项数组中犯了一个错误，并且你可能通过调用内置的 hook、并防止依赖项和 memoized 值被垃圾收集，而使性能变差。如果你获得了必要的性能收益，那么这些成本都是值得承担的，但最好先测量一下。

from blog.

如果useCallback或者useMemo的依赖是引用对象呢？比如Object/Array，如果没有记错的话，每次它们都会触发重新计算

同问，如果是对象的话会怎么比较呢？

from blog.