位置: IT常识 - 正文

前端面试题整理——React考点和回答(前端面试题目100及最佳答案)

编辑:rootadmin
一、基础使用 1、变量、表达式、class style、子元素和组件 2、if else、三元表达式、逻辑运算符 && || 3、map、key 4、bind this 5、关于event参数,react的event不是原生的,event.nativeEvent才是指向原生event,所有的事件都是 ...

推荐整理分享前端面试题整理——React考点和回答(前端面试题目100及最佳答案),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端面试题整理怎么做,前端面试题目100及最佳答案,前端面试题汇总.pdf,前端面试题汇总.pdf,前端面试题汇总.pdf,前端面试题汇总.pdf,前端面试题2021及答案,前端面试题大全,内容如对您有帮助,希望把文章链接给更多的朋友!

一、基础使用

1、变量、表达式、class style、子元素和组件

2、if else、三元表达式、逻辑运算符 && ||

3、map、key

4、bind this

5、关于event参数,react的event不是原生的,event.nativeEvent才是指向原生event,所有的事件都是挂在在document上。

6、传递自定义参数 ,最后一个参数会自动加上event

7、受控组件,表单的值受到 this.state 的控制影响。

8、组件使用

  (1)props 传递数据

  (2)props 传递函数

  (3)props 类型检查,使用prop-types插件

9、setState(重点)

  (1)不可变值

  不能直接修改state,使用不可变值

  (2)可能是异步更新

  setTimeout中的setState是同步的

  自定义的 DOM 事件,setState是同步的

  (3)可能会被合并

  传入函数不会被合并

10、组件生命周期

父子组件生命周期和VUE的调用顺序是一样的。

二、React 高级特性

1、函数组件:纯函数,输入props,输出JSX

没有实例,没有生命周期,没有state,不能扩展其他方法

2、非受控组件

  (1)ref

  (2)defaultValue、defaultChecked

  (3)手动操作DOM元素

非受控组件使用场景:必须手动操作DOM元素,setState实现不了,如文件上传<input type=file>、富文本编辑器

3、Portals

组件默认会按照既定层次嵌套渲染,如何让组件渲染到父组件以外?

使用react-dom中的createPortal,指定渲染dom节点位置

4、context

应用场景:从外层组件给下面所有子层传递简单参数。如设置主题、系统语言。

使用的API,如React.createContext,.Provider,.Consumer

5、异步组件

import()语法,React.lazy,React.Suspense

三、性能优化

1、shouldComponentUpdate(简称SCU)

React 默认父组件有更新,子组件则无条件也更新。

SCU默认返回true,使用SCU对props和states进行前后变化对比来确定组件进不进行渲染。

SCU必须要配合不可变值来进行,不然前后的值都是相等无法进行对比。

2、PureComponent 和 React.memo

PureComponent纯组件,在SCU中实现了浅比较

memo是函数组件中的PureComponent

3、不可变值 immutable.js

彻底拥抱不可变值,基于共享数据不是深拷贝,速度好。

有一定学习和迁移成本,按需使用。

四、组件公共逻辑的抽离

  (1)mixin,已被React废弃

  (2)高阶组件HOC

  高阶组件不是一种功能,而是一种模式,类似于工厂模式。如下代码示例:

