react面试题

简介: react面试题

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来优化


30、路径改变,样式文件丢失的3种解决办法?


直接把’./‘替换为’/’

%PUBLIC_URL% (相当于public的绝对路径)

用hash值,不用history,因为#后边的内容不会带到服务器


31、SPA的理解


单页WEB应用

整个应用只有一个完整的应用

点击页面中的链接不会刷新页面,指挥做局部的更新

数据都需要通过ajax请求获取,并在前端异步展现

相关文章
|
3月前
|
JSON 缓存 前端开发
【React】React原理面试题集锦
本文集合一些React的原理面试题,方便读者以后面试查漏补缺。作者给出自认为可以让面试官满意的简易答案,如果想要了解更深刻,可以点击链接查看对应的详细博文。在此对链接中的博文作者非常感谢🙏。
93 0
|
3月前
|
缓存 前端开发 JavaScript
【面试题】金九银十,你准备好面试了吗? (30w字前端面试题总结)( React)
【面试题】金九银十,你准备好面试了吗? (30w字前端面试题总结)( React)
153 0
|
2月前
|
缓存 前端开发 JavaScript
React常见面试题(2024最新版)
React常见面试题(2024最新版)
60 1
|
3月前
|
存储 缓存 前端开发
【React】Hooks面试题集锦
本文集合一些React的Hooks面试题,方便读者以后面试查漏补缺。作者给出自认为可以让面试官满意的简易答案,如果想要了解更深刻,可以点击链接查看对应的详细博文。在此对链接中的博文作者非常感谢🙏。
124 1
|
3月前
|
缓存 前端开发 JavaScript
React 面试题2
React 面试题2
|
3月前
|
缓存 前端开发 JavaScript
React 面试题
React 面试题
148 0
|
3月前
|
存储 缓存 JavaScript
【面试题】当面试官让我回答React和Vue框架的区别......
【面试题】当面试官让我回答React和Vue框架的区别......
你要的 React 面试知识点,都在这了
React是流行的javascript框架之一,在2019年及以后将会更加流行。React于2013年首次发布,多年来广受欢迎。它是一个声明性的、基于组件的、用于构建用户界面的高效javascript库。
1836 0
|
3月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
264 0
|
3月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
90 0