1、这两个hook是为了解决什么问题？

function组件和class组件性能优化其实要优化的点是相似的。

class组件性能优化的点：

• 调用this.setState，就会触发组件的从新渲染，无论前后state是否雷同
• 父组件更新，子组件也会自动更新

在class组件中，咱们能够应用immutable去创立数据，用继承pureComponent的形式对props浅比拟和用shouldComponentUpdate判断前后的 props 和 state,如果没有发生变化,就返回false来阻止更新。

然而在function组件中，就没有shouldComponentUpdate这个生命周期了，就无奈判断前后的props是否雷同，从而是不是要从新渲染。useEffect函数也没有辨别是以后是mount还是update,这样一来，就意味着，每次组件的更新都会执行其简单的逻辑，性能的耗费将是十分大的。

所以为了解决这个问题，useCallback和useMemo就呈现了。

useCallback、useMemo、useEffect这三者的参数是统一的。useEffect的第一个参数effect，是能够解决副作用的。而useCallback和useMemo是不能够解决副作用的。

useCallback 和 useMemo 都会在组件第一次渲染的时候执行，之后会在其依赖的变量产生扭转时再次执行；并且这两个hooks都返回缓存的值，useMemo 返回缓存的变量，useCallback 返回缓存的函数。

2、React.memo()和这两个hook的区别

在class组件的时代，咱们通过上面两个办法去做性能优化。

• pureComponent，对props进行浅比对
• shouldComponentUpdate，对props和state进行比拟，依据返回值来解决是否要更新

对于还没有hook的function组件，咱们也有办法对其进行性能优化。react提供了React.memo这样的高阶组件。它与pureComponent和类似，然而，这个高阶组件并不适用于class组件，而只为function组件服务。相比于 PureComponent ，React.memo() 能够反对指定一个参数，能够相当于 shouldComponentUpdate 的作用，因而 React.memo() 绝对于 PureComponent 来说，用法更加不便。

function MyComponent () {} function isEqual(prevProps, nextProps) {  /*  如果nextProps和prevProps的后果雷同，那么就会返回true  不相等，就返回false  */}export default React.memo(MyComponent, isEqual);

看下面的代码，其实，用法很简略。在 Function Component 之外，在申明一个 isEqual 办法来判断两次 props 有什么不同，如果第二个参数不传递，则默认只会进行 props 的浅比拟。最终 export 的组件，就是 React.memo() 包装之后的组件。在某些状况下，React.memo的第二个参数是必须的。

总的来说，React.memo()办法，是让整个组件要不要re-render，记住这一点很重要，然而，有的时候，咱们想要组件的某一部分要不要re-render，而不是整个组件要不要re-render，怎么办？那就用就是useMemo()。

3、useMemo() 细粒度性能优化

函数签名：

function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T; 

useMemo的第一个参数是一个工厂函数，如果传递了依赖值列表，那么在在依赖值列表发生变化时候，这个工厂函数就会执行。

用法：

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

useMemo() 返回的是一个 memoized 值，只有当依赖项（比方下面的 a,b 发生变化的时候，才会从新计算这个 memoized 值）

memoized 值不变的状况下，不会从新触发渲染逻辑。说到渲染逻辑，须要记住的是 useMemo() 是在 render 期间执行的，所以不能进行一些额定的副操作，比方网络申请等。如果没有提供依赖数组（下面的 [a,b]）则每次都会从新计算 memoized 值，也就会 re-redner。

4、useCallback函数

函数签名：

function useCallback<T extends (...args: any[]) => any>(callback: T, deps: DependencyList): T;

useCallback的第一个参数是一个函数，这个函数也是useCallback去缓存的对象。每次依赖值列表发生变化的时候，useCallback会去更新这个函数，然而并不会去执行。

用法：

const fnA = useCallback(fnB, [a])

useCallback的用法其实和useMemo是一样的，然而他们惟一的区别是，useCallback是缓存了函数。

场景：在开发中，你会遇到这样的场景，须要从父组件中传递一个函数到子组件，如果咱们不必useCallback包裹，那么也就意味着，只有父组件有更新，都会向子组件去传递一个新函数，尽管说每次传递的函数都一样，然而仍旧是俩个不同的对象。然而如果应用了useCallback, useCallback 就会依据依赖项是否发生变化，从而决定是否返回一个新的函数，函数外部作用域也随之更新。

5、总结

• 在子组件不须要父组件的值和函数的状况下，只须要应用 React.memo 函数包裹子组件即可。
• 如果有函数传递给子组件，应用 useCallback
• 如果有值传递给子组件，应用 useMemo
• useEffect、useMemo、useCallback 都是自带闭包的。也就是说，每一次组件的渲染，其都会捕捉以后组件函数上下文中的状态(state, props)，所以每一次这三种hooks的执行，反映的也都是以后的状态，你无奈应用它们来捕捉上一次的状态。对于须要捕捉上一次状态值的状况，咱们应该应用 ref 来拜访。