前端面试题汇总（前端面试题整理——React考点和回答）

时间2025-05-02 12:49:33分类IT科技浏览3349

导读：一、基础使用...

一、基础使用

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

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

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

　　Redux 的 connect 就是高阶组件。

　　（3）Render Props

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

class Factory extends React.Component { constructor(){ this.state = {} // 这里的 state 是多个组件的公共逻辑的数据 } // 修改state render(){ 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

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 ，如下自己实现个简单中间件：

// 复制原来的dispatch let next = store.dispatch // 重新定义dispatch store.dispatch = function dispatchAndLog(action){ console.log(执行中间件逻辑,action) // 然后再执行原有dispatch next(action) console.log(执行完后执行的逻辑,store.getState()) }

六、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 声明式编程

React 更多需要自力更生，Vue 把你想要的都给你

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。