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
- 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 对象