1.为什么会有React Hooks,它解决了什么问题?
完善函数组件的能力,函数组件更适合react组件
组件逻辑复用,Hooks表现更好
class组件复杂
class组件中,相同的逻辑散落在各处。
DidMount和DidUpdate中获取数据
DidMount绑定事件,WillUnMount解绑事件
使用Hooks,相同逻辑可分割到一个一个的useEffect中
2.React Hooks如何模拟组件生命周期?
componentDidMount -- useEffect依赖[]
componentDidUpdate --useEffect无依赖,或者依赖[a, b](响应式值)
componentWillUnMount -- useEffect中返回一个函数fn,下一次执行useEffect之前,就会执行fn,无论更新或卸载
3.如何自定义HOOKS?
4.React Hooks性能优化
useMemo缓存数据
在多次重新渲染中缓存计算结果,主要用于缓存代价昂贵计算的结果。提高性能
useCallback缓存函数:在多次渲染中缓存函数。
跳过组件的重新渲染:默认情况下,当一个组件重新渲染时,react会递归渲染它的所
有子组件,如果子组件包裹在memo中,并且当props和上次渲染相同时,子组件会
跳过重新渲染。但是如果函数作为props传递。则每次重新渲染的props都是不同的。
子组件就会重新渲染。memo对性能的优化永远不会生效。如果将函数用useCallback
包裹起来就可以确保多次重新渲染之间是相同的函数。作为useEffect的依赖也是同样
的道理
memo在组件props没有改变的情况下跳过重新渲染。默认使用object.is()也比较每个prop
相当于class组件的SCU和pureComponent(默认提供scu)
5.使用React Hooks遇到哪些坑?
1.useEffect依赖最好不要是引用类型。把它们移动到组件外或者effect内。
因为hooks每次重新执行都会创建一个新的引用类型。会使Effect比需要的更频繁地重新
同步,甚至导致死循环。
2.useState初始化只会执行一次。之后的re-render都是读取state的值。如果state是根
据props来创建的。当props改变时,并不会自动修改state的值。
3.state是一个快照。在一次渲染中state的值不会改变。无论是在事件处理函数中还是
effect中,或者是定时器中。设置state只会为下一渲染变更state的值。
例如:
const [count, setCount] = useState(0)
setCount(count+ 1)
setTimeout(() => {
console.log(count) // 0
}, 1000)
6.Hooks相比于HOC 和 Render prop有哪些优点?
符合hooks原有规则,容易理解记忆
变量作用域明确
不会产生组件嵌套问题(对比Class组件)
render props本质上是一个函数组件。函数组件只能写一些简单逻辑,没有状态保存。需要
是一个纯函数