react相关面试题

一、简述react的生命周期

1）生命周期是什么？react 实例的生命周期，就是react实例从初始化，更新，到销毁的过程

2）react实例生命周期经历三个阶段

初始化阶段：完成从react组件创建到首次渲染的过程

更新阶段：当调用setState函数时，会引起组件的重新渲染

销毁阶段：完成组件的销毁

3）三个阶段分别对应的构造函数有：

1--初始化阶段：

constructor:构造函数里，可以做状态的初始化，接收props的传值
componentWillMount： 在渲染前调用，相当于vue中的beforeMount
render:渲染函数，不要在这里修改数据。 vue中也有render函数。
componentDidMount:渲染完毕，在第一次渲染后调用。

2--运行中阶段（更新）

 当组件的 props 或 state 发生变化时会触发更新（严谨的说，是只要调用了setState（）或者改变了props时）。组件更新的生命周期调用顺序如下：

shouldComponentUpdate:是否更新？ 需要返回true或者false。如果是false，那么组件就不会继续更新了。

componentWillUpdate:即将更新。

componentWillReceiveProps(nextProps)： 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。nextProps 是props的新值，而 this.props是旧值。

render不要在这里修改数据

componentDidUpdate在组件完成更新后立即调用。在初始化时不会被调用。 相当于vue中的updated

3--销毁阶段（卸载）

componentWillUnmount()
即将卸载，可以做一些组件相关的清理工作，例如取消计时器、网络请求等

二、调用setState之后，发生了什么？

1）、合并state

把传入setState（）里的参数对象和当前的state进行（属性）合并。 触发调和过程（Reconciliation）

2）、 重新渲染组件

2.1） React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面；

2.2） React 会自动计算出新的树与老树的节点差异（用diff算法），然后根据差异对界面进行最小化重渲染