一天完成react面试准备

news2025/7/9 9:10:33

什么是 React的refs?为什么它们很重要

refs允许你直接访问DOM元素或组件实例。为了使用它们,可以向组件添加个ref属性。
如果该属性的值是一个回调函数,它将接受底层的DOM元素或组件的已挂载实例作为其第一个参数。可以在组件中存储它。

export class App extends Component {
  showResult() {
    console.log(this.input.value);
  }
  render() {
    return (
      <div>
        <input type="text" ref={(input) => (this.input = input)} />
        <button onClick={this.showResult.bind(this)}>展示结果</button>
      </div>
    );
  }
}

如果该属性值是一个字符串, React将会在组件实例化对象的refs属性中,存储一个同名属性,该属性是对这个DOM元素的引用。可以通过原生的 DOM API操作它。

export class App extends Component {
  showResult() {
    console.log(this.refs.username.value);
  }
  render() {
    return (
      <div>
        <input type="text" ref="username" />
        <button onClick={this.showResu1t.bind(this)}>展示结果</button>
      </div>
    );
  }
}

react-router4的核心

  • 路由变成了组件
  • 分散到各个页面,不需要配置 比如<link> <route></route>

传入 setstate函数的第二个参数的作用是什么?

第二个参数是一个函数,该函数会在 setState函数调用完成并且组件开始重渲染时调用,可以用该函数来监听渲染是否完成。

this.setstate(
  {
    username: "有课前端网",
  },
  () => console.log("re-rendered success. ")
);

新版生命周期

在新版本中,React 官方对生命周期有了新的 变动建议:

  • 使用getDerivedStateFromProps替换componentWillMount;
  • 使用getSnapshotBeforeUpdate替换componentWillUpdate;
  • 避免使用componentWillReceiveProps

其实该变动的原因,正是由于上述提到的 Fiber。首先,从上面我们知道 React 可以分成 reconciliationcommit两个阶段,对应的生命周期如下:

reconciliation

  • componentWillMount
  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate

commit

  • componentDidMount
  • componentDidUpdate
  • componentWillUnmount

Fiber 中,reconciliation 阶段进行了任务分割,涉及到 暂停 和 重启,因此可能会导致 reconciliation 中的生命周期函数在一次更新渲染循环中被 多次调用 的情况,产生一些意外错误

新版的建议生命周期如下:

class Component extends React.Component {
  // 替换 `componentWillReceiveProps` ,
  // 初始化和 update 时被调用
  // 静态函数,无法使用 this
  static getDerivedStateFromProps(nextProps, prevState) {}

  // 判断是否需要更新组件
  // 可以用于组件性能优化
  shouldComponentUpdate(nextProps, nextState) {}

  // 组件被挂载后触发
  componentDidMount() {}

  // 替换 componentWillUpdate
  // 可以在更新之前获取最新 dom 数据
  getSnapshotBeforeUpdate() {}

  // 组件更新后调用
  componentDidUpdate() {}

  // 组件即将销毁
  componentWillUnmount() {}

  // 组件已销毁
  componentDidUnMount() {}
}

使用建议:

  • constructor初始化 state
  • componentDidMount中进行事件监听,并在componentWillUnmount中解绑事件;
  • componentDidMount中进行数据的请求,而不是在componentWillMount
  • 需要根据 props 更新 state 时,使用getDerivedStateFromProps(nextProps, prevState)
    • 旧 props 需要自己存储,以便比较;
public static getDerivedStateFromProps(nextProps, prevState) {
    // 当新 props 中的 data 发生变化时,同步更新到 state 上
    if (nextProps.data !== prevState.data) {
        return {
            data: nextProps.data
        }
    } else {
        return null1
    }
}

可以在componentDidUpdate监听 props 或者 state 的变化,例如:

