【前端面试题】前端面试题总结2023-7-13（九）-阿里云开发者社区

13、react性能优化的方法有那些？

减少不必要的渲染：使用PureComponent或shouldComponentUpdate方法判断组件是否需要重新渲染。
懒加载：使用React.lazy()和Suspense组件，可以在组件需要渲染时才加载，减少初始加载时间和资源占用。
处理大量数据：使用虚拟化技术（如react-virtualized）渲染大量数据，避免一次性全部渲染。
避免过度渲染：使用shouldComponentUpdate方法可以避免不必要的渲染，使用事件委托和事件缓存技术可以避免重复绑定事件。
遵循React生命周期：在组件的挂载、更新和卸载过程中使用合适的生命周期方法处理业务逻辑。
使用React的性能工具：React提供了一些性能检测工具，如React Developer Tools、Perf API、Chrome DevTools等，可以帮助开发者找到性能问题和优化点。
优化CSS样式：尽量减少渲染层级和使用CSS3动画效果，避免使用float布局和table布局等影响性能的CSS属性。
处理长列表渲染：使用分页技术、滚动加载和预缓存技术等方法减少渲染时间和页面负荷。
优化网络请求：减少网络请求次数，使用CDN加速等方法，从根本上减少页面加载时间和资源占用。

14、React render方法的原理，在什么时候会触发？

React中的render方法是用来生成虚拟DOM树的，它会根据组件的props和state的变化来重新渲染组件。

当组件的props或state发生变化时，React会调用render方法生成虚拟DOM树，并与之前生成的虚拟DOM树进行比较，找出需要更新的部分并进行更新。

render方法的原理是利用虚拟DOM的机制，在内存中构建一个虚拟的DOM树，并在需要更新时，比较新旧虚拟DOM树的差异，然后用最小的修改操作更新到真实DOM上。

所以，render方法在组件的属性或状态发生变化时会被触发，生成新的虚拟DOM树并更新到真实DOM上。

15、说说你对useEffect的理解？

useEffect是React中的一个hook，它的作用是在函数组件中执行副作用操作，例如异步获取数据、修改DOM或订阅事件等。

useEffect函数接受两个参数，第一个参数是一个函数，称为effect函数，它在组件渲染时会被执行，第二个参数是一个数组，用于指定effect函数的依赖项，当依赖项中的任意一个发生变化时，effect函数就会重新执行。

通过useEffect，我们可以在组件内部实现类似于class组件中的componentDidMount、componentDidUpdate和componentWillUnmount等生命周期函数的功能，从而实现一些复杂的业务需求。同时，由于useEffect是一个纯函数，我们也可以把它抽离为独立的工具函数，使得我们的代码更加模块化和可复用。

16、说说Real DOM和Virtual DOM的区别？优缺点？

Real DOM是指实际的DOM节点，即网页中的HTML元素。当页面发生变化时，浏览器会重新渲染整个Real DOM，这个过程是非常消耗性能的。

Virtual DOM是一种JS对象，用于描述真实的DOM树结构。在数据变化时，Virtual DOM会对比旧虚拟DOM树和新虚拟DOM树，只对改变的部分进行更新渲染，最终只更新实际页面中需要修改的部分，减少了页面重新渲染的次数和消耗性能。

区别：

Real DOM操作慢，Virtual DOM操作快。因为Real DOM会频繁修改和读取DOM，而Virtual DOM只是数据的比较，所以Virtual DOM比Real DOM快。
Real DOM操作复杂，Virtual DOM操作简单。Real DOM需要关注样式、属性等各个方面，而Virtual DOM只需要关注数据的变化，更简单。

优点：

提高渲染性能。Virtual DOM可以通过新旧DOM树的比较，找到需要更新的部分进行局部更新，减少浏览器的性能消耗。
提高开发效率。Virtual DOM没有繁琐的DOM操作，更容易理解和维护，可以提高开发效率。
提高跨平台性。Virtual DOM不依赖浏览器环境，可以跨平台使用。

