Hooks相关面试题

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本质上是一个函数组件。函数组件只能写一些简单逻辑，没有状态保存。需要

        是一个纯函数