componentDidUpdate(prevProps) {
    // 当 id 发生变化时,重新获取数据
    if (this.props.id !== prevProps.id) {
        this.fetchData(this.props.id);
    }
}
  • 在componentDidUpdate使用setState时,必须加条件,否则将进入死循环;
  • getSnapshotBeforeUpdate(prevProps, prevState)可以在更新之前获取最新的渲染数据,它的调用是在 render 之后, update 之前;
  • shouldComponentUpdate: 默认每次调用setState,一定会最终走到 diff 阶段,但可以通过shouldComponentUpdate的生命钩子返回false来直接阻止后面的逻辑执行,通常是用于做条件渲染,优化渲染的性能。

参考:前端react面试题详细解答

React的Fiber工作原理,解决了什么问题

  • React Fiber 是一种基于浏览器的单线程调度算法。

React Fiber 用类似 requestIdleCallback 的机制来做异步 diff。但是之前数据结构不支持这样的实现异步 diff,于是 React 实现了一个类似链表的数据结构,将原来的 递归diff 变成了现在的 遍历diff,这样就能做到异步可更新了

在 ReactNative中,如何解决 adb devices找不到连接设备的问题?

在使用 Genymotion时,首先需要在SDK的 platform-tools中加入环境变量,然后在 Genymotion中单击 Setting,选择ADB选项卡,单击 Use custom Android SDK tools,浏览本地SDK的位置,单击OK按钮就可以了。启动虛拟机后,在cmd中输入 adb devices可以查看设备。

什么是高阶组件(HOC)

  • 高阶组件(Higher Order Componennt)本身其实不是组件,而是一个函数,这个函数接收一个元组件作为参数,然后返回一个新的增强组件,高阶组件的出现本身也是为了逻辑复用,举个例子
function withLoginAuth(WrappedComponent) {
  return class extends React.Component {

      constructor(props) {
          super(props);
          this.state = {
            isLogin: false
          };
      }

      async componentDidMount() {
          const isLogin = await getLoginStatus();
          this.setState({ isLogin });
      }

      render() {
        if (this.state.isLogin) {
            return <WrappedComponent {...this.props} />;
        }

        return (<div>您还未登录...</div>);
      }
  }
}

React 中 refs 的作用是什么

  • RefsReact 提供给我们的安全访问 DOM元素或者某个组件实例的句柄
  • 可以为元素添加ref属性然后在回调函数中接受该元素在 DOM 树中的句柄,该值会作为回调函数的第一个参数返回

redux 中间件

中间件提供第三方插件的模式,自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让我们改变数据流,实现如异步 action ,action 过 滤,日志输出,异常报告等功能

常见的中间件:

  • redux-logger:提供日志输出;
  • redux-thunk:处理异步操作;
  • redux-promise: 处理异步操作;
  • actionCreator 的返回值是 promise

React怎么做数据的检查和变化

Model改变之后(可能是调用了setState),触发了virtual dom的更新,再用diff算法来把virtual DOM比较real DOM,看看是哪个dom节点更新了,再渲染real dom

为什么虚拟dom会提高性能

虚拟dom相当于在js和真实dom中间加了一个缓存,利用dom diff算法避免了没有必要的dom操作,从而提高性能

具体实现步骤如下

  • JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中
  • 当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异
  • 把2所记录的差异应用到步骤1所构建的真正的DOM树上,视图就更新

虚拟DOM一定会提高性能吗?

很多人认为虚拟DOM一定会提高性能,一定会更快,其实这个说法有点片面,因为虚拟DOM虽然会减少DOM操作,但也无法避免DOM操作

  • 它的优势是在于diff算法和批量处理策略,将所有的DOM操作搜集起来,一次性去改变真实的DOM,但在首次渲染上,虚拟DOM会多了一层计算,消耗一些性能,所以有可能会比html渲染的要慢
  • 注意,虚拟DOM实际上是给我们找了一条最短,最近的路径,并不是说比DOM操作的更快,而是路径最简单

