React Hooks解析(五)

64 阅读2分钟

useContext的使用

在之前的开发中,我们要在组件中使用共享的Context有两种方式:

类组件可以通过 类名.contextType = MyContext方式,在类中获取context;

多个Context或者在函数式组件中通过 MyContext.Consumer 方式共享context;

但是多个Context共享时的方式会存在大量的嵌套:

Context Hook允许我们通过Hook来直接获取某个Context的值;;

useReducer

很多人看到useReducer的第一反应应该是redux的某个替代品,其实并不是。

useReducer仅仅是useState的一种替代方案:

在某些场景下,如果state的处理逻辑比较复杂,我们可以通过useReducer来对其进行拆分;

或者这次修改的state需要依赖之前的state时,也可以使用;

数据是不会共享的,它们只是使用了相同的counterReducer的函数而已。

所以,useReducer只是useState的一种替代品,并不能替代Redux。

useCallback

useCallback实际的目的是为了进行性能的优化。

如何进行性能的优化呢?

useCallback会返回一个函数的 memoized(记忆的) 值;

在依赖不变的情况下,多次定义的时候,返回的值是相同的;

案例

案例一:使用useCallback和不使用useCallback定义一个函数是否会带来性能的优化;

案例二:使用useCallback和不使用useCallback定义一个函数传递给子组件是否会带来性能的优化;

通常使用useCallback的目的是不希望子组件进行多次渲染,并不是为了函数进行缓存;

useMemo

useMemo实际的目的也是为了进行性能的优化。

如何进行性能的优化呢?

useMemo返回的也是一个 memoized(记忆的) 值;

在依赖不变的情况下,多次定义的时候,返回的值是相同的;

案例:

案例一:进行大量的计算操作,是否有必须要每次渲染时都重新计算;

案例二:对子组件传递相同内容的对象时,使用useMemo进行性能的优化 开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 20 天,点击查看活动详情