缺点：

需要消耗额外的内存。Virtual DOM需要维护虚拟DOM树，需要消耗一定的内存。
学习成本高。相对于传统的Real DOM操作，Virtual DOM需要特定的框架进行应用，需要一定的学习成本。

总之，Virtual DOM相比传统的Real DOM，具有更高的渲染性能和开发效率，适用于大型应用中。但对于小型应用或者UI交互较少的应用，传统的Real DOM足以满足需求。

17、说说React生命周期有哪些不同的阶段？每个阶段对应的方法是？

React生命周期可分为三个不同的阶段：

挂载阶段：在初始化阶段时，组件会被挂载到DOM上，这是生命周期的第一个阶段。对应的方法有：

constructor()
static getDerivedStateFromProps(props, state)
render()
componentDidMount()

更新阶段：在组件的props或state更新后，会重新渲染组件，这是生命周期的第二个阶段。对应的方法有：

static getDerivedStateFromProps(props, state)
shouldComponentUpdate(nextProps, nextState)
render()
getSnapshotBeforeUpdate(prevProps, prevState)
componentDidUpdate(prevProps, prevState, snapshot)

卸载阶段：当组件被卸载时，会执行卸载阶段的生命周期方法。对应的方法有：

componentWillUnmount()

除此之外，还有一些不常用的生命周期方法，如：

UNSAFE_componentWillMount()
UNSAFE_componentWillUpdate()
componentWillReceiveProps()
componentDidCatch()

18、说说React中setState和replaceState的区别？

React中的setState用于更新组件的state，它接受一个对象或一个函数作为其参数，在使用对象的时候，会将传入的对象与当前的state合并，然后触发组件的重新渲染；在使用函数的时候，函数会接收两个参数，第一个参数为当前的state，第二个参数为props，函数返回一个新的对象作为新的state的值，也会触发组件的重新渲染。setState是异步的，会将多次连续的setState合并成一次，提高性能。

而replaceState是直接替换state的值，它接收一个新的state对象，并直接替换当前的state，不会将其与原有的state进行合并。replaceState会更新组件的state，并触发重新渲染，但这个方法已经被弃用，不建议使用。

19、说说react中onClick绑定后的工作原理？

在React中，onClick绑定后，当用户点击相应元素时，React会调用绑定的事件处理函数。如果在绑定时指定了事件处理函数的参数，例如onClick={() => handleClick(id)}，则React会将事件对象作为第一个参数传递给事件处理函数，同时会将handleClick函数的参数作为后续参数传递。

在事件处理函数中，我们可以访问事件对象，调用事件对象的方法来实现一些操作，例如阻止默认行为或停止事件冒泡。同时，我们也可以通过setState函数来更新组件的状态，从而重新渲染组件，展示新的效果。

需要注意的是，onClick绑定会在拥有该事件的元素上绑定一个事件处理函数，如果这个元素下面的子元素也绑定了类似事件处理函数，那么点击该子元素时也会触发该事件处理函数，并且事件会按照从底层元素冒泡至顶层元素的顺序执行。因此，在事件处理函数中，我们需要小心处理事件冒泡的影响。

20、useEffect的依赖为引用类型如何处理？

当 useEffect 的依赖项是引用类型（如对象或数组）时，需要注意以下几点：

当依赖项发生变化时，useEffect 会比较依赖项的引用值是否相等来判断是否需要重新执行。因此，如果只是修改了引用类型的某个属性，而没有改变引用本身，useEffect 是不会重新执行的。
如果需要在引用类型发生变化时执行 useEffect，可以采用以下两种方式：

将引用类型转化为基本类型，例如使用 JSON.stringify 将对象转化为字符串。
使用 useRef 来创建一个可变的引用，然后在引用类型发生变化时修改 useRef 的 current 属性，从而触发 useEffect。

当使用 useRef 的时候，需要注意，由于修改 current 属性不会触发组件的重新渲染，因此需要手动调用组件的 setState 或 forceUpdate 方法来更新组件。