react diff 算法

我们知道React会维护两个虚拟DOM,那么是如何来比较,如何来判断,做出最优的解呢?这就用到了diff算法

diff算法的作用

计算出Virtual DOM中真正变化的部分,并只针对该部分进行原生DOM操作,而非重新渲染整个页面。

传统diff算法

通过循环递归对节点进行依次对比,算法复杂度达到 O(n^3) ,n是树的节点数,这个有多可怕呢?——如果要展示1000个节点,得执行上亿次比较。。即便是CPU快能执行30亿条命令,也很难在一秒内计算出差异。

React的diff算法

  1. 什么是调和?

将Virtual DOM树转换成actual DOM树的最少操作的过程 称为 调和 。

  1. 什么是React diff算法?

diff算法是调和的具体实现。

diff策略

React用 三大策略 将O(n^3)杂度 转化为 O(n)复杂度

策略一(tree diff):

  • Web UI中DOM节点跨层级的移动操作特别少,可以忽略不计
  • 同级比较,既然DOM 节点跨层级的移动操作少到可以忽略不计,那么React通过updateDepth 对 Virtual DOM 树进行层级控制,也就是同一层,在对比的过程中,如果发现节点不在了,会完全删除不会对其他地方进行比较,这样只需要对树遍历一次就OK了

策略二(component diff):

  • 拥有相同类的两个组件 生成相似的树形结构,
  • 拥有不同类的两个组件 生成不同的树形结构。

策略三(element diff):

对于同一层级的一组子节点,通过唯一id区分。

tree diff

  • React通过updateDepth对Virtual DOM树进行层级控制。
  • 对树分层比较,两棵树 只对同一层次节点 进行比较。如果该节点不存在时,则该节点及其子节点会被完全删除,不会再进一步比较。
  • 只需遍历一次,就能完成整棵DOM树的比较。

image-20210307224725566

那么问题来了,如果DOM节点出现了跨层级操作,diff会咋办呢?

答:diff只简单考虑同层级的节点位置变换,如果是跨层级的话,只有创建节点和删除节点的操作。

image-20210307224829092

如上图所示,以A为根节点的整棵树会被重新创建,而不是移动,因此 官方建议不要进行DOM节点跨层级操作,可以通过CSS隐藏、显示节点,而不是真正地移除、添加DOM节点

component diff

React对不同的组件间的比较,有三种策略

  1. 同一类型的两个组件,按原策略(层级比较)继续比较Virtual DOM树即可。
  2. 同一类型的两个组件,组件A变化为组件B时,可能Virtual DOM没有任何变化,如果知道这点(变换的过程中,Virtual DOM没有改变),可节省大量计算时间,所以 用户 可以通过 shouldComponentUpdate() 来判断是否需要 判断计算。
  3. 不同类型的组件,将一个(将被改变的)组件判断为dirty component(脏组件),从而替换 整个组件的所有节点。

注意:如果组件D和组件G的结构相似,但是 React判断是 不同类型的组件,则不会比较其结构,而是删除 组件D及其子节点,创建组件G及其子节点。

element diff

当节点处于同一层级时,diff提供三种节点操作:删除、插入、移动。

  • 插入:组件 C 不在集合(A,B)中,需要插入
  • 删除:
    • 组件 D 在集合(A,B,D)中,但 D的节点已经更改,不能复用和更新,所以需要删除 旧的 D ,再创建新的。
    • 组件 D 之前在 集合(A,B,D)中,但集合变成新的集合(A,B)了,D 就需要被删除。
  • 移动:组件D已经在集合(A,B,C,D)里了,且集合更新时,D没有发生更新,只是位置改变,如新集合(A,D,B,C),D在第二个,无须像传统diff,让旧集合的第二个B和新集合的第二个D 比较,并且删除第二个位置的B,再在第二个位置插入D,而是 (对同一层级的同组子节点) 添加唯一key进行区分,移动即可。

