2024华为Web前端高级面试题及答案，React Hooks 与Vue3，大厂前端高级面试题汇总解答

}

render () {

return (

You clicked {this.state.count} times

<button onClick={() => this.setState({count: this.state.count + 1)}}>Click me

)

}

}

需求很简单，设定初始值为0，当点击按钮时，count 加 1。

当使用 useState Hook 实现上述需求时：

import React, { useState } from ‘react’;

function Example() {

const [count, setCount] = useState(0);

return (

You clicked {count} times

<button onClick={() => setCount(count + 1)}>

Click me

);

}

其中 useState Hook 做了哪些事情呢？

1.在调用 useState 方法时，定义了一个state变量count，它与类组件中的this.state功能完全相同。对于普通变量，在函数退出后即消失，而state中的变量会被 React 保留。2.useState 方法只接收一个参数，那就是初始值。useState 方法一次只定义一个变量，如果想在state中存储两个变量，只需要调用两次 useState() 即可。3.useState 的返回值是一个由 当前state 以及 更新state的函数 组成的数组。这也是采用 数组解构 方式来获取的原因。

在使用 Hooks 实现的示例中，会发现 useState 让代码更加简洁了：

•获取state：类组件中使用 this.state.count ，而使用了 useSatet Hook 的函数组件中直接使用 count 即可。•更新state：类组件中使用 this.setState() 更新，函数组件中使用 setCount() 即可。

这里抛出几个疑问，在讲解原理的地方会进行详细解释：

•React 是如何记住 useState 上次值的？。•React 是如何知道 useState 对应的是哪一个组件？。•如果一个组件内有多个 useState，那重新渲染时 useState 的取值顺序又是怎么确定的？。

useEffect Hook

在讲 useEffect 之前，先讲一下 React 的副作用。

在 React 中，数据获取、订阅或者手动修改DOM等操作，均被称为 ‘副作用’，或者 ‘作用’ 。

而 useEffect 就是一个 Effect Hook ，为函数组件添加操作副作用的能力，可以把它看作是类组件中的componentDidMount、componentDidUpdate、componentWillUnmount三个周期函数的组合。

下面是一个关于订阅的例子：

import React from ‘react’;

class Example extends React.Component {

constructor (props) {

super(props)

this.state = {

isOnline: null

}

}

componentDidMount() {

ChatAPI.subscribeToFriendStatus(

this.