前端框架React题目及详解

前端框架React题目及详解一、单项选择题（共10题，每题1分，共10分）React组件的render方法（函数组件的return值）不支持以下哪种返回类型？A.单个React元素B.数组或Fragment包裹的多个元素C.布尔值、null或字符串D.普通JavaScript函数答案：D解析：React组件的返回值支持单个元素、数组、Fragment、字符串、数字、布尔值、null等类型，返回函数无法被React解析渲染，因此D选项错误。其他选项均为合法的返回类型，比如返回null可以让组件什么都不渲染，返回数组可以不用外层包裹节点。在React函数组件中使用useState时，传入更新函数而非直接赋值的核心作用是？A.提升状态更新的性能B.获取最新的state快照，避免闭包导致的旧值问题C.减少组件重渲染的次数D.支持异步更新后立即获取到最新的state值答案：B解析：useState采用闭包机制保存状态，直接使用旧state赋值时可能拿到之前渲染周期的旧值，使用函数式更新时React会将最新的state作为参数传入更新函数，保证拿到的是最新值，因此B正确。A错误，函数式更新不会提升性能；C错误，两种更新方式触发重渲染的规则一致；D错误，React的状态更新是异步的，无论哪种方式都无法在更新语句后立即拿到最新值。类组件生命周期componentDidMount对应的Hook实现是？A.依赖数组为空的useEffectB.不传入依赖数组的useEffectC.依赖数组为空的useLayoutEffectD.依赖数组为空的useMemo答案：A解析：依赖数组为空的useEffect只会在组件挂载完成后执行一次，逻辑和componentDidMount完全一致，因此A正确。B错误，不传入依赖数组的useEffect会在每次组件渲染完成后都执行；C错误，useLayoutEffect是在DOM更新前同步执行，和componentDidMount的执行时机不同；D错误，useMemo是用于缓存计算结果的Hook，不用于执行副作用。下列关于React中props和state的描述错误的是？A.props是父组件传递给子组件的数据，state是组件内部管理的数据B.props和state发生变化都可能触发组件重渲染C.子组件可以直接修改props的值，也可以直接修改state的值D.props和state都可以作为参数向下传递给孙组件答案：C解析：props是只读的，子组件不能直接修改父组件传入的props，只能通过调用父组件传入的回调函数通知父组件修改源数据，因此C选项描述错误。其他选项均为props和state的正确特性。关于React合成事件的描述正确的是？A.合成事件和原生DOM事件的触发时机完全一致B.合成事件调用e.stopPropagation()可以阻止原生DOM事件的冒泡C.React17之后合成事件统一绑定在组件挂载的根容器节点上D.合成事件的event对象可以直接在异步代码中使用，不需要特殊处理答案：C解析：React16及之前合成事件绑定在document上，17之后调整为绑定在组件渲染的根容器节点上，避免和微前端等场景的事件冲突，因此C正确。A错误，原生事件的冒泡先执行，之后才会触发合成事件的冒泡；B错误，合成事件的stopPropagation只能阻止合成事件体系内的冒泡，无法阻止原生事件冒泡；D错误，合成事件对象会被对象池回收，异步使用时需要调用e.persist()或者提前缓存需要的属性。ReactRouter中，实现客户端路由跳转且不触发页面刷新的组件是？A.原生标签B.组件C.组件D.组件答案：B解析：组件是ReactRouter提供的客户端跳转组件，内部通过historyAPI的pushState或replaceState实现路由切换，不会触发页面刷新，因此B正确。A错误，原生标签跳转默认会刷新页面；C错误，用于配置路由和组件的映射关系；D错误，用于匹配唯一的路由规则。useEffect返回的清理函数的执行时机不包含以下哪项？A.组件卸载前执行B.下一次该effect执行前执行C.组件每次渲染前都执行D.依赖项变化导致effect重新执行前执行答案：C解析：清理函数只会在组件卸载、或者effect需要重新执行前执行，不会在每次组件渲染前都执行，比如依赖数组为空的effect，清理函数只会在组件卸载时执行一次，因此C选项描述错误。关于React列表渲染中key属性的作用描述错误的是？A.提升Diff算法的节点对比效率B.key相同且节点类型一致时，React会复用对应的组件实例C.所有场景下使用数组index作为key都不会出现问题D.key是React内部使用的标识，不会作为props传递给组件答案：C解析：当列表存在增删、排序操作时，使用index作为key会导致组件状态错位，比如输入框的值错乱、组件生命周期异常等问题，因此不推荐动态列表用index作为key，C选项描述错误。其他选项均为key属性的正确作用。React中高阶组件（HOC）的本质是？A.一个特殊的React组件B.接收组件作为参数、返回新组件的函数C.React内置的Hook函数D.用于优化渲染性能的类答案：B解析：高阶组件是React的逻辑复用设计模式，本质是纯函数，接收一个组件作为输入，返回一个增强后的新组件，因此B正确。A错误，高阶组件本身不是组件，是生成组件的函数；C错误，高阶组件的出现早于Hook，不属于Hook；D错误，高阶组件可以实现包括性能优化在内的多种能力，本质不是类。关于React.memo的描述正确的是？A.默认会对组件的props做深层比较B.只能用于类组件，不能用于函数组件C.使用后组件永远不会触发重渲染D.可以传入自定义比较函数控制是否需要重渲染答案：D解析：React.memo接收第二个参数作为自定义比较函数，开发者可以自行判断props变化是否需要触发重渲染，因此D正确。A错误，React.memo默认只做浅比较；B错误，React.memo是专门用于优化函数组件的API，类组件对应的优化方案是PureComponent；C错误，当组件内部state变化、使用的Context变化、自定义比较返回false时，组件依然会重渲染。二、多项选择题（共10题，每题2分，共20分）下列属于React核心特性的有？A.虚拟DOMB.双向数据绑定C.组件化开发D.Diff算法答案：ACD解析：React采用单向数据流设计，不内置支持双向数据绑定，因此B错误。虚拟DOM、组件化、Diff算法都是React的核心特性，虚拟DOM减少真实DOM操作，组件化提升代码复用性，Diff算法最小化更新开销，因此ACD正确。下列属于React官方内置Hook的有？A.useStateB.useReducerC.useRequestD.useContext答案：ABD解析：useRequest是第三方状态管理/工具库提供的自定义Hook，不属于React官方内置，因此C错误。useState、useReducer、useContext都是React官方提供的基础内置Hook，因此ABD正确。下列关于React状态更新的描述正确的有？A.React17及之前，合成事件中的状态更新默认是批量的B.React17及之前，原生事件监听中的状态更新默认是批量的C.React17及之前，setTimeout回调中的状态更新默认是非批量的D.React18之后默认开启自动批量更新，无论更新触发的位置在哪答案：ACD解析：React17及之前，只有合成事件、生命周期钩子中的更新是批量的，原生事件、异步回调（比如setTimeout、Promise.then）中的更新都是非批量的，因此B错误，AC正确。React18之后所有场景默认开启自动批量更新，因此D正确。下列关于JSX的描述错误的有？A.JSX可以直接在浏览器中运行，不需要编译B.JSX中可以通过大括号插入任意合法的JavaScript表达式C.JSX中定义元素类名使用class属性D.JSX最终会被编译为React.createElement的调用答案：AC解析：JSX是语法糖，必须编译为普通JavaScript代码才能在浏览器中运行，因此A错误。JSX中因为class是JavaScript关键字，类名需要使用className属性定义，因此C错误。BD选项是JSX的正确特性，题目要求选错误项，因此答案为AC。下列类组件生命周期方法中，React17之后被标记为不安全不推荐使用的有？A.componentWillMountB.componentDidUpdateC.componentWillReceivePropsD.componentWillUpdate答案：ACD解析：componentWillMount、componentWillReceiveProps、componentWillUpdate三个生命周期方法因为容易被误用、且和并发渲染特性冲突，从React16.3开始被标记为不安全，推荐使用getDerivedStateFromProps等新API替代，因此ACD正确。componentDidUpdate是安全的生命周期，目前依然正常使用。下列关于useCallback和useMemo的描述正确的有？A.useCallback用于缓存函数引用，useMemo用于缓存计算结果B.两者都需要传入依赖数组，只有依赖变化时才会更新缓存值C.只要使用这两个Hook就一定能提升组件性能D.两者的本质都是利用闭包缓存上一次的计算结果答案：ABD解析：如果缓存的成本高于重新创建函数、重新计算的成本，盲目使用useCallback和useMemo反而会降低性能，因此C错误。其他选项均为两个Hook的正确特性：useCallback缓存函数引用，useMemo缓存函数返回的计算结果，都依赖依赖数组更新，基于闭包实现缓存，因此ABD正确。React中可以实现组件通信的方式有？A.props传递B.ContextAPIC.发布订阅模式D.Redux等第三方状态管理库答案：ABCD解析：四种方式都是React组件通信的常用实现：父子组件通信直接用props传递，跨层级组件通信可以用ContextAPI，任意无关组件通信可以用发布订阅模式，全局复杂状态通信可以用Redux等状态管理库，因此ABCD全对。下列关于ReactPortal的描述正确的有？A.Portal可以将组件渲染到父组件DOM结构之外的指定节点上B.Portal的事件冒泡遵循React组件树的结构，而非真实DOM树的结构C.Portal主要用于解决模态框、提示框等层级嵌套问题D.使用Portal后组件的生命周期会失效答案：ABC解析：Portal只是改变了组件渲染的真实DOM位置，组件的生命周期、状态管理、props传递逻辑都和普通组件完全一致，不会失效，因此D错误。其他选项均为Portal的正确特性：可以渲染到任意DOM节点，事件冒泡按组件树结构传递，非常适合实现全局弹窗这类需要脱离父元素层级限制的组件，因此ABC正确。下列关于React服务端渲染（SSR）的优势描述正确的有？A.提升首屏加载速度B.有利于搜索引擎SEO优化C.完全不需要客户端做任何渲染工作D.降低服务端的资源消耗答案：AB解析：SSR只是将首屏的HTML在服务端渲染完成返回给客户端，客户端还需要执行注水（hydrate）逻辑绑定事件、激活交互，因此C错误。服务端需要处理渲染请求，资源消耗比客户端渲染更高，因此D错误。SSR的核心优势是首屏加载更快、爬虫可以拿到完整的HTML内容利于SEO，因此AB正确。下列属于React常见性能优化手段的有？A.列表渲染时使用合理的key属性B.使用React.memo、PureComponent减少不必要的重渲染C.大型列表采用虚拟滚动处理D.把所有状态都提升到根组件统一管理答案：ABC解析：所有状态都放在根组件会导致根组件状态频繁变化，所有子组件都要跟着重渲染，反而会降低性能，因此D错误。其他三个选项都是正确的优化手段：合理的key提升Diff效率，缓存组件减少不必要重渲染，虚拟滚动减少大量列表的渲染开销，因此ABC正确。三、判断题（共10题，每题1分，共10分）React是一款用于构建用户界面的声明式JavaScript库。答案：正确解析：React的官方定义就是声明式的UI库，开发者只需要描述UI对应的状态，React会自动完成DOM的更新操作，不需要开发者手动操作DOM。函数组件没有自己的内部状态，只能通过props接收数据。答案：错误解析：自ReactHooks推出之后，函数组件可以通过useState、useReducer等内置Hook管理自身的内部状态，不再是只能接收props的无状态组件。在React中，只要组件的props发生变化，组件就一定会触发重渲染。答案：错误解析：如果组件使用了React.memo且props比较返回相等，或者类组件的shouldComponentUpdate生命周期返回false，那么即使props发生变化，组件也不会触发重渲染。useEffect的依赖数组如果是空数组，那么该effect只会在组件挂载时执行一次。答案：正确解析：空依赖数组表示该effect不依赖任何props或state，因此只会在组件挂载完成后执行一次，对应的清理函数只会在组件卸载时执行一次。React的合成事件和原生DOM事件的冒泡顺序是完全一致的。答案：错误解析：合成事件基于事件委托实现，原生DOM事件的冒泡流程先执行，之后才会触发合成事件的冒泡流程，两者的触发顺序不一致。在JSX中，如果一个属性的值为true，可以只写属性名省略值的部分。答案：正确解析：这是JSX的语法糖，比如<inputdisabled/>等价于<inputdisabled={true}/>，写法更简洁。Redux是React的内置状态管理库，所有React项目都必须使用Redux。答案：错误解析：Redux是第三方状态管理库，不属于React内置，只有当项目的状态逻辑比较复杂时才需要引入，简单项目不需要使用Redux。React18中引入的并发渲染特性，允许React中断渲染过程，优先处理更高优先级的更新。答案：正确解析：并发渲染是React18的核心特性，通过时间切片实现可中断的渲染流程，优先响应用户交互等高优先级任务，大幅提升使用体验。高阶组件可以修改传入的原组件的原型，实现功能增强。答案：错误解析：高阶组件应该是纯函数，不应该修改传入的原组件的任何属性或原型，否则会产生不可预期的副作用，高阶组件应该通过组合的方式返回新的增强组件。ReactContext的Provider的value发生变化时，所有嵌套的子孙组件都会触发重渲染。答案：错误解析：只有使用useContext或者Context.Consumer订阅了该Context的组件，才会在value变化时触发重渲染，没有订阅该Context的子孙组件不会受到影响。四、简答题（共5题，每题6分，共30分）简述React虚拟DOM的工作原理。答案：第一，虚拟DOM是用普通JavaScript对象描述真实DOM的结构、属性和子节点，作为真实DOM的抽象层，避免开发者直接操作真实DOM带来的性能损耗和复杂度；第二，当组件的props或state发生变化时，React会生成新的虚拟DOM树，和上一次渲染生成的旧虚拟DOM树通过Diff算法进行对比，快速找出两者之间的最小差异；第三，React会将计算出的差异批量更新到真实DOM上，仅修改需要变化的部分，减少不必要的DOM操作，提升整体渲染效率。解析：虚拟DOM除了性能优势之外，还赋予了React跨平台的能力，虚拟DOM可以映射为不同端的渲染结果，比如ReactNative的原生组件、小程序组件等，不需要开发者针对不同平台编写不同的UI逻辑。简述React单向数据流的核心规则及优势。答案：第一，核心规则是数据只能从父组件通过props向下传递给子组件，子组件不能直接修改父组件传入的props，如果需要修改父组件管理的状态，只能通过调用父组件传入的回调函数，通知父组件修改源数据；第二，优势是数据流清晰可追溯，所有状态的变化都能找到明确的修改来源，避免了双向绑定带来的状态变化不可控的问题，大幅降低中大型项目的调试难度；第三，组件之间的耦合度更低，子组件只负责接收数据和触发回调，不需要关心数据的修改逻辑，组件的复用性更高。解析：单向数据流是React架构的核心设计思想，虽然写法上比双向绑定多了一些模板代码，但在多人协作的中大型项目中，可维护性的优势非常明显。简述useState和useReducer的适用场景区别。答案：第一，useState适合管理简单的、独立的单个状态，比如开关状态、输入框的值、数字计数等，写法更简洁轻便，没有额外的模板代码；第二，useReducer适合管理逻辑复杂的、多个子值互相关联的状态，或者下一个状态依赖上一个状态的场景，比如表单的多个联动字段、列表的增删改查状态等，所有状态更新逻辑统一放在reducer函数中，更容易维护；第三，当需要把状态更新逻辑传递给深层子组件时，使用useReducer可以只传递一个dispatch函数，避免传递多个不同的状态更新函数，减少不必要的组件重渲染。解析：本质上useState是useReducer的语法糖，内部是基于简化版的reducer实现的，两者没有能力上的差异，只有适用场景的便捷性差异，开发者可以根据实际场景灵活选择。简述ReactDiff算法的核心优化策略。答案：第一，同层级对比策略：Diff算法只会对同一层级的节点进行对比，不会跨层级比较节点，这样把树形结构对比的时间复杂度从传统的O(n^3)降到了O(n)，大幅提升对比效率；第二，类型判断策略：如果对比的两个节点类型不同，React会直接销毁旧节点创建新节点，不会继续对比该节点的子节点，减少不必要的对比流程；第三，key优化策略：对于同层级的列表节点，React会通过key属性来识别哪些节点是可以复用的，避免不必要的节点销毁和重建，大幅提升列表渲染的性能。解析：这三个策略是ReactDiff算法高效的核心原因，也是为什么要求列表渲染必须添加合理的key属性的根本原因，如果key设置不合理，反而会降低Diff的效率。简述React中错误边界（ErrorBoundary）的作用及使用规则。答案：第一，作用是捕获子组件树中发生的JavaScript渲染错误，避免单个组件的错误导致整个应用崩溃，同时可以展示降级的提示UI，提升应用的健壮性；第二，错误边界只能捕获子组件生命周期、渲染过程中的错误，无法捕获自身的错误，也无法捕获事件处理函数、异步代码、服务端渲染和useEffect等Hook回调中的错误；第三，错误边界目前只能通过类组件实现，还没有对应的函数组件实现方式，需要在类组件中定义getDerivedStateFromError或componentDidCatch两个生命周期方法来捕获和处理错误。解析：实际项目中通常会在路由层级、业务模块外层添加错误边界，避免单个模块的错误导致整个应用白屏，提升用户体验。五、论述题（共3题，每题10分，共30分）结合实例论述ReactHooks相比类组件的优势，以及使用Hooks时需要注意的常见问题。答案：核心论点：ReactHooks大幅提升了开发效率和代码可维护性，是目前React的主流开发方式，但需要遵循使用规则才能避免问题。一、Hooks相比类组件的核心优势逻辑复用更简单，避免嵌套地狱类组件中逻辑复用通常采用高阶组件或者renderprops的方式，每复用一个逻辑就会增加一层组件嵌套，比如同时复用用户信息获取、窗口大小监听两个逻辑，就需要嵌套两层高阶组件，导致组件结构臃肿可读性差。而Hooks支持自定义Hook封装公共逻辑，比如将用户信息获取逻辑封装为useUserInfo、窗口大小监听封装为useWindowSize，直接在函数组件中调用即可，不需要修改组件结构，没有额外的嵌套层级。比如需要监听滚动位置时，只需要封装一个useScrollPosition的自定义Hook，在任何需要的组件中调用constscrollY=useScrollPosition()就能拿到滚动位置，代码非常简洁。组件逻辑更内聚，避免逻辑分散类组件中相关逻辑会被拆分到不同的生命周期中，比如订阅窗口大小事件需要在componentDidMount中添加监听，在componentWillUnmount中移除监听，逻辑分散在两个地方，很容易遗漏移除监听导致内存泄漏。而Hooks可以将相关逻辑放在同一个useEffect中，比如窗口监听的逻辑，在useEffect中添加监听，返回的清理函数中移除监听，所有相关代码都放在一起，内聚性更高，更容易维护，也更不容易遗漏清理逻辑。没有this指向问题，写法更简洁类组件中经常需要处理事件处理函数的this绑定问题，要么在constructor中手动bind，要么使用箭头函数定义方法，写法繁琐容易出错。而函数组件没有this的概念，不需要处理任何绑定问题，事件处理函数直接定义即可，代码量更少，上手门槛更低。二、使用Hooks的常见问题闭包陷阱问题：Hooks基于闭包实现，很容易出现拿到旧的state和props的问题，比如在useEffect中定义了定时器，依赖数组为空的话，定时器中拿到的state永远是初始值，需要正确填写依赖数组，或者使用函数式更新来解决。Hook调用规则问题：Hook必须在组件的顶层调用，不能在循环、条件判断、子函数中调用，否则会导致Hook的状态索引错位，出现不可预期的错误。过度优化问题：很多开发者不管什么函数都用useCallback缓存，不管什么计算结果都用useMemo缓存，但如果缓存的成本高于重新创建的成本，反而会降低性能，只有当函数作为props传给被memo包裹的子组件、或者计算量非常大时，才需要使用这两个缓存Hook。结论Hooks已经成为React开发的主流方案，大幅降低了逻辑复用的成本，提升了代码的可维护性，但开发者需要理解Hooks的运行原理，遵循使用规则，才能避免常见问题，发挥Hooks的最大优势。结合实际开发场景论述React组件的设计原则，以及如何提升组件的复用性和可维护性。答案：核心论点：遵循合理的组件设计原则，可以大幅降低项目的维护成本，减少重复代码，提升开发效率。一、核心组件设计原则单一职责原则：一个组件只负责一个独立的功能，不要把过多不相关的逻辑放在同一个组件中。比如一个商城页面包含头部导航、商品列表、侧边分类栏三个部分，不要把所有逻辑都写在同一个Page组件中，应该拆分为Header、GoodsList、Sidebar三个独立组件，每个组件只负责自己的逻辑。如果后续要将侧边分类栏复用到其他页面，直接拿过去即可，不需要从大组件中拆分代码。最小props原则：组件接收的props应该尽可能少且明确，不要传递不必要的props，更不要传递和组件功能无关的全局对象。比如一个按钮组件，只需要接收type、size、onClick、children这几个必要的props即可，不要把整个表单的状态对象都传给按钮，这样组件不会和特定业务逻辑耦合，复用性更高。分层设计原则：将组件分为通用基础组件、业务通用组件、页面组件三个层级。最底层的通用基础组件比如按钮、输入框、弹窗，和业务完全无关，可以在整个项目甚至多个项目中复用；中间层的业务通用组件比如用户头像、商品卡片，是当前项目通用的，和业务有一定关联但可以在多个页面复用；最上层的页面组件是特定页面的逻辑，只在当前页面使用。比如通用按钮组件统一封装了项目的样式规范、交互逻辑，所有页面的按钮都使用这个组件，后续要修改按钮的统一样式，只需要修改这一个组件即可，不需要每个页面都调整。二、提升组件复用性和可维护性的方法合理拆分组件，避免超大组件，单个组件的代码行数尽量控制在几百行以内，逻辑过于复杂时及时拆分为多个小组件或者自定义Hook。将公共逻辑抽象为自定义Hook，比如表单校验、请求封装、事件监听等通用逻辑，都可以抽为自定义Hook在多个组件中复用，避免重复代码。为组件添加清晰的注释和类型定义，比如使用TypeScript定义组件的props类型，标明每个参数的含义和类型，其他开发者使用组件时不需要看源码就能知道需要传递什么参数。避免通用组件耦合全局状态，不要在通用基础组件中直接使用Redux或者全局Context，需要的数据通过props传入，这样组件可以适配更多的场景，复用性更高。结论组件设计没有绝对