21、说说你对@reduxjs/toolkit的理解？和react-redux有什么区别？

@reduxjs/toolkit是一个用于简化Redux开发的工具集，它提供了一组API和实用程序，使Redux的编写更加简单、易于调试和维护。

@reduxjs/toolkit和react-redux的区别在于，react-redux是一个将React与Redux结合使用的库，它为React组件提供了连接Redux store所需的功能。而@reduxjs/toolkit更加专注于Redux，其提供的功能与API让Redux的编写更加简单，压缩Redux代码的体积并增加代码的可读性。同时，在使用@reduxjs/toolkit时，还可以选择使用react-redux库来与React结合使用。

22、知道react里面的createPortal么，说说其使用场景？

createPortal是React提供的API之一，用于将一个组件插入到当前DOM树以外的任何地方。

其使用场景如下：

模态框、对话框等弹出框。弹出框通常需要覆盖在当前页面之上，并且要确保浮层出现在最外层，这时就可以利用createPortal将弹出框渲染在body节点外，保证覆盖。
tooltip提示框。类似于弹出框的情况，tooltip需要显示在最外层，并且可以通过定位改变其位置，而利用react-create-portal可以渲染到body外部，从而实现定位的效果。
父组件需要控制子组件放置的位置，而且需要跟父组件分离。createPortal可以帮我们在其他组件中就好渲染子组件，从而实现这个功能。

总的来说，createPortal非常灵活，可以让我们控制React渲染的位置，同时保证结构清晰，不会影响其他组件。

23、Provider和connect的底层原理实现，写出其核心代码？

Provider和connect都是React Redux中用于连接React组件和Redux store的工具。其底层原理均基于React Context API和高阶组件(Higher Order Component)。

Provider的核心代码如下：

// 创建React context
const Context = React.createContext();
// Provider组件
class Provider extends React.Component {
  render() {
    const { store } = this.props;
    return (
      <Context.Provider value={ store }>
        { this.props.children }
      </Context.Provider>
    );
  }
}
// 创建连接store的高阶组件
function connect(mapStateToProps, mapDispatchToProps) {
  return function (WrappedComponent) {
    return class extends React.Component {
      static contextType = Context;
      render() {
        const { dispatch, getState } = this.context;
        const stateProps = mapStateToProps(getState());
        const dispatchProps = mapDispatchToProps
          ? mapDispatchToProps(dispatch)
          : { dispatch };
        return <WrappedComponent {...this.props} {...stateProps} {...dispatchProps} />;
      }
    };
  };
}

connect的核心代码如下：

// 创建连接store的高阶组件
function connect(mapStateToProps, mapDispatchToProps) {
  return function (WrappedComponent) {
    class ConnectedComponent extends React.Component {
      static contextType = Context;
      componentDidMount() {
        // 订阅store的变化，更新组件
        this.unsubscribe = this.context.subscribe(() => {
          this.forceUpdate();
        });
      }
      componentWillUnmount() {
        // 取消订阅
        this.unsubscribe();
      }
      render() {
        const { dispatch, getState } = this.context;
        const stateProps = mapStateToProps(getState());
        const dispatchProps = mapDispatchToProps
          ? mapDispatchToProps(dispatch)
          : { dispatch };
        return <WrappedComponent {...this.props} {...stateProps} {...dispatchProps} />;
      }
    }
    // 返回包装后的组件
    return ConnectedComponent;
  };
}

以上代码仅是Provider和connect的核心代码，实现Redux连接React的详细过程还需考虑到订阅和取消订阅store的变化、传递下发的props和context等方面。

24、说说你对react的理解？有哪些特性？

React 是一个由 Facebook 开发的 JavaScript 库，用于构建用户界面（UI）。它采用组件化的思想，将 UI 拆分成小而独立的部分，每个组件都具有自己的状态和行为，并可以被嵌套和复用。React 拥有如下特性：