diff的不足与待优化的地方

尽量减少类似将最后一个节点移动到列表首部的操作,当节点数量过大或更新操作过于频繁时,会影响React的渲染性能

react有什么优点

  • 提高应用性能

  • 可以方便的在客户端和服务端使用

  • 使用jsx模板进行数据渲染,可读性好

在 Redux中使用 Action要注意哪些问题?

在Redux中使用 Action的时候, Action文件里尽量保持 Action文件的纯净,传入什么数据就返回什么数据,最妤把请求的数据和 Action方法分离开,以保持 Action的纯净。

shouldComponentUpdate 的作用

shouldComponentUpdate 允许我们手动地判断是否要进行组件更新,根据组件的应用场景设置函数的合理返回值能够帮我们避免不必要的更新

hooks 为什么不能放在条件判断里

以 setState 为例,在 react 内部,每个组件(Fiber)的 hooks 都是以链表的形式存在 memoizeState 属性中

image-20210302195353472

update 阶段,每次调用 setState,链表就会执行 next 向后移动一步。如果将 setState 写在条件判断中,假设条件判断不成立,没有执行里面的 setState 方法,会导致接下来所有的 setState 的取值出现偏移,从而导致异常发生。

这段代码有什么问题?

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: "有课前端网",
      msg: " ",
    };
  }
  render() {
    return <div> {this.state.msg}</div>;
  }
  componentDidMount() {
    this.setState((oldState, props) => {
      return {
        msg: oldState.username + " - " + props.intro,
      };
    });
  }
}

render ( < App intro=" 前端技术专业学习平台">,ickt )
在页面中正常输出“有课前端网-前端技术专业学习平台”。但是这种写法很少使用,并不是常用的写法。React允许对 setState方法传递一个函数,它接收到先前的状态和属性数据并返回一个需要修改的状态对象,正如我们在上面所做的那样。它不但没有问题,而且如果根据以前的状态( state)以及属性来修改当前状态,推荐使用这种写法。

React中的状态是什么?它是如何使用的

状态是 React 组件的核心,是数据的来源,必须尽可能简单。基本上状态是确定组件呈现和行为的对象。与props 不同,它们是可变的,并创建动态和交互式组件。可以通过 this.state() 访问它们。

跨级组件的通信方式?

父组件向子组件的子组件通信,向更深层子组件通信:

  • 使用props,利用中间组件层层传递,但是如果父组件结构较深,那么中间每一层组件都要去传递props,增加了复杂度,并且这些props并不是中间组件自己需要的。
  • 使用context,context相当于一个大容器,可以把要通信的内容放在这个容器中,这样不管嵌套多深,都可以随意取用,对于跨越多层的全局数据可以使用context实现。
// context方式实现跨级组件通信 
// Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据
const BatteryContext = createContext();
//  子组件的子组件 
class GrandChild extends Component {
    render(){
        return (
            <BatteryContext.Consumer>
                {                    color => <h1 style={{"color":color}}>我是红色的:{color}</h1>
                }            </BatteryContext.Consumer>
        )
    }
}
//  子组件
const Child = () =>{
    return (
        <GrandChild/>
    )
}
// 父组件
class Parent extends Component {
      state = {
          color:"red"
      }
      render(){
          const {color} = this.state
          return (
          <BatteryContext.Provider value={color}>
              <Child></Child>
          </BatteryContext.Provider>
          )
      }
}

对React中Fragment的理解,它的使用场景是什么?

在React中,组件返回的元素只能有一个根元素。为了不添加多余的DOM节点,我们可以使用Fragment标签来包裹所有的元素,Fragment标签不会渲染出任何元素。React官方对Fragment的解释:

React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组,而无需向 DOM 添加额外节点。

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

// 一般形式
render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}
// 也可以写成以下形式
render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/9072.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

字体图标以及svg图片的使用vite和webpack

