快手前端二面

请将下面类组件函数转换成函数组件

import React, { Component } from 'react'

export default class MyButton extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'Bob',
        }
    }
    componentDidMount() {
        this.interval = setInterval(() => {
            console.log(111);
        }, 2000);
    }
    componentWillUnmount() {
        this.interval && clearInterval(this.interval);
    }
    clickMe() {
        this.interval && clearInterval(this.interval);
    }
    render() {
        return <button onClick={this.clickMe}>My name is {this.state.name}</button>
    }
}

在MyButton组件的父组件发生变化时，这个函数会重新执行吗？重新执行后interval的值还正确吗？

假设在2s内点击按钮触发clickMe函数，clearInterval会执行吗？

（不会，clickMe函数没有绑定this，会指向undefined）

如何让函数组件拥有相同的效果？

修改为函数组件后，在clickMe函数中调用setName('Jhon')会发生什么？框架内部做了什么？

为什么组件发生了重新渲染，拿到的值是Jhon，而不是被初始化为Blob？

对Webpack的了解？

url-loader为什么要将文件转换成DataUrl的格式？

算法题：三数之和（https://leetcode.cn/problems/3sum/）