组件化：React 认为 UI 应该是由组件构成的。每个组件都可以包含一些特定的状态和行为，从而实现高度的复用和灵活性。React 的组件化模型也使得代码更加可读和易于维护。
虚拟 DOM：React 采用了一种虚拟 DOM 的技术，它是一个以 JavaScript 对象的形式表示整个 UI 结构的轻量级抽象。在每次 UI 更新时，React 会先通过对比新旧两个虚拟 DOM 树的差异，减少 DOM 操作的次数，从而提高渲染效率。
单向数据流：React 的数据流是单向的，即从父组件到子组件的单向数据流。每个组件都可以接收来自父组件的属性（props），并可以触发父组件的回调函数来修改父组件的状态（state），从而实现数据在组件之间的传递和控制。
JSX：JSX 是一种 JavaScript 语法扩展，它可以在 JavaScript 代码中嵌入像 HTML 标签一样的 UI 代码，并通过 Babel 等编译工具将其编译为纯 JavaScript 代码。JSX 可以提高代码的可读性和可维护性，同时还可以通过静态语法分析等工具进行更加全面和准确的检查。
生命周期：React 组件拥有一些生命周期方法，用于在组件的不同阶段执行特定的操作，例如组件初始化、更新、卸载等等。生命周期可以帮助我们更好地管理组件的状态和行为，同时也为实现高级特性（如性能优化、动画效果等）提供了支持。

总之，React 是一个灵活、高效且易于学习的框架，它在创建用户界面方面有着重要的作用。通过了解 React 的特性和使用场景，我们可以更好地利用其优势来构建高质量的应用程序。

25、说说React生命周期有哪些不同的阶段？每个阶段对应的方法是？

React 组件的生命周期是指组件从创建到销毁期间的各个阶段，其中每个阶段都对应着一些特定的方法。React 的生命周期主要可以分成三个阶段：

组件挂载阶段(Mounting)：当一个组件实例被创建并插入到 DOM 树中时，React 就会进入挂载阶段。此时组件将依次执行以下方法：

constructor(props): 组件的构造函数，用于初始化组件的状态和绑定方法。
static getDerivedStateFromProps(props, state)：静态方法，用于根据传入的 props 来计算新的 state 值，返回值将被放入组件的 state 中。
render()：用于渲染组件的 UI 结构，返回一个 React 元素。
componentDidMount()：在组件完成挂载后立即调用的方法，通常用于进行异步数据的拉取、DOM 操作或添加事件监听等操作。

组件更新阶段(Updating)：当组件的 props 或 state 发生变化时，React 就会执行更新阶段。此时组件将依次执行以下方法：

static getDerivedStateFromProps(props, state): 和挂载阶段相同。
shouldComponentUpdate(nextProps, nextState): 用于判断当前组件是否需要重新渲染，如果返回 false，则组件不会进行下面的更新流程。
render(): 和挂载阶段相同。
componentDidUpdate(prevProps, prevState, snapshot): 在组件完成更新后立即调用的方法，通常用于进行 DOM 操作或添加事件监听等操作。

组件卸载阶段(Unmounting)：当组件被从 DOM 树中移除时，React 就会进入卸载阶段。此时组件将执行以下方法：

componentWillUnmount(): 在组件被销毁前调用的方法，通常用于清理一些定时器、取消事件监听等操作。

此外，React 还有两个生命周期方法不常用：

static getDerivedStateFromError(error): 用于捕捉组件渲染过程中发生的报错信息，并返回新的 state 值。
componentDidCatch(error, info): 在组件出现错误后调用的方法，通常用于记录错误日志或显示错误界面等操作。

总之，React 生命周期是组件创建、更新和销毁过程中的重要阶段，每个阶段都对应着特定的方法，在编写组件时需要充分考虑这些方法的作用和使用场景。

26、说说React中setState执行机制？

