一.React相关面试真题

React18有哪些更新：

1.batch update

将所有事件都进行批处理，即多次setState会被合并，以此提高性能，在数据层，将多个状态更新合并成一次处理，另外在视图层，将多次渲染合并成一次渲染

2.concurrent Mode
javascript 复制代码
// React 17
import React from 'react';
import ReactDom from 'react-dom'
import App from './App'

const root = document.getElementById('root');
ReactDOM.render(<App/>,root);

//卸载组件
ReactDOM.unmountComponentAtNode(root);

// React 18
import React from 'react';
import ReactDom from 'react-dom/client';
import App from './App';
const root = document.getElementById("root");
ReactDom.creatRoot(root).render(<App/>);

//卸载组件
root.unmount();
并发模式不是一个功能，而是一个底层设计。

它可以帮助应用保持响应，根据用户的设备性能和网速进行调整，它通过渲染可中断来修复阻塞渲染机制，在concurrent模式中，React可以同事更新多个状态

区别就是使同步不可中断更新变成了异步可中断更新

useDeferredValue和startTransition用来标记一次非紧急更新

3.仅支持现代浏览器

4.flushSync

批量更新是一个破坏性的更新，如果想退出批量更新，可以使用flushSync
html 复制代码
import React,{useState} from 'react';
import {flushSync} from 'react-dom';
const App = () =>{
    const [count,setCount] = useState(0)
    const [count2,setCount2] = useState(0);
    
    return (
        <div className="App">
            <button onClick = (()=>{
                //第一次更新
                flushSync(()=>{
                    setCount(count=>count+1)
                })
                //第二次更新
                flushSync(()=>{
                    setCount2(count2=>count2+1);
                })
               })>点击<button>
                <span>count:{count}</span>
                <span>count2:{count2}</span>
         <div>       
        )
    }
   
export default App
5.组件可返回null与undefined，18之前版本返回undefined会报错

6.Strict Mode 更新

当你使用严格模式时，React会对每个组件返回两次渲染（因为有一次渲染检查），以便你观察一些意想不到的结果

7.Suspense

不再需要fallback捕获

8.支持useId

在服务器和客户端生成相同的唯一一个id，避免hydrating的不兼容

9.useSyncExternalStore

实现解决外部数据同步到React状态

10.useInsertionEffect

这个hooks只建议在css in js库中使用，这hook是执行时机在DOM生成之后，useLayoutEffect执行之前，它的工作原理大致与useLayoutEffect相同，此时无法访问DOM节点的引用，一般用于提前注入脚本

React组件异常如何捕获？

答案：

在React中，捕获组件中的异常可以使用错误边界（Error Boundaries）。错误边界是React组件，它们可以捕获其子组件树中的JavaScript错误记录这些错误并显示回退的UI

1创建一个错误边界组件：

错误边界组件需要实现两个声明周期方法：componentDidCatch 和 getDerivedStateFromError
javascript 复制代码
import React from 'react';

class ErrorBoundary extends React.Component{
    constructor(props){
        super(props);
        this.state={hasError:false};
    }
    static getDerivedStateFromError(error){
        //更新state以触发下一次渲染时的回退 UI
        return { hasError ：true}
    }
    componentDidCatch(error,errorInfo){
        //可以将错误信息记录到日志服务
        console.log(error,errorInfo);
    }
    render(){
        if(this.state.hasError){
            return <h1> Something went wrong.</h1>
        }
        return this.props.children;
    }
}

export default ErrorBoundary;
2.使用错误边界组件包裹需要保护的组件：
javascript 复制代码
import React from 'react';
import ErrorBoundeary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App (){
    return (
        <ErrorBoundary>
        <MyComponent />
        </ErrorBoundary>
    )
}

export default App;
注意事项：

错误边界不能捕获一下错误：

时间处理中的错误（使用try/cactch语句来捕获）

异步代码（例如setTimeout 或 requestAnimationFrame 回调中的错误）

服务端渲染中的错误

自身的错误（错误边界组件内部抛出的错误）

通过使用错误边界，你可以确保在组件中发生错误时，整个应用不会崩溃，而是显示一个友好的错误消息，提供更好的用户体验

说一说React生命周期，React18有哪些升级？

答案：

在React18中，生命周期方法没有重大变化，随着Concurrent Mode和自动批处理等新特性的引入，使用一些生命周期方法时需要注意新行为，以下是对React 18中组件生命周期方法的补充和说明：

挂载（Mounting）

constructor（props）

与之前相同，初始化state或绑定方法。

static getderivedStateFromProps(nextProps,prevState)

用于从props派生state。几乎没有变化

render()

返回要渲染的React元素。

getSnapshotBeforeUpdate(prevProps,PrevState)

获取更新前的一些状态

componentDidUpdate(prevProps,prevState,snapshot)

响应更新后的状态或DOM变化

卸载（Unmounting）

componentWillUnmount()

执行清理操作

错误处理（Error Handling）

static getDerivedStateFromError(error)

渲染备用UI

componentDidCatch(error,errorinfo)

记录错误信息或执行其他副作用操作

新特性和注意事项

1.concurrent Mode(并发模式)

React 18 引入了Concurrent Mode,这允许React打断渲染工作，并在需要时有限处理更高优先级的更新。

生命周期方法如componentDidMount和componentDidUpdate在Concurrent Mode下可能会被分割和暂停，但最终还是会被调用

2.自动批处理

React 18自动批处理所有的状态更新，不再局限于事件处理程序中，这意味着在任何地方发生的多个状态更新会被自动批处理，以减少重新渲染次数

3.新Hook

React18引入了一些新的Hook，如useTransition和useDeferedValue，用于处理并发更新和延迟更新

这些Hook提供了更细粒度的控制，可以帮助开发者在Concurrent Mode下更好的管理更新

示例代码：

bash 复制代码

import React ,{useState,useEffect} from 'react';
function MyComponent(){
    const {data,setData}= useState(null);
    useEffect(()=>{
        fetch('/api/data).then(response=>response.json())
        .then(data => setData(data));
        //清理函数，类似componentWillUnmount
        return ()=>{
            //清理工作
        }
    },[])//空数组作为依赖意味着这个effect只在挂载和卸载时运行
    return (
        <div>
            {data ? data:'Loading...'}
        <div>
    );
}
export default MyComponent;