React useMemo和useCallback的使用场景

usememo

我们知道当父组件发生重新渲染时，其所有（状态、局部变量等）都是新的。一旦子组件依赖于父组件的某一个对象变量，那么无论对象是否发生变化，子组件拿到的都是新的对象，从而使子组件对应的 diff 失效，依旧会重新执行该部分逻辑。在下面的例子中，我们的副作用依赖项中包含了父组件传入的对象参数，每次父组件发生更新时，都会触发数据请求。

react hooks 给我们提供了解决方案，usememo 允许我们缓存传入的对象，仅当依赖项发生变化时，才重新计算并更新相应的对象。

usecallback

react hooks 在数据流上带来的变化有两点：一是支持更友好的使用 context 进行状态管理，避免层级过多时向中间层承载无关参数；二是允许函数参与到数据流中，避免向下层组件传入多余的参数。

usecontext 作为 hooks 的核心模块之一，可以获取到传入 context 的当前值，以此达到跨层通信的目的。react 官网有着详细的介绍，需要关注的是一旦 context 值发生改变，所有使用了该 context 的组件都会重新渲染。为了避免无关的组件重绘，我们需要合理的构建 context ，比如从第一节提到的新思维模式出发，按状态的相关度组织 context，将相关状态存储在同一个 context 中。

在过去，如果父子组件用到同一个数据请求方法 getdata ，而该方法又依赖于上层传入的 query 值时，通常需要将 query 和 getdata 方法一起传递给子组件，子组件通过判断 query 值来决定是否重新执行 getdata。

在 react hooks 中 usecallback 支持我们缓存某一函数，当且仅当依赖项发生变化时，才更新该函数。这使得我们可以在子组件中配合 useeffect ，实现按需加载。通过 hooks 的配合，使得函数不再仅仅是一个方法，而是可以作为一个值参与到应用的数据流中。

以上就是react usememo和usecallback的使用场景的详细内容，更多关于react usememo和usecallback的使用的资料请关注其它相关文章！