弃用react-loadable 改用 React.Suspense (2021-10-25)

[yaogengzhu]

为啥要弃用react-loadable， 改用React.Suspense ！

发现公司项目之前都是使用react-loadable 做代码分割，升级react高版本后会有警告提示，因为这个库好久也没维护了，部分代码使用了过时的API，如果需要解决这个问题需要修改源码 UNSAFE_componentWillMount

其实可以根据 React.Suspense 结合 React.lazy 一起解决，也可以实现代码分割效果，更贴进react官方用法。

示例

import { Loading } from 'antd-mobile'
import React from 'react';
import { HashRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
const Home = React.lazy(() => import('./app/Home'));
const Login = React.lazy(() => import('./app/Login'));
import './index';

const App = () => {
  console.log('ok');
  return (
    <React.Suspense fallback={<Loading />}>
      <Router>
        <Switch>
          <Route path="/login" component={Login}></Route>
          <Route path="/home" component={Home}></Route>
          <Redirect path="/" to="/home" />
        </Switch>
      </Router>
    </React.Suspense>
  );
};
export default App;