先说下字体图标的使用 首先去阿里巴巴矢量图标库&#xff0c;选择你需要的图标&#xff08;可将svg图片自己上传&#xff09;添加到项目里&#xff0c;可以生成在线链接&#xff0c;或者下载资源包到本地。 资源包形式&#xff1a;在项目里创建一个fonts文件夹&#xff0c;将下…

linux 安装rar工具

1.到官网下载对应的编译包 点击跳转 也可以直接到我上传的资源去下载 https://download.csdn.net/download/liudongyang123/87032929https://download.csdn.net/download/liudongyang123/870329292.解压 tar -xf rarlinux-x64-620b2.tar.gz 3.进入到解压后的文件夹&#xf…

Spring Cloud Alibaba 版本对照表,集成nacos,sentinel,seata

一、Spring Cloud Alibaba 版本对照网址 https://github.com/alibaba/spring-cloud-alibaba/wiki/%E7%89%88%E6%9C%AC%E8%AF%B4%E6%98%8E 二、集成nacos nacos源码编译打包_qq_41369135的博客-CSDN博客 连接mysql nacos\conf下的application.properties spring.datasource.…

JDBC:PreparedStatement 插入BLOB类型的数据,PreparedStatement 批量处理,Connection 事务处理

JDBC&#xff1a;PreparedStatement 插入BLOB类型的数据&#xff0c;PreparedStatement 批量处理&#xff0c;Connection 事务处理 每博一文案 村上春树说: 你要做一个不动声色的大人了&#xff0c;不准情绪化&#xff0c;不准偷偷想念&#xff0c;不准回头看自己&#xff0c;…

VGG网络详解(实现猫猫和狗狗识别)

VGG VGG在2014年由牛津大学著名研究组vGG (Visual Geometry Group)提出&#xff0c;斩获该年lmageNet竞赛中Localization Task (定位任务)第一名和 Classification Task (分类任务)第二名。 感受野 首先介绍一下感受野的概念。在卷积神经网络中&#xff0c;决定某一层输出结…

Cloud Flare 添加谷歌镜像站(反向代理)

1.首先创建一个属于自己的镜像站 参考链接&#xff1a;利用cloudflare搭建属于自己的免费Github加速站 首先&#xff0c;点击 Cloud Flare 链接 &#xff0c;创建一个属于自己的账户 登录后&#xff0c;点击 Workers 这个子域&#xff0c;可以自定义 输入好后点set up 然后…

[附源码]java毕业设计基于实时定位的超市配送业务管理

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

本地外卖市场趋势怎么样?成为行业黑马的机会有多大呢?

随着互联网经济的发展&#xff0c;很多人倾向于足不出户就能吃到各种美味食物&#xff0c;因此外卖行业应运而生。这个新行业不仅解决懒人的饮食问题&#xff0c;也为社会提供了更多的就业机会——外卖配送员。据CNNIC的《2022年第49次中国互联网络发展状况统计报告》显示&…

学会这几款表白特效让你明年双十一不再是一个人

随着各种节日的到来&#xff0c;也伴随着许许多多的表白时机&#xff0c;为何不制作几款表白特效让你的行动更加充实呢&#xff0c;此文主要基于HTMLCSSJS制作网页特效&#xff0c;代码简洁&#xff0c;上手简单。 网页特效爱心画心3D爱心爱在心中3D旋转相册开发流程工具安装创…

C语言,从联合看字节序

C语言中的联合&#xff08;union&#xff09;类型为我们提供了操纵和解读“数据”的独特方式&#xff0c;它允许对同一块内存以不同的方式进行解读和操纵。 union UINT {unsigned int intValue; //占4个字节unsigned char bytes[4]; //占4个字节 }; //注意末尾分号不能少本…

aj-report页面嵌入其他项目

