过五关!React高频面试题指南

译文 精选
开发 前端
React高频面试题

  作者丨Michael Pautov

  译者 | 翟珂

  审校丨Noe

  谈到前端开发,ReactJS是目前最受欢迎的选择之一。下面列出的是最常问到的ReactJS面试题。

  从易到难,让我们看一下五个高频面试题。

为什么不使用Angular 而要使用React呢?

  使用React构建动态网络应用更简单,因为它编码少功能多,但对于JavaScript应用程序,代码往往会变得复杂。

  由于在React应用中使用了虚拟DOM,网络应用的速度会更快。虚拟DOM不会更新实际DOM中的所有组件,而是分析其先前的状态,只更新那些已经改变的组件。

  换句话说,每个React项目的构件可以通过使用组件创建新的构件来重新使用。为了节省开发时间,这些预建的组件都封装了自己的逻辑和控制,可以在整个程序中共享。

  React有单向的数据流。在React应用程序的设计过程中,我们通常将子组件分层在其父组件内。由于数据以单一渠道流动,故障排除也更简单,更容易确定程序中的问题所在。

  Facebook已经发布了一个浏览器插件,使我们能够更容易地调试React应用程序。由于这一改进,调试React网络应用变得更快、更简单了。

Redux thunks的作用是什么?

      使用Redux thunk,你可以建立返回函数而不是动作的动作创建器。通过使用delay函数,一个动作可以被延迟,直到满足一个特定的条件。你可以将两个存储方法getState和dispatch传递给内部函数。

  必须先使用applyMiddleware()方法:

import{ createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';
const store = createStore(
rootReducer,
applyMiddleware(thunk)
);

React中的useState()是做什么的?

  useState() React Hook允许在功能组件中使用状态变量。这种方法对于动态控制DOM是非常好的。

  SetCounter方法是UseState(0)的第二个参数,它返回一个元组,count是第一个参数,setCounter方法是第二个参数。

..
const [count, setCounter] = useState(0);
const [otherStuffs, setOtherStuffs] = useState(..); ..
const setCount = () => {
setCounter(count + 1);
setOtherStuffs(..);
..
};

  要更新count,可以使用setCounter()方法。在这个例子中,SetCounter()是在setCount方法中使用的,这里可以采取各种不同的行动。当我们使用钩子时,我们可能使我们的代码更有用,如果不是绝对必要的话,可以避免使用基于类的组件。

useEffect钩子有用吗?

      useEffect React Hook可以用来在功能组件中产生边际效用。如果你的组件需要在渲染后或状态改变后进行某些操作,那么你可以使用useEffect来通知React。

  React会记住并在DOM更新性能完成后立即执行你提供的函数。除了更新页面标题之外,这个函数也可以用来从Web服务器上获取数据。

  useEffect钩子会在组件的第一次渲染和随后的每次更新后自动启用。完成后,DOM将被修改。

  用于React的钩子。可以用两个参数来使用useEffect:

  useEffect(callback[, dependencies])

  回调1代表包含边际效用的函数,它在DOM修改后立即被调用。第二个参数的依赖数组可以是你想要的任何东西。只要渲染之间的依赖关系改变,useEffect()就会被调用。

import { useEffect } from 'react';
function WelcomeGreetings({ name }) {
const msg = `Hi, ${name}!`;
useEffect(() => {
document.title = `Welcome to you ${name}`;
}, [name]);
return <div>{msg}</div>;
}

  边际效用是指由于前面的代码而发生的任何事情,但并不直接修改。因此,useEffect现在包含一个用于更新文档标题的回调。

       如果你想避免每次使用useEffect(callback, [name])时,WelcomeGreetings组件的演示文稿标题出现变化,你可能需要指定名称作为useEffect的效果依赖。

增强React性能的一些方法

  • 使用useMemo函数()
  • 这个React钩子可以用来缓存CPU密集型的任务。
  • 对于某些React应用程序,持续使用CPU密集型函数可能会导致组件重新渲染时的延迟渲染。useMemo()钩子可用于缓存此类程序。只有必要时,才使用CPU密集型方法useMemo()。
  • 保持一个合适的状态
  • 你希望在可行的情况下让状态尽可能地接近你想要的位置。
  • React应用程序的父组件可能包括大量冗余的状态,这使得理解和管理代码更加困难。当有众多状态时,整个事情就会重演。
  • 最好的办法是隔离那些对父组件并不关键的状态。
  • 摆脱迟缓加载。
  • 懒惰加载将网络应用性能问题的风险降到最低,用这种技术加快React应用的启动速度。

  原文链接:https://hackernoon.com/top-5-react-interview-questions-in-2022

译者介绍

  翟珂,51CTO社区编辑,目前在杭州从事软件研发工作,做过电商、征信等方面的系统,享受分享知识的过程,充实自己的生活。

责任编辑:张洁 来源: 51CTO技术栈
相关推荐

2021-03-29 08:02:35

面试简历项目

2021-02-23 12:43:39

Redis面试题缓存

2021-01-22 11:58:30

MySQL数据库开发

2019-12-26 09:52:33

Redis集群线程

2021-08-05 05:04:50

热部署模型字节

2019-11-26 10:30:11

CSS前端面试题

2020-08-31 12:20:07

Python面试题代码

2019-03-23 20:00:04

面试react.js前端

2021-12-08 11:18:21

Spring Bean面试题生命周期

2022-04-15 09:23:29

Kubernetes面试题

2020-03-03 17:47:07

UDP TCP面试题

2020-06-04 14:40:40

面试题Vue前端

2009-05-13 09:06:26

面试技巧求职技巧

2011-03-24 13:27:37

SQL

2021-01-21 08:00:50

嵌入式笔试面试

2023-11-13 07:37:36

JS面试题线程

2023-10-20 15:58:27

Python删除指定字符

2021-09-07 18:40:55

单向数据流数据

2021-11-02 10:10:38

面试元素语言

2010-08-24 14:44:28

职场
点赞
收藏

51CTO技术栈公众号