react面试题

最新推荐文章于 2024-07-21 16:08:28 发布

Api工程师~

最新推荐文章于 2024-07-21 16:08:28 发布

阅读量225

点赞数

分类专栏：面试题 react 文章标签： react.js javascript node.js

本文链接：https://blog.csdn.net/m0_57479235/article/details/118710700

版权

react 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

面试题

10 篇文章 1 订阅

订阅专栏

1、State的更新会被合并？

浅合并

2、render函数为什么return要加()

1、圆括号的作用是分割作用域和执行，在render中是给babel-jsx解析用的，这样写更符号原生编码习惯的的思维，也方便解析
2、return的圆括号是为了代码换行，不用括号的话只能写一行

用[]会渲染页面,有可能会出现key值报错

3、render为什么会执行多次?

6、React 合成事件和原生 DOM 事件的主要区别:

（1）React 组件上声明的事件没有绑定在 React 组件对应的原生 DOM 节点上。

（2）React 利用事件委托机制，将几乎所有事件的触发代理（delegate）在 document 节点上，事件对象(event)是合成对象(SyntheticEvent)，不是原生事件对象，但通过 nativeEvent 属性访问原生事件对象。

（3）由于 React 的事件委托机制，React 组件对应的原生 DOM 节点上的事件触发时机总是在 React 组件上的事件之前。

7、React 事件概述

React 根据W3C 规范来定义自己的事件系统，其事件被称之为合成事件 (SyntheticEvent)。而其自定义事件系统的动机主要包含以下几个方面：

（1）抹平不同浏览器之间的兼容性差异。最主要的动机。

（2）事件"合成"，即事件自定义。事件合成既可以处理兼容性问题，也可以用来自定义事件（例如 React 的 onChange 事件）。

（3）提供一个抽象跨平台事件机制。类似 VirtualDOM 抽象了跨平台的渲染方式，合成事件（SyntheticEvent）提供一个抽象的跨平台事件机制。

（4）可以做更多优化。例如利用事件委托机制，几乎所有事件的触发都代理到了 document，而不是 DOM 节点本身，简化了 DOM 事件处理逻辑，减少了内存开销。（React 自身模拟了一套事件冒泡的机制）

（5）可以干预事件的分发。V16引入 Fiber 架构，React 可以通过干预事件的分发以优化用户的交互体验。

注：「几乎」所有事件都代理到了 document，说明有例外，比如audio、video标签的一些媒体事件（如 onplay、onpause 等），是 document 所不具有，这些事件只能够在这些标签上进行事件进行代理，但依旧用统一的入口分发函数（dispatchEvent）进行绑定。

8、当文本中带有标签该如何渲染

固定语法<div dangerouslySetInnerHTML={{ __html: iHtml }}></div>

9、react是什么

用于动态构建用户界面的javaScript库（只关注视图）——不用操作dom的意思

10、react是谁开发的

由Facebook开发，且开源。

11、react的优点

1、高效，使用虚拟DOM+优秀的Diff算法，尽量减少与真实DOM的交互
2、组件化开发
3、声明式编码
3、在React Native中可以使用React语法进行移动端开发

12、react如何将虚拟DOM渲染到页面

ReactDOM.render(被渲染的虚拟DOM,document获取的根节点)

13、创建虚拟DOM的两种方式

纯js： const VDOM = React.createElement(标签名,标签属性,标签内容)
jsx语法（纯js的语法糖，运行时会自动编译为纯js的方式）

15、关于虚拟DOM：

1、本质是Object类型的对象（一般对象）
2、虚拟DOM比"较",真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
3、虚拟DOM最终会被React转化为真实的DOM，呈现在页面上

16、jsx

1、全称：javaScript XML
2、react定义的一种类似于XML的JS扩展语法：js + XML
更高效创建虚拟DOM
3 语法规则：

  定义虚拟DOM时，不要写引号。
  标签中混入JS表达式时要用{}
  样式的类名指定不要用class，要用className。
  style写法 style={{color:'white',fontSize:'29px'}}(外边的阔号时表示里面放的js表达式，这里放的是一个对象)
  只有一个根标签
  标签必须闭合
  标签首字符
    若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错
	若大写字母开头，react就去渲染相应的的组件，若组件没有定义，则报错。## XML

17、XML早期用于存储和传输数据,后来被JSON取代

原因是：XML存储的信息会附带标签，JSON就不用，比较轻便，具有parse和stringify两个属性，转化数据类型很方便

18、为什么react中的方法会丢失this

当我们onClick={this.fn}时
1，只是把onClick指向堆中的fn，调用时也就没有实例————所以this会指向window
2，因为bable编译会自动添加strick(严格模式),所以this就会变为undefined

19、执行了ReactDOM.render(…) 之后，都发生了什么？

1、React解析组件标签，找到了Directive组件。
2、发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
3、将render将返回的虚拟DOM转为真实DOM，随后呈现在页面上

render中的this是组件实例对象

20、constructor作用

初始化state
函数
构造器能省略就省略
构造器是否接收props，是否传递super，取决是否希望在构造器中通过this访问props

21、解读`this.fn=this.fn.bind(this)`

首先我们都知道，方法挂在构造函数的prototype(原型)上,这里我们将实例的fn属性=修改了this的fn函数
此时的实例是这个样子{fn:fn(),……} 原型上的fn函数并不会改变
但是当我们调用this.fn,会首先在对象自身找fn,从而解决了this指向的问题

22、初始化state必须在constructor中吗

初始化state也可以可以constructor外部，实例上也会增加state这个属性

23、porps和state的相同点，和不同点

不同点：

props：来自父组件，不可修改，但是可以运算{ num+1 }
state: 组件实例的属性，可修改

相同点：

值改变都可以触发组件的更新

24、函数组件和class组件的区别？

函数组件使用可以接收props参数，无法使用state，refs

25、获取dom须知和事件执行机制

React中使用的是自定义（合成）事件，而不是使用的原生DOM事件 ————为了更好的兼容性
React中的事件是通过事件委托方式处理的（委托组件最外层的元素） ————为了高效性
通过event.target得到发生事件的DOM元素对象 ————不要过度的使用ref

26、受控组件，非受控组件

受控组件——每次输入都会更新状态
非受控组件————只有用到的时候才获取（会用大量的ref，不推荐）

27、react生命周期

必须熟悉的：

constructor()
render()
componentDidMount()
componentDidUpdate(preProp,preState,snaoshotValue) 更新阶段
componentWillUnmount() 卸载阶段

以下知道即可————————

getDerivedStateFromProps()
需要加static，接收两个参数（props,state）
作用是让返回一个状态对象或null，且此值不可修改
场景 state的值任何时候都取决于state
getSnapshotBeforeUpdate() 在更新之前获取快照

28、卸载组件

 del = () => {
    ReactDOM.unmountComponentAtNode(document.getElementById("root"))
  }

29、如何让组件不发生无效的重新渲染

重写shouldComponentUpdate()方法

比较新旧state或props数据，如果有变化才返回true，如果没有返回false
使用PureComponent

PuerComponent重写了shouldComponentupdate(),只有state或props数据有变化才会返回true
【注意】：
只是进行state和props数据的浅比较，如果只是数据对象内部数据变了，返回false
不要直接修改state数据，而是要产生新数据
项目中一般用PureComponent来优化