在 React 中，组件的状态（state）可以通过 setState 方法进行改变。当我们调用 setState 方法时，React 并不会立即修改组件的状态，而是将修改请求放到一个队列中，等待后续统一处理。在后续处理过程中，React 会根据一定的规则来决定最终的状态变化，并触发相应的更新流程。

具体来说，React 中 setState 方法的执行机制主要可以分成两个阶段：

批量更新阶段：当我们调用 setState 方法时，React 首先会将修改请求加入到当前组件的更新队列（update queue）中，而不会立即执行更新流程。在同一个事件循环（Event Loop）内，如果有多次 setState 操作，那么这些操作会被合并成一次操作，即只有最后一次操作会被执行。
渲染与更新阶段：在下一个事件循环中，React 会对所有的组件进行更新，包括当前组件和它的子组件。首先，React 会根据一定的优先级（如用户交互、定时器等）来确定哪些组件需要进行更新。然后，React 会对每个组件依次执行以下更新流程：

shouldComponentUpdate(nextProps, nextState)：检查当前组件是否需要重新渲染，如果返回 false，则剩余的更新流程将被跳过。
componentWillUpdate(nextProps, nextState)：在组件即将更新时调用的方法，通常用于在更新前进行一些准备工作。
render()：重新渲染组件的 UI 结构，返回一个 React 元素。
componentDidUpdate(prevProps, prevState)：在组件更新完成后调用的方法，通常用于在更新后进行一些 DOM 操作或添加事件监听等操作。

需要注意的是，由于 React 的 setState 方法是异步执行的，因此在组件状态被更新后，我们不能保证立即获取到最新的状态值，即使使用了回调函数也是如此。如果需要在 setState 后立即获取最新的状态值，我们可以使用 componentDidUpdate 方法的第二个参数（prevState）来获取前一个状态的值，并进行对比。

总之，React 的 setState 方法是一个异步操作，它会将修改请求加入到队列中，并在下一个事件循环中统一处理。对于每个组件的更新流程，React 会根据一定的优先级来确定是否需要进行更新，并执行相应的生命周期方法以完成更新。

27、说说react的事件机制？

在 React 中，事件机制是通过将事件处理函数（event handler）绑定到组件的 DOM 节点上实现的。React 的事件机制和原生 JavaScript 中的事件机制有些不同，具体表现为以下几个方面：

事件绑定方式：在 React 中，我们通常通过 JSX 的语法来绑定事件处理函数，比如<button onClick={handleClick}>Click me</button>。需要注意的是，这里并不是直接将事件处理函数绑定到 DOM 节点上，而是通过 React 内部的机制来完成事件绑定，从而提供了更加灵活的使用体验。
事件处理函数：React 的事件处理函数通常是一个普通的 JavaScript 函数，而不是像原生事件一样是一个方法调用。事件处理函数的第一个参数通常是事件对象（event），含有和原生事件对象类似的属性和方法，但有一些细微的差别（例如阻止默认行为的方法名不同）。
事件合成机制：React 通过事件合成机制（synthetic event）来处理浏览器原生事件。事件合成机制可以将多个浏览器原生事件转化为一个共同的事件对象，从而避免了跨浏览器兼容性问题，并且能够有效地减少内存占用。
合成事件池：为了避免不必要的对象创建和内存分配，React 使用了合成事件池（event pooling）来复用事件对象。所谓的事件池就是维护了一定数量的事件对象，并在需要时从池中取出、使用、重置，而不是每次都创建一个新的事件对象。
事件处理函数的 this 指向：在不使用箭头函数的情况下，React 的事件处理函数的 this 指向默认是 undefined，而不是组件实例。要想在事件处理函数中使用组件实例的方法和属性，需要手动将组件实例绑定到事件处理函数的 this 上，比如<button onClick={this.handleClick.bind(this)}>Click me</button>。

总之，React 的事件机制通过一系列内部机制来实现事件绑定和事件处理，提供了更加灵活的使用方式和更好的兼容性，同时也对性能进行了优化。

28、说说你对受控组件和非受控组件的理解？应用场景？

