“Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。”

一、react为什么要使用hooks？

1. 从组件中提取状态逻辑，且在不需要修改组件结构下复用逻辑
2. 将组件中将相互关联的部分拆分为更小的函数，而不需要全部堆叠在组件的生命周期中。并且Hooks的执行并非完全按照组件生命周期去执行的，可以根据开发需求自定执行时刻。
3. 降低学习成本，不需要过多地去学习class语法

二、有哪些常用的hooks？他们的作用分别是什么？他们是如何模拟生命周期的？

useState

用于给函数组件添加内部state状态

useEffect

在DOM更新之后执行操作

...
useEffect(() => {
        console.log('执行useEffect')
    return function() {
        console.log('组件卸载')
    }
})
...

useEffect 如何在函数组件中模拟生命周期:

1. 默认情况下，它在第一次渲染之后和每次更新之后都会执行，即console.log('执行useEffect')在组件componentDidMount、componentDidUpdate时会执行

2. 若useEffect返回一个函数，则这个函数是组件的q

跳过effect进行性能优化

使用useEffect(()=>{}, [])的第二参数，只有当传入第二个参数中数据发生变化时，才执行useEffect里的操作。

// 只有组件初始化，挂载时才执行useEffect里的操作
...
useEffect(()=>{...}, [])
...

三、什么是react的合成事件？与原生事件有什么区别？

React内部自己实现了一套事件注册、分发、存储、重用的逻辑。

合成事件：

在虚拟DOM转化为真实DOM时，将事件全部注册在根节点上。当事件触发时，事件从子节点不断冒泡到根节点上，根节点使用dispatchEvent同步分发事件处理函数给对应的子节点，子节点同步执行事件处理函数。

• 原生事件是由DOM派发的，并通过event loop异步调用事件处理程序，而dispatchEvent()则是同步调用事件处理程序。
• 合成事件兼容了跨浏览器问题

参考：

www.jianshu.com/p/322e635ad…

juejin.cn/post/700512…

developer.mozilla.org/zh-CN/docs/…

四、react的父子组建如何通信？

父传子：通过props进行传值

function parentCom(props) {
    return (
        <>
            // 父组件通过prop传值
            <childCom p1={123}></childCom>
        </>
    )
    
}
function childCom(props) {
    // 通过props.p1取出父组件传过来的值
    const num = props.p1
    ....
}

子传父：父组件传递函数prop给子组件，子组件调用函数，传递参数给父组件

function parentCom(props) {
    function say(v) {
        console.log('子组件传过来的值是', v)
    }
    return (
        <>
            <childCom pFunc={say}></childCom>
        </>
    )
    
}
function childCom(props) {
   props.pFunc('hellow')
    ....
}