通过五个级别！React高频面试题攻略_1

作者丨MichaelPautov　　译者|翟可　　评论人丨Noe　　说到前端开发，ReactJS是当下最热门的选择之一。下面列出了最常见的ReactJS面试问题。　　从易到难，一起来看看五道高频面试题吧。为什么使用React而不是Angular？　　使用React构建动态Web应用程序更容易，因为它具有更多功能且代码更少，但对于JavaScript应用程序，代码往往会变得复杂。　　Web应用程序将更快，这要归功于React应用程序中使用的虚拟DOM。虚拟DOM不会更新真实DOM中的所有组件，而是分析其先前的状态并仅更新那些已更改的组件。　　换句话说，可以通过使用组件创建新的工件来重用每个React项目的工件。为了节省开发时间，这些预构建的组件封装了自己的逻辑和控件，可以在整个程序中共享。　　React具有单向数据流。在React应用程序的设计过程中，我们通常会将子组件层叠在其父组件中。故障排除也更简单，因为数据流经单一通道，从而更容易识别程序中的问题所在。　　Facebook发布了一个浏览器插件，可以让我们更方便地调试React应用程序。由于这一改进，调试React网络应用程序变得更快、更容易。Reduxthunk的作用是什么？使用Reduxthunk，您可以构建返回函数而不是操作的操作创建器。通过使用延迟功能，可以延迟操作直到满足特定条件。您可以将两个存储方法getState和dispatch传递给内部函数。　　必须先使用applyMiddleware()方法：import{createStore,applyMiddleware}from'redux';importthunkfrom'redux-thunk';importrootReducerfrom'./reducers/index';conststore=createStore(rootReducer,应用中间件（thunk））；React中的useState()是做什么的？　　useState()ReactHook允许在功能组件中使用状态变量。这种方法非常适合动态操作DOM。　　SetCounter方法是UseState(0)的第二个参数，它返回一个元组，count是第一个参数，setCounter方法是第二个参数。..const[count,setCounter]=useState(0);const[otherStuffs,setOtherStuffs]=useState(..);..constsetCount=()=>{setCounter(count+1);setOtherStuffs(..);..};　　要更新计数，您可以使用setCounter()方法。在此示例中，SetCounter()用于setCount方法中，可以执行各种操作。当我们使用钩子时，我们可能使我们的代码更有用，如果不是绝对必要的话，避免使用基于类的组件。useEffect钩子有用吗？useEffectReactHook可用于在功能组件中发挥边际效用。如果你的组件需要在渲染后或状态改变后做一些事情，你可以使用useEffect来通知React。　　React会在DOM更新功能完成后立即记住并执行您提供的功能。除了更新页面标题之外，此函数还可用于从Web服务器获取数据。　　useEffect钩子在第一次渲染组件和每次后续更新后自动启用。完成后，DOM将被修改。　　反应钩子。useEffect可以和两个参数一起使用：　　useEffect(callback[,dependencies])　　callback1表示包含边际效用的函数，在修改DOM后立即调用。第二个参数的dependencies数组可以是任何你想要的。只要渲染之间的依赖关系发生变化，就会调用useEffect()。import{useEffect}from'react';functionWelcomeGreetings({name}){constmsg=`嗨，${name}!`;useEffect(()=>{document.title=`欢迎你${name}`;},[name]);return

;}　　边际效用是由于前面的代码而发生的任何事情，但没有直接修改。因此，useEffect现在包含一个用于更新文档标题的回调。如果你想避免每次使用useEffect(callback,[name])时WelcomeGreetings组件的展示标题都改变，你可能需要指定name作为useEffect的效果依赖。增强React性能的一些方法　　使用useMemo函数()　　这个Reacthook可以用来缓存CPU密集型任务。　　对于某些React应用程序，持续使用CPU密集型功能可能会导致组件重新渲染时延迟渲染。useMemo()钩子可用于缓存此类程序。仅在必要时使用CPU密集型方法useMemo()。　　保持健康状态　　您希望状态尽可能接近您希望的状态。　　React应用的父组件可能包含很多冗余状态，这使得代码的理解和管理变得更加困难。当有许多状态时，整个事情会重演。　　最好的方法是隔离对父组件不重要的状态。　　摆脱延迟加载。　　延迟加载最大限度地降低了网络应用程序性能问题的风险，使用这种技术可以加快React应用程序的启动速度。　　原文链接：https://hackernoon.com/top-5-react-interview-questions-in-2022译者介绍　　社区编辑翟可，目前在杭州从事软件研发，做过视频您可以享受分享知识的过程，并通过商业和信用报告系统丰富您的生活。