React Hook 基础学习
前言
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
Hook 允许我们按照代码的用途分离
他们
熟悉API
hook | 而外需要注意点 |
---|---|
useState | 一般来说,在函数退出后变量就会”消失”,而 state 中的变量会被 React 保留 |
useEffect | 1. 可以让你在函数组件中执行副作用操作 2. 会在每次渲染后都执行 3. React 保证了每次运行 effect 的同时,DOM 都已经更新完毕 |
useReducer | 1. useState 的替代方案 。2. 它接收一个形如 (state, action) => newState 的 reducer,并返回当前的 state 以及与其配套的 dispatch 方法 |
useCallback | 1. 返回一个 memoized 回调函数。 2. 该回调函数仅在某个依赖项改变时才会更新 3. 返回缓存的值(函数) |
useMemo | 1. 返回一个 memoized 回调函数。 2. 该回调函数仅在某个依赖项改变时才会更新 3. 返回缓存的值(变量) |
useRef | 1. 当 ref 对象内容发生变化时,useRef 并不会通知你。。 2. 变更 .current 属性不会引发组件重新渲染 3.很方便地保存 任何可变值 |
useImperativeHandle | 1. 可以让你在使用 ref 时自定义暴露给父组件的实例值 2. useImperativeHandle 应当与 forwardRef 一起使用 |
快问快答
useEffect
- 那些常见的副作用
数据获取,设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。
- useEffect 做了什么 ?
保存你传递的函数(我们将它称之为 “effect”),并且在执行 DOM 更新之后调用它
- 为什么在组件内部调用 useEffect ?
将 useEffect 放在组件内部让我们可以在 effect 中直接访问 count state 变量(或其他 props)
- 为什么要在 effect 中返回一个函数 ?
这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数
- React 何时清除 effect ?
React 会在组件卸载的时候执行清除操作
useReducer
- 为什么不能直接修改 data 的值?(
同useState
)
reducer处理的state对象必须是immutable,这意味着永远不要直接修改参数中的state对象,reducer函数应该每次都返回一个新的state object
- state为什么需要
immutable
?
我们上文提到过reducer需要保持幂等性,更加可预测、可测试。如果每次返回同一个state,就无法保证无论执行多少次都是相同的结果
- React 使用 什么 比较算法 来比较 state ?
Object.is
参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is
衍生 问题
1. Object.is 和 == 的区别
2. Object.is 和 === 的区别
3. == 和 === 的区别
备注: Object.is 不会做类型隐式转换 (即 先判断类型 在判断值)
useMemo / useCallback
- useMemo和useCallback都会在组件第一次渲染的时候执行,之后会在其依赖的变量发生改变时再次执行;
- 并且这两个hooks都返回缓存的值,useMemo返回缓存的变量,useCallback返回缓存的函数。
传入 useMemo 的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作,诸如副作用这类的操作属于 useEffect 的适用范畴,而不是 useMemo
useRef
- useRef() 和自建一个 {current: …} 对象的唯一区别是?
useRef 会在每次渲染时返回同一个 ref 对象