const HOCFactory = (Component) =>{class HOC extends React.Component {// 这里定义多个组件的公共逻辑render(){return <Component {...this.props} /> // 返回拼装结果}}return HOC}const c1 = HOCFactory(Component1)const c2 = HOCFactory(Component2)

  如代码所示,传入一个组件,最后返回一个组件。方法中间定义公共逻辑。

  Redux 的 connect 就是高阶组件。

  (3)Render Props

  核心思想是通过一个函数将 class 组件的 state 作为 props 传递给纯函数组件

class Factory extends React.Component {constructor(){this.state = {} // 这里的 state 是多个组件的公共逻辑的数据}// 修改staterender(){return <div>{this.props.render(this.state)}</div>}}const App = ()=>( <Factory render={ // render 是一个函数组件 (props) => <p>{props.a}{props.b}</p> }/>)

  

HOC:模式简单,但会增加组件层级

Render Props:代码简洁,学习成本较高

五、Redux

1、基本概念

store,通过createStore(reducer),传入一个reducer来创建,来存放应用的状态。API有 { subscribe, dispatch, getState }

subscribe 订阅更新

dispatch 改变内部state的唯一方法,dispatch触发一个action

getState 获取state值

state,当state变化时需要返回全新的对象,坚持不可变值原则。

action,修改state值

reducer,形式为(state,action) => state 的纯函数,描述了action如何把state转变成下一个state

2、单项数据流

单项数据流代码步骤:

  (1)dispatch(action)

  (2)reducer => newState

  (3)subscribe 触发通知

3、react-redux

<Provider>

connect

mapStateToProps

mapDispatchToProps

4、异步action

同步是直接返回一个action对象,异步就是返回函数,其中带有dispatch 参数

使用异步action还需要使用中间件创建store,例如使用redux-thunk,以及使用redux的applyMiddleware的API

如:const store = createStore(reducer,applyMiddleware(thunk))

redux-thunk、redux-promise、redux-saga等中间件都可以实现异步action

5、中间件

中间件其实就是改造dispatch,如下自己实现个简单中间件:

// 复制原来的dispatchlet next = store.dispatch// 重新定义dispatchstore.dispatch = function dispatchAndLog(action){console.log('执行中间件逻辑',action)// 然后再执行原有dispatchnext(action)console.log('执行完后执行的逻辑',store.getState())}前端面试题整理——React考点和回答(前端面试题目100及最佳答案)

  

六、React-router

路由模式(hash、H5 history),同vue-router

路由配置(动态路由、懒加载),同vue-router

七、React 原理

1、函数式编程,重点是不可变值

2、vdom 和 diff算法

3、JSX本质是React.createElement(标签,属性对象,子节点)方法,类似于h函数。

h函数返回的是vnode,那么JSX返回的也是vnode。

第一个参数可能是个组件也可能是个html标签,所以就要求html标签一定是小写,组件名开头要大写,以此来判断。

4、合成事件

所有事件挂载到document上

event不是原生的,是SyntheticEvent合成事件对象

和 vue事件不同,和dom事件也不同

为什么要合成事件机制?

  (1)更好的兼容性和跨平台

  (2)挂载到domcument,减少内存消耗,避免频繁解绑

  (3)方便事件的统一管理(如事务机制)

5、setState batchUpdate

setState:异步(普通使用),同步(setTimeout、DOM事件)

     合并(对象形式),不合并(函数形式)

setState主流程:

batchUpdate 机制:

batchUpdate 机制其实是react的方法执行或者生命周期执行,一开始都会先定义一个batchUpdate状态为进行中,

方法结束后将状态改为false表示完成。所以按照eventloop的执行顺序,就会导致setState有时同步有时异步的情况。

React可以管理的入口都会命中batchUpdate机制。

transaction(事务)机制:

transaction 事务机制服务于batchUpdate 机制

6、组件渲染和更新过程

  (1)JSX渲染为页面过程

  定义props state

  解析JSX执行render()函数,生成vnode

  patch(elem,vnode),生成页面

  (2)setState 之后更新页面过程

  setState(newState) => dirtyComponents (可能有子组件)

  render() 生成 newVnode

  patch(vnode,newVnode)

7、更新的两个阶段

patch拆分成两个阶段:

  (1)reconciliation阶段:执行diff算法,纯JS计算

  (2)commit阶段:将diff结果渲染DOM

为什么会分成两个阶段?

如果不将patch拆分,可能会有性能问题。

因为JS是单线程,且和DOM渲染共用一个线程,当组件足够复杂,组件更新时计算和渲染压力都很大,

同时再有DOM操作需求(动画、拖拽等),可能会出现卡顿。

解决上面的性能问题进行拆分的具体解决方案是 fiber:

将 reconciliation 阶段进行任务拆分(commit无法拆分),

DOM需要渲染时暂停任务,空闲时恢复执行拆分的任务。

通过window.requestIdleCallback这个API来捕获DOM渲染时机,从而调配拆分的任务。但是该API有浏览器兼容限制。

面试真题:

1、React组件如何通讯

父子组件props

自定义事件

Redux 和 Context

2、JSX本质是什么

createElement函数

执行返回 vnode

3、context是什么,有何用途

父组件向下所有子孙组件传递信息,一些简单公共信息如主题色、语言等。复杂的公共信息用Redux

4、shouldComponentUpdate(SCU)的用途

性能优化,配合不可变值一起使用,否则会出错

5、描述redux单向数据流

(1)dispatch(action)

(2)reducer => newState

(3)subscribe 触发通知

6、setState是同步还是异步

setState主流程,batchUpdate机制。

7、什么时纯函数?

返回一个新值,没有副作用(不会修改其他值),重点就是不可变值。

8、函数组件和 class 组件的区别

函数组件:纯函数,输入props,输出JSX

没有实例,没有生命周期,没有state,不能扩展其他方法

9、什么是受控组件?

表单的值,受state控制,需要自行监听onChange,更新state

10、React 性能优化

渲染列表时加key

自定义事件、DOM事件及时销毁

合理使用异步组件

减少函数bind this的次数

合理使用 SCU、PureComponent 和 memo

合理使用 Immutable.js

webpack层面的优化,前端通用的性能优化

11、React 和 Vue 的区别

共同点:

都支持组件化

都是数据驱动视图

都是使用 vdom 操作 DOM

不同点:

React 使用 JSX 拥抱 JS,Vue 使用模板拥抱 html

React 函数式编程,Vue

本文链接地址:https://www.jiuchutong.com/zhishi/310328.html 转载请保留说明!

上一篇:万字详解JVM,让你一文吃透(jvm jmm)

下一篇:python实例创建销毁的函数整理(用python创建一个列表)

  • 苹果手机电量数字显示怎么设置(苹果手机电量数字怎么设置)

    苹果手机电量数字显示怎么设置(苹果手机电量数字怎么设置)

  • 苹果手机怎么设置小组件(苹果手机怎么设置铃声来电铃声)

    苹果手机怎么设置小组件(苹果手机怎么设置铃声来电铃声)

  • 搜索抖音号会有访客记录吗?(搜索抖音号会有主页访客记录吗)

    搜索抖音号会有访客记录吗?(搜索抖音号会有主页访客记录吗)

  • win7企业版和旗舰版有什么区别(win7企业版和旗舰版哪个小)

    win7企业版和旗舰版有什么区别(win7企业版和旗舰版哪个小)

  • 红米10xpro有红外线功能吗(红米10x有红外线)

    红米10xpro有红外线功能吗(红米10x有红外线)

  • WPS底纹填充颜色怎么设置(wps文字表格填充底纹)

    WPS底纹填充颜色怎么设置(wps文字表格填充底纹)

  • qq特别关心震动短一点(qq特别关心震动怎么开启)

    qq特别关心震动短一点(qq特别关心震动怎么开启)

  • 小红书怎么上传原视频(小红书怎么上传原画质视频)

    小红书怎么上传原视频(小红书怎么上传原画质视频)

  • 华为手机微信提示音怎么改不了(华为手机调微信提示音怎么调)

    华为手机微信提示音怎么改不了(华为手机调微信提示音怎么调)

  • 怎样登qq号不用短信验证码(怎样登qq号不用验证码)

    怎样登qq号不用短信验证码(怎样登qq号不用验证码)

  • ipadmini4支持快充吗(ipadmini4可以用18w快充)

    ipadmini4支持快充吗(ipadmini4可以用18w快充)

  • 内存储器包括什么(内存储器包括哪两部分)

    内存储器包括什么(内存储器包括哪两部分)

  • 华为手表watch gt2可以打电话吗(华为手表watch gt2怎么连接手机)

    华为手表watch gt2可以打电话吗(华为手表watch gt2怎么连接手机)

  • 华为m6怎么接u盘(华为m6插u盘没反应)

    华为m6怎么接u盘(华为m6插u盘没反应)

  • qq音乐可以单曲购买吗(qq音乐可以单曲循环吗)

    qq音乐可以单曲购买吗(qq音乐可以单曲循环吗)

  • 华为mate30pro开售时间(华为mate30pro开售价)

    华为mate30pro开售时间(华为mate30pro开售价)

  • 苹果xr长度(苹果xr长度和宽度多少厘米)

    苹果xr长度(苹果xr长度和宽度多少厘米)

  • 怎么看显卡是丐版(怎么看显卡是不是丐版的)

    怎么看显卡是丐版(怎么看显卡是不是丐版的)

  • 苹果手机中毒有什么表现(iphone 手机中毒)

    苹果手机中毒有什么表现(iphone 手机中毒)

  • 微信为什么看不到朋友圈(微信为什么看不到附近的人)

    微信为什么看不到朋友圈(微信为什么看不到附近的人)

  • iphone xr是什么基带(平果xr是什么基带)

    iphone xr是什么基带(平果xr是什么基带)

  • Apache.exe是什么文件的进程 Apache进程信息查询(apache是什么文件)

    Apache.exe是什么文件的进程 Apache进程信息查询(apache是什么文件)

  • 【解决方案】Collecting package metadata (current_repodata.json): failed(解决方案啥意思)

    【解决方案】Collecting package metadata (current_repodata.json): failed(解决方案啥意思)

  • 免交增值税怎么账务处理
  • 代开的增值税专票需要另外申报附加税吗?
  • 纳税申报的基本内容有哪些
  • 出口免税进项税额转出怎么计算
  • 小额转款
  • 盈余公积的作用与意义
  • 第二季度的季初资产总额和季末资产总额怎么填
  • 应付股利一直挂账怎么办
  • 土地补偿款收入要交什么税
  • 非公益捐赠如何调整应纳税所得额?
  • 特别纳税调整后 需要更正申报吗
  • 在途物资材料采购的区别
  • 项目一次性奖励会计分录怎么处理
  • 现金存款账户
  • 利润的计算方法数学
  • 投资款需要交印花税嘛
  • 金税四期什么时候结束
  • 买入返售金融资产是资产还是负债
  • 企业收入不进公账怎样做账?
  • 做研发费用需要什么条件
  • 无发票的费用怎么处理
  • 企业转让房产需要开具发票吗
  • 关于工程材料的图书有哪些
  • 关闭bios启动
  • 土地增值税清算管理规程
  • 股权和债权有无区别
  • 担保公司计提的费用
  • 没有独立显卡没有核显能开机吗
  • php文件包含的4种方式
  • gpt详解
  • 微信账单可以打清单吗
  • php大于等于号怎么打
  • php收发邮件
  • 发票金额有小数可以取整数吗
  • 商业企业退货与退款区别
  • sed指令可以打印文件的奇数或偶数行
  • python极客项目编程 豆瓣
  • 为什么增值税申报表保存不了
  • 金蝶软件账套备份在哪里
  • 公章损坏如何更换
  • sql server如何设置远程连接
  • mysql workbench简介
  • pos机刷卡未成功却扣了钱啥时候就退回来了
  • 材料采购如何做好市场调研工作
  • 小规模纳税人专票开1%还是3%
  • 免税收入不征税收入计入收入总额吗
  • 红字冲销发票流程
  • 房租收入怎么确认收入
  • 债务重组的会计例题
  • 委托加工合同如何签订
  • 公司办理网银
  • 金融存款利率
  • 分公司与总公司的责任承担
  • 对方公司收钱不开发票怎么办
  • 付出相对的词
  • 工资油补也要交税吗
  • 建筑公司劳务费怎么做账
  • 公司支票可以进私人账户吗有限额吗
  • 用SQL脚本读取Excel中的sheet数量及名称的方法代码
  • mysql found_row()使用详解
  • windows web server 2008
  • solaris教程
  • 服务主机windows错误报告
  • vm虚拟机中的浏览器在哪
  • linux版的oracle
  • linux shell怎么用
  • linux命令行图片
  • win10引导记录损坏修复方法详解
  • 如何设置ie8
  • androidserviceslibrary设置
  • node.js文件流
  • unity连接
  • shell脚本相互调用
  • jQuery实现TAB选项卡切换特效简单演示
  • jquery技巧
  • jquery 判断是否显示
  • javascript调用c语言
  • android中的常用布局有哪几种?
  • 外埠企业如何在经营地缴税
  • 3.0t交强险
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设