前端面试题整理——React考点和回答

  • 前端面试题整理——React考点和回答已关闭评论
  • 18 次浏览
  • A+
所属分类:Web前端
摘要

一、基础使用1、变量、表达式、class style、子元素和组件2、if else、三元表达式、逻辑运算符 && ||

一、基础使用

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、组件生命周期

前端面试题整理——React考点和回答

 

 父子组件生命周期和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 是多个组件的公共逻辑的数据   }   // 修改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 触发通知

前端面试题整理——React考点和回答

 

 

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、中间件

前端面试题整理——React考点和回答

 中间件其实就是改造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主流程:

前端面试题整理——React考点和回答

 

 

batchUpdate 机制:

前端面试题整理——React考点和回答

前端面试题整理——React考点和回答

 

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

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

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

 

transaction(事务)机制:

前端面试题整理——React考点和回答

 

 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 把你想要的都给你