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

资料

• 常见问题：https://zh-hans.reactjs.org/docs/hooks-faq.html
• useReducer 参考：https://blog.csdn.net/zzdfc/article/details/97274206