前端面试题 ： React

我的掘金之React篇

React

• state用于内部，不与外部进行交互
• props单项数据流，内部不改变
• react.js == > React核心库

react中的函数式组件及类组件的选择？

• 组件内部需要包含内部状态state或者需要用到生命周期时考虑类组件，其他情况使用函数组件（无状态组件）。

react中受控组件和非受控组件区别？

• 非受控组件：表单元素的数据是存放在dom中。取值通过ref。

• 受控组件：表单元素的数据托管到react组件中，交由react控制。取值通过state。

调用setState 之后发生了什么？

• setState执行机制：合并、更新，多次调用，先存入队列，在合适的时机覆盖
• 多次调用setStateDom更新完毕之后执行，state中的数据不立即修改而是存入队列，与之前state的数据合并，走一遍确认没有其他数据需要更新之后，根据队列中需要修改的数据进行比较，最后覆盖.
• 调用setstate函数之后，react 会将nextState与当前的组件state进行合并，触发一个调和过程。
  在这个过程中react会基于底层diff算法（diff通过key能相对精准的知道哪些位置发生了改变）得到新dom树与老dom树的节点差异，
  根据差异，对界面进行最小化重渲染。

React中key的作用？

• 提高性能、优化
• diff算法【比较差异】
• key是一个用于追踪哪些元素被修改或者被移除的标识。

虚拟Dom

• 普通的对象【Object类型的实例】
• 能够描述真实Dom的特点（不是所有都是虚拟Dom）
  <tagName>、props、children
• 真实Dom消耗性能更大

JSX语法 【注：jsx不是js，不能运行】？

• jsx需要被babel转码，转化成VDom
• 用标签写虚拟Dom转化为React.createElement( )方法的调用

语法

• 遇到{ } 解析成 JS
• 遇到< >解析成 虚拟Dom

React新增生命周期？

• getDerivedStateFromProps，getSnapshotBeforeUpdate
• getDerivedStateFromProps:从属性中导出【用于state与props发送耦合时】

React路由跳转与a标签link的区别？

• <a href="/"></a>是前台向服务端发起请求，寻求资源
• 路由跳转则不会发送请求，而是浏览器url地址栏发生改变，根据路径的变化切换相应的组件

单页面刷新之后，视图如何正确显示（路由向后台发送请求）？

页面被刷新后会向后台发送请求，而后台没有对应的接口，为了在页面的正常展示，后台需要做相应的处理

• 前端路由在后台路由中不一定存在
• 后台检测到是前端单页面的路由，响应单页面文件，并更新视图状态
  最后的项目都要打包成js文件，引入页面，后台通过前端路由返回对应的组件
  具体就是根据url路径返回<div id="root"></div>,导入相应的js文件

React如何提高组件性能？

• 加key
• PureComponent 详解
• shouldComponentUpdate

Redux的原理【机制】

• 提供存储的机制，内存空间：2kB
  状态管理仓库，管理组件状态
  Store ==> 存储
  getState ==> 查看仓库状态【调用getState ，传递action指导如何修改，触发reducer修改数据，返回newState（最新的状态），最终获取state的最新数据】
  dispatch ==> 修改
• 不用Redux也可更新数据
  store.subscribe详解
  监听，当仓库状态发生改变时就会执行，调用setState({ }),实现实时数据更新

React通信

• 父子
  父组件：指明key值，value值
  子组件：props接受key值，value值
• 子父
  子组件：回调函数
  父组件：接受参数
• Redux仓库
• Context
Provider
Consumer
• 发布订阅模式【先订阅再发布】

React高阶组件【本质为函数】

接受一个组件，并返回一个新的组件
withRouter路由拦截