一、React 中如何实现路由懒加载？

在 React 16 中，新增了 lazy 方法，通过 lazy 方法可以轻松实现组件懒加载，当然要实现路由懒加载的话，其实也只需要把路由组件结合 lazy 使用即可。 参考代码如下：

  1. import {Route} from "react-router-dom";
  2. import React,{Suspense} from 'react';
  3. const HomeView = React.lazy(()=>import("./home"));
  4. function App(){
  5.     return <div>
  6.         <h1>路由懒加载</h1>
  7.         <Route path="/" exact render={()=>{
  8.           return <Suspense fallback={<div>组件Loading进来之前的占位内容</div>}>
  9.               <HomeView />
  10.               </Suspense>
  11.           }} />
  12.     </div>
  13. }
  14. export default App;

在上述代码中，我们使用 lazy 引入了一个动态组件，然后将该组件放入了根路由中。这样的话只有用户访问网站首页时，才会动态加载这个组件。 这里要注意，在 React 规范中，lazy 和 Suspense 必须配合使用，lazy 引入的动态组件必须要放入 Suspense 中，Suspense 的 fallback 属性是 lazy 的组件没有加载进来之前的占位内容。

二、React 的生命周期函数都有哪些，分别有什么作用？

React 的生命周期已经经历了3次改动，我们以最新的版本为准。 具体可以看下图：
挂载阶段：
（1）constructor: 初始化组件，初始化组件的 state 等。
（2）static getDerivedStateFromProps()：该函数用于将 props 中的信息映射到 state 中。
（3）render: 生成虚拟DOM
（4）componentDidMount：组件挂载完成，通过在该函数中去处理副作用 更新阶段：
（5）static getDerivedStateFromProps()
（6）shouldComponentUpdate()：该生命周期函数用于判断是否要进行组件更新。
（7）render()：生成虚拟DOM
（8）getSnapshotBeforeUpdate()：组件已经完成 diff，即将更新真实 DOM，用户获取上一次的DOM快照。该函数必须搭配 componentDidUpdate 一块使用，返回值会变成 componentDidUpdate 第三个参数。
（9）componentDidUpdate()： 组件更新完成，通常在该函数中进行副作用处理。 即将卸载： componentWillUnmount：组件即将卸载，用于删除组件添加到全局的数据或事件