在 React 中，表单元素（如 input、select、textarea 等）可以分为两类：受控组件和非受控组件。

受控组件：受控组件是指由 React 组件来管理对应表单元素的值和状态。当用户输入内容时，React 组件会相应地更新组件的状态，并通过 props 将最新的值传递给表单元素。同时，通过监听表单元素的 onChange 事件，React 组件也能够获取到用户的输入操作。因此，在受控组件中，表单元素的属性值和状态值是通过 React 组件的 state 和 props 来控制的。
非受控组件：非受控组件是指表单元素的值和状态由 DOM 树来管理，而不是由 React 组件来控制的。在非受控组件中，表单元素不受 React 组件的控制，而是直接读取 DOM 树中的属性值。因此，在非受控组件中，表单元素的属性值和状态值是由 DOM 节点自己来管理的。

在实际开发中，我们通常使用受控组件来管理表单元素的状态，因为它具有以下优点：

可以实时校验用户输入的数据，从而提高用户体验和数据准确性。
可以方便地将表单元素的值和状态传递给其他组件进行处理，比如将表单数据提交到服务器。
可以方便地结合 React 生态中其他库和框架，比如 Redux、Formik 等。

需要注意的是，受控组件需要编写更多的代码来管理表单元素的状态，因此可能会增加一些开发成本和代码复杂度。而非受控组件虽然使用起来比较简单，但却难以实现校验和处理等功能，且不易与 React 生态中的其他库和框架集成。

总之，受控组件和非受控组件各有优缺点，应根据具体情况来选择使用哪种方式。在大部分场景下，通过受控组件来管理表单元素的状态是一个更好的选择，可以提高用户体验和数据准确性，并且方便后续处理和扩展。

29、说说React jsx转换成真实DOM的过程？

在React中，JSX是一种类似HTML的语法扩展，它允许我们使用类似XML标记的语法编写组件的结构。当编写React组件时，JSX会被转换成真实的DOM元素并渲染到页面上。下面是React将JSX转换为真实DOM的大致过程：

解析JSX：React会使用解析器将JSX代码转换为JavaScript对象表示形式，这个JavaScript对象称为虚拟DOM（Virtual DOM）。
创建虚拟DOM树：通过递归地遍历解析后得到的JavaScript对象，创建一个虚拟DOM树。在虚拟DOM树中，每个节点都是一个JavaScript对象，表示对应的DOM元素。
更新虚拟DOM：当虚拟DOM树被创建后，如果有需要更新的状态或属性，React会生成一个新的虚拟DOM树。
进行差异比较：React会比较新旧虚拟DOM树之间的差异，找出需要进行更新的部分。
生成操作指令：根据差异比较的结果，React会生成一系列操作指令，描述如何更新真实的DOM。
执行DOM更新：React会根据操作指令，按照最小化的方式来操作真实的DOM，只更新需要变动的部分，尽量减少对整个DOM树的操作。
渲染到页面：最后，React将更新后的真实DOM渲染到页面上。

通过使用虚拟DOM的方式，React能够在内存中高效地操作和比较不同状态下的DOM树，减少直接操作真实DOM的次数，提高性能并优化用户体验。

需要注意的是，React并不是每次数据变动都会立即更新真实的DOM，而是通过批量处理的方式进行更新，以提高性能。

30、说说你对React中虚拟dom的理解

在React中，虚拟DOM（Virtual DOM）是一种用于提升性能的技术。它是一个轻量级的JavaScript对象，用于描述页面上真实DOM的层次结构和属性。通过使用虚拟DOM，React可以高效地计算出实际DOM的最小变化，并只更新这些变化部分，而不需要重新渲染整个页面。

以下是我对React中虚拟DOM的理解：

