React最新高频面试题

1、React jsx原理

JSX全称javascript XML 是react的语法糖，可以让我们在js中脱离字符串直接编写html代码，本身不能被浏览器读取，必须使用@bable/preset-react和webpack等工具

（1）bable编译
当我们对代码进行编译的时候，babel会将我们在组件中编写的jsx代码转化为React.createElement的表达式，createElement方法有三个参数，分别为type(元素类型）、attributes(元素所有属性)、children(元素所有子节点)；

2)生成element
当render方法被触发以后，createElement方法会执行，返回一个element对象，这个对象描述了真实节点的信息，其实就是虚拟dom节点；

(3)生成真实节点(初次渲染)
这时候我们会判断element的类型，如果是null、false则实例一个ReactDOMEmptyComponent对象; 是string、number类型的话则实例一个ReactDOMTextComponent对象； 如果element是对象的话，会进一步判断type元素类型，是原生dom元素，则实例化ReactDOMComponent； 如果是自定义组件，则实例化ReactCompositeComponentWrapper；在这些类生成实例对象的时候，在其内部会调用 mountComponent方法，这个方法里面有一系列浏览器原生dom方法，可以将element渲染成真实的dom并插入到文档中；

2、React组件数据共享

1.（父组件）向（子组件）传递信息 : porps传值
2.（父组件）向更深层的（子组件） 进行传递信息 : context
3.（子组件）向（父组件）传递信息：callback
4.没有任何嵌套关系的组件之间传值（比如：兄弟组件之间传值）: 利用共同父组件 context通信、自定义事件
5.利用react-redux进行组件之间的状态信息共享 : 组件间状态信息共享：redux、flux、mobx等

3、React context

Context提供了一个无需为每层组件手动添加props，就能在组件树间进行数据传递的功能
某些全局属性，通过父子props传递太过繁琐，Context提供了一种组件之间共享此类值的方式，而不必显式的通过组件树逐层传递props
Context应用场景在于很多不同层级的组件访问同样的数据，如果你只是想避免层层传递一些属性，组件组合有时候是一个比Context更好的方案

// ①创建
const ThemeContext = React.createContext('xxx')

// ②注入---提供者 在入口或者你想要注入的父类中，且可以嵌套，里层覆盖外层
return (
  <ThemeContext.Provider value="yyy">
  {children}
  <ThemeContext.Provider>
)

// ③使用---消费者 需要使用共享数据的子类中
// 方式一
static contextType = ThemeContext
// 方式二
Class.contextType = ThemeContext 
render() {
  let value = this.context
  /* 基于这个值进行渲染工作 */
}
// 方式三
return(
  <ThemeContext.Consumer>
  { value => /* 基于 context 值进行渲染*/ }
  </ThemeContext.Consumer>
)

4、React 生命周期函数

1、 老版生命周期函数：
（1）挂载阶段：
constructor()
componentWillMount()
render()
componentDidMount()
(2)更新阶段
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
(3)卸载阶段
componentWillUnmount()

2、新版生命周期函数：
（1）挂载阶段：
constructor()
getDerivedStateFromProps()
render()
componentDidMount()
(2)更新阶段：
getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
(3)卸载阶段
componentWillUnmount()

constructor:
实例过程中自动调用的方法，在方法内部通过super关键字获取来自父组件的props,在该方法中，通常的操作为初始化state状态或者在this上挂载方法

componentDidMount:
组件挂载到真实DOM节点后执行，其在render方法之后执行，此方法多用于执行一些数据获取，事件监听等操作

shouldComponentUpdate:
用于告知组件本身基于当前的props和state是否需要重新渲染组件，默认情况返回true返回false时不会执行render，在初始化渲染或使用forceUpdate()时不会调用

render:
类组件必须实现的方法，用于渲染DOM结构，可以访问组件state与prop属性，不要在 render 里面 setState, 否则会触发死循环导致内存崩溃

componentDidUpdate:
表示DOM结构渲染更新已完成，只发生在更新阶段，在该方法中，可以根据前后的props和state的变化做相应的操作，如获取数据，修改DOM样式等,可以使用this.setState()，但是要有终止条件判断

componentWillUnmount:
此方法用于组件卸载前，清理一些注册监听事件，或者取消订阅的网络请求等，一旦一个组件实例被卸载，其不会被再次挂载，而只可能是被重新创建

react16 中废弃了三个钩子
componentWillMount // 组件将要挂载的钩子
componentWillReceiveProps // 组件将要接收一个新的参数时的钩子
componentWillUpdate // 组件将要更新的钩子
这三个生命周期函数都是在render之前调用的，官方也指出，这三个生命周期方法经常被误解和滥用，而且因为 fiber 的出现，它们潜在的误用问题可能更大。如果需要使用需要在前面加上“UNSAFE_”

react16 新增方法
getDerivedStateFromProps：
新的 getDerivedStateFromProps() 生命周期方法是静态方法，所以在使用时，需要在前面加上 static 关键字，在组件实例化之后以及重新渲染之前调用。它可以返回一个对象来更新 state，或者返回 null 来表示新的 props 不需要任何 state 的更新。从方法的命名上也可以发现，该方法主要功能是实现上面的基于 props 更新 state。

getSnapshotBeforeUpdate :

getSnapshotBeforeUpdate(prevProps, prevState) 生命周期方法在更新之前（如：更新 DOM 之前）被调用。此生命周期的返回值将作为第三个参数传递给 componentDidUpdate。（通常不需要，但在重新渲染过程中手动保留滚动位置等情况下非常有用。）主要针对上述的更新前读取 DOM 属性。

5、React 事件处理

一、react并没有使用原生的浏览器事件，而是在基于Virtual DOM的基础上实现了合成事件，采用小驼峰命名法，默认的事件传播方式是冒泡，如果想改为捕获的话，直接在事件名后面加上Capture即可；事件对象event也不是原生事件对象，而是合成对象，但通过nativeEvent属性可以访问原生事件对象；
二、react合成事件主要分为以下三个过程：
1、事件注册
在该阶段主要做了两件事：document上注册、存储事件回调。所有事件都会注册到document上，拥有统一的回调函数dispatchEvent来执行事件分发，类似于document.addEventListener(“click”,dispatchEvent)。
2、事件合成
事件触发后，会执行一下过程：
（1）进入统一的事件分发函数dispatchEvent；
（2）找到触发事件的 ReactDOMComponent；
（3）开始事件的合成；
—— 根据当前事件类型生成指定的合成对象
—— 封装原生事件和冒泡机制
—— 查找当前元素以及他所有父级
—— 在listenerBank根据key值查找事件回调并合成到 event(合成事件结束)
3、批处理
批量处理合成事件内的回调函数