我们前面已经制作了自己的报表,我们可以通过共享报表将结果呈现给其他人,但是对一些小白来说,报表与其他项目合成是一个新的问题。怎么合成呢? 我们继续未完的探索。 1、首先,我们可以创建一个已做好的报表的链接: 如上图,我们可以在报表管理里面分享建成的报表,选…

UnRaid安装CloudDrive以实现阿里云盘、天翼云盘、115网盘挂载

文章目录1、前言2、准备工作2.1、修改Docker源2.2、开启Docker服务的MountFlags功能3、添加Docker应用CloudDrive4、添加云盘1、前言 最近一直在学习UnRaid这个Nas系统&#xff0c;折腾起来易用性十足&#xff0c;但由于其自带的应用市场不能完全满足所有人的需求&#xff0c;…

高纯度高活性艾美捷人重组MEGACD40L蛋白(可溶性)

艾美捷人重组MEGACD40L蛋白&#xff08;可溶性&#xff09;&#xff1a;高活性、高纯度CD40L蛋白&#xff0c;用于免疫应答的共刺激激活。 艾美捷人重组MEGACD40L蛋白&#xff08;可溶性&#xff09;特点&#xff1a; 1、高活性MEGACD40L低聚物模拟体内膜辅助CD40L聚集和刺激&…

【C++修炼之路】9. string类的模拟实现

每一个不曾起舞的日子都是对生命的辜负 string类的模拟实现前言代码&#xff1a;1. string.h2. test.cpp扩展&#xff1a;内置类型的拷贝构造总结前言 本篇文章是衔接上一篇string&#xff0c;进行string的模拟实现&#xff0c;其中包含了众多重载函数&#xff0c;以及一些实现…

pytest中allure特性

一、allure.step allure报告最重要的一点是&#xff0c;它允许对每个测试用例进行非常详细的步骤说明 通过 allure.step() 装饰器&#xff0c;可以让测试用例在allure报告中显示更详细的测试过程 step() 只有一个参数&#xff0c;就是title&#xff0c;你传什么&#xff0c;在…

Linux------网络基础1

文章目录计算机网络的发展历程网络协议计算机网络分层体系结构局域网通信的原理IP地址和 MAC地址的区别计算机网络的发展历程 简单的了解一下就行&#xff0c;图就不提供了。 1&#xff0c;最开始&#xff0c;计算机之间是相互独立的&#xff0c;不能沟通交流。 2&#xff0c;…

第02章_MySQL的数据目录

第02章_MySQL的数据目录1. MySQL8的主要目录结构1.1 数据库文件的存放路径1.2 相关命令目录1.3 配置文件目录2. 数据库和文件系统的关系2.1 查看默认数据库2.2 数据库在文件系统中的表示2.3 表在文件系统中的表示1. MySQL8的主要目录结构 [rootatguigu01 ~]# find / -name mys…

React中的useEffect(副作用)

目录 useEffect(副作用)介绍 useEffect(副作用)各种写法的调用时刻 1.写法一&#xff1a;没有依赖项时 父组件给子组件传值&#xff1a; 2.写法二:依赖项中有监听的值时 3.写法三&#xff1a;依赖项为空数组时 4.写法4&#xff1a;清除副作用写法(假如副作用是一个定时器,…

【C++】string类的模拟实现

文章目录一、string类的构造、拷贝构造、赋值重载以及析构1.构造函数2.拷贝构造3.swap问题4.赋值重载5.析构函数二、常用接口1.c_str2.[]3.迭代器和范围for4.size和capacity三、插入1.reserve和resize2.push_back3.append4.5.insert四、删除1.erase2.clear五、查找1.find六、运…

Nginx

What is Nginx&#xff1f; Nginx 同 Apache 一样都是一种 Web 服务器。基于 REST 架构风格&#xff0c;以统一资源描述符&#xff08;Uniform Resources Identifier&#xff09;URI 或者统一资源定位符&#xff08;Uniform Resources Locator&#xff09;URL 作为沟通依据&…