虚拟DOM的创建：当编写React组件时，我们实际上是在创建虚拟DOM。虚拟DOM是由React元素（Element）构成的树形结构，其中每个元素代表一个DOM节点。通过调用React的createElement()函数或使用JSX语法，我们可以声明性地定义组件的结构和属性，并创建对应的虚拟DOM。
虚拟DOM的更新：当React组件状态（State）或属性（Props）发生变化时，React会创建一个新的虚拟DOM，并将其与之前的虚拟DOM进行比较。React使用一种称为"协调"（Reconciliation）的算法来找出两个虚拟DOM之间的不同之处，并确定需要对实际DOM进行的最小变更。
虚拟DOM的比较和差异更新：React使用Diff算法来比较两个虚拟DOM树之间的差异，并生成一个差异对象。这个差异对象描述了需要对实际DOM进行的具体操作，如插入、更新或删除节点。然后，React将根据差异对象进行实际DOM的更新，只更新需要变化的部分，而不重新渲染整个页面。
虚拟DOM的优势：虚拟DOM带来了一些性能优势。首先，通过在内存中构建和比较虚拟DOM，可以避免频繁操作实际DOM带来的性能开销。其次，通过批量更新实际DOM，可以减少对浏览器重排（reflow）和重绘（repaint）的次数，提高渲染效率。最后，虚拟DOM使得我们可以以声明性的方式编写组件，并以相同的方式处理不同的平台（如Web、移动端等）。

总结起来，虚拟DOM是React中用于提升性能的基础技术之一。它通过在内存中构建和比较虚拟DOM，准确地计算出实际DOM的最小变化，并只更新这些变化部分，从而实现了高效的页面渲染和更新机制。

31、说说你对react hook的理解？

React Hook（钩子）是React 16.8版本引入的一项特性，它使得我们可以在无需编写类组件的情况下，使用状态和其他React特性。下面是我对React Hook的理解：

状态管理：使用Hook可以在函数组件中添加和管理状态。使用useState Hook，我们可以定义和更新组件的状态。它接收一个初始状态值作为参数，并返回一个包含当前状态和更新状态的数组。例如，可以使用useState来定义一个计数器组件的状态：

import React, { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

副作用处理：使用useEffect Hook，我们可以在函数组件中执行副作用操作，如数据获取、订阅事件等。useEffect接收一个副作用函数和一个依赖数组作为参数。副作用函数会在每次渲染之后执行，而依赖数组用于指定需要监视的状态。例如，可以使用useEffect来订阅一个WebSocket事件：

import React, { useEffect, useState } from 'react';
function WebSocketComponent() {
  const [message, setMessage] = useState('');
  useEffect(() => {
    const socket = new WebSocket('wss://example.com/ws');
    socket.addEventListener('message', event => {
      setMessage(event.data);
    });
    // 清理副作用
    return () => {
      socket.removeEventListener('message');
    };
  }, []);
  return (
    <div>
      <p>Message: {message}</p>
    </div>
  );
}

自定义Hook：除了React提供的一些内置Hook外，我们还可以创建自定义Hook来封装可重用的逻辑。自定义Hook是一个函数，其名称以"use"开头，并可以使用其他Hook。它可以将一些状态管理和副作用处理的代码进行抽象和封装，以便在多个组件中共享和复用。

import { useState, useEffect } from 'react';
function useTimer(initialValue) {
  const [timer, setTimer] = useState(initialValue);
  useEffect(() => {
    const interval = setInterval(() => {
      setTimer(timer => timer + 1);
    }, 1000);
    // 清理副作用
    return () => {
      clearInterval(interval);
    };
  }, []);
  return timer;
}
function TimerComponent() {
  const timer = useTimer(0);
  return (
    <div>
      <p>Timer: {timer}</p>
    </div>
  );
}

总结起来，React Hook是React提供的一种功能强大、简化了组件编写方式的特性。通过使用Hook，我们可以在函数组件中使用状态和其他React特性，实现更简洁、可读性更高的代码。它使得状态管理和副作用处理变得更加直观和容易，并提供了自定义Hook的机制，以增强代码的可复用性和组织性。

【前端面试题】前端面试题总结2023-7-13（九）