阿里-前端-二面（已offer）

9月21日19:00 ～ 20:20

唠家常

打开笔试界面开始做题

使用队列进行BFS，查找对应节点

太简单不写了

事件委托题，如何优化

<ul id="list">
        <li class="item">item 1</li>
        <li class="item">item 1</li>
        <li class="item">item 1</li>
        <li class="item">item 1</li>
        <li class="item">item 1</li>
    </ul>
<script>
    const element= document.getElementsByClassName('item')
    for(let i in element) {
        element[i].addEventListener(
          'click', 
          this.target.backgroundColor = '#FF0000'
        )
    }
</script>

React组件随机数引起的闪烁，手写优化（setState random）

const Demo: React.FC<any> = (props) => {
    const [count, setCount] = useState(0)
    useEffect(() => {
        if (count === 0) {
            const ramdomNumber = 100 + Math.random() * 200
            count = Math.random() * 200
        }
    }, [count])

    return (
        <>
            <Button type="primary" onClick={() => setCount(0)}>
                {count}
            </Button>
        </>
    )
}

React组件，this指向题手写优化（setTimeout）

点击两个Button会发生什么

import React from 'react'

export class DemoProps {
    onParamsChange
}

const Demo: React.FC<DemoProps> = (props) => {
    const { onParamsChange } = props
    const bottle = {
        nickname: 'Bottle',
        sayHi: function (value) {
            return onParamsChange(value, this.nickname)
        },
        sayHello: setTimeout(function (value) {
            return onParamsChange(value, this.nickname)
        }, 1000),
    }
    return (
        <>
            <Button type="primary" onClick={bottle.sayHi}>
                hi
            </Button>
            <Button type="primary" onClick={bottle.sayHello}>
                hello
            </Button>
        </>
    )
}

React 一个很长的组件手写怎么优化（组件拆分、自定义hooks）