每天一道面试题(9) - react hooks的优点

在社招中, 如果项目经验中有react hooks, 面试官就经常会问到这个问题.

今天就来系统的总结一下回答这个问题的要点, react hooks的主要优点有以下几点

更容易复用代码

如果类组件要复用代码, 经常需要高阶组件.
但是高阶组件HOC有两个问题

• HOC需要在原组件上进行包裹或者嵌套，如果大量使用 HOC，将会产生非常多的嵌套，这让调试变得非常困难。
• HOC可以劫持 props，在不遵守约定的情况下也可能造成冲突。

在react hooks中, 自定义hooks可以将组件中类似的状态逻辑抽取出来, 做成一个useHook. 这样在每次调用时就会有一份独立的存储空间. 而且hooks实现起来代码量比较少, 维护更容易

副作用统一数据, 没有生命周期

react hooks之前, react有好多生命周期, 比如经常通过
componentWIllReceiveProps处理props变化的情况, 经常使用shouldComponentUpdate处理组件是否需要更新的优化

但是在react hooks下, 没有生命周期函数, 几乎所有的操作都在useEffect中进行处理. 而且这个useEffect的执行时机是在更新渲染更新之后异步执行的, 做到了数据处理逻辑和渲染分离

这里加一道额外的面试题
解释一下useEffect和useLayoutEffect的区别

举个简单的例子, 初始值为 hello world 的一个变量, 在useEffect和useLayoutEffect中分别被更改为了world hello. 会有什么变化?

useEffect 是渲染完之后异步执行的，所以会导致 hello world 先被渲染到了屏幕上，再变成 world hello，就会出现闪烁现象。而 useLayoutEffect 是渲染之前同步执行的，所以会等它执行完再渲染上去，就避免了闪烁现象。也就是说我们最好把操作 dom 的相关操作放到 useLayouteEffect中去，避免导致闪烁。

代码可读性更强

之前使用setstate({a:1}), 现在只需要setA(1), 会让函数组件更简洁, 可读性更强.

react hooks的缺点

当然react hooks也有几个缺点

• useEffect滥使用, 导致代码混乱, 这个只能在开发时注意useEffect的使用, 看看后面react团队会不会优化
• react hooks会有闭包问题

具体可以见链接 react hooks的闭包陷阱(setInterval不生效)问题