React 高频api

高阶组件（HOC）是什么？在业务中的使用场景

高阶组件（HOC）是一种在React中用于复用组件逻辑的技术。本质上一个函数，接受一个组件作为参数，并返回一个新的组件

开发中使用过的组件

1. 埋点组件
2. 权限组件
3. 错误捕获组件

React组件错误捕获怎么做？

import React, { Component, ReactNode } from 'react'

interface Props {
    children: ReactNode
}

interface State {
    hasError: boolean
}

class ErrorBoundary extends Component<Props, State> {
    constructor(props: Props) {
        super(props)
        this.state = {
            hasError: false
        }
    }

    /**
     * React16版本引入的生命周期方法，用于在组件中捕获和处理JavaScript错误
     * 可以在组件的渲染周期中被调用
     * 当子组件中发生错误时会触发Error Boundary组件中的getDerivedStateFromError方法
     * @param _ Error对象，包含错误信息
     * @returns getDerivedStateFromError方法返回一个对象
     * 用于更新组件的state，而不是调用setState
     */
    static getDerivedStateFromError(_: Error): State {
        // 异常时渲染降级UI
        return { hasError: true }
    }

    /**
     * componentDidCatch是一个生命周期，在子组件中发生错误时被调用
     * @param error
     * @param errorInfo
     */
    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
        // 将错误信息上报
    }

    render() {
        if (this.state.hasError) {
            return <div>err</div>
        }

        return this.props.children
    }
}

export default ErrorBoundary

Error Boundary组件可以捕获函数式组件的异常错误

React 中如何创建Refs？创建Refs的方式有什么区别？

创建ref的形式有两种字符串和回调，字符串只能在类组件中使用 回调函数方式可用于类组件和函数组件

forwardRef的使用

forwardRef将ref对象从父组件传递到子组件可以在子组件中访问DOM元素或组件实例 useImperativeHandle控制向父组件暴露哪些属性或方法，在父组件中访问子组件的属性和方法