React升级18文档说明 (#95) · Issues · FE / treasure

React升级18文档说明

模版新增了一个react-18的分支，完成模版升级；

已发布项目升级步骤

index.html中react和react-dom对应版本从17.0.2改为18.2.0
升级包

npm i -D react@18.2.0 react-dom@18.2.0 @types/react@18.0.14 @types/react-dom@18.0.5 react-redux@8.0.2

React18已经在2022.06.15停止了对IE的支持，如果需要继续兼容IE，需要继续使用18以下版本

以下两个文件做如下改动：

启动项目警告：

react18引入了一个新的根API，不再使用render，而是使用createRoot代替，在新版本可以继续使用，但是不支持使用18的大部分新特性，且在未来版本会被删除。

src/index.tsx

...
import { createRoot } from 'react-dom/client';
...

// createRoot(container!) if you use TypeScript
createRoot(document.getElementById('root')!).render(
  <BrowserRouter>
    <Provider store={store}>
      <ConfigProvider locale={zhCN}>
        <App />
      </ConfigProvider>
    </Provider>
  </BrowserRouter>
);

src/app.tsx

该文件添加一个多余的div节点可以看一下前后对比

=== Suspense直接在CSSTransition之后，suspense加载完成之后节点消失，无节点可以承载enter样式，所以动画丢失

===添加div之后

<RouterControl locationTo={location}>
  <Layout routeList={routeList}>
    <TransitionGroup component={null}>
      <CSSTransition key={location.key} classNames='fade' timeout={300}>
        // 重点在这里-原本的模版Suspense在TransitionGroup上方，将Suspense放到CSSTransition内部
        // 此处添加一个div的原因是：路由是懒加载进入的，但是懒加载替换了正在执行入场动画的dom，导致enter的class没有继续附加到替换后
        // 的dom节点，所以在中间添加一个做为代理动画的容器，执行动画的dom就不会再被替换
        <div>
          <Suspense fallback={<Spin />}>
            {/* https://juejin.cn/post/6844903922574819342#heading-7 */}
            <Routes location={location}>
              {routeList.map((item) => (
                <Route key={item.path} path={item.path} element={<item.component location={location} />}></Route>
              ))}
              {/* 匹配找不到的路由 */}
              <Route path='*' element={<Empty />}></Route>
            </Routes>
          </Suspense>
        </div>
      </CSSTransition>
    </TransitionGroup>
  </Layout>
</RouterControl>

启动项目报错：提示children does not exist on type

原因：18之前的版本在FC中对于children是隐式存在的，不需要去显示的props中描写，但是在新的版本开始，children需要在定义props时明确列出；

interface IProps{
  children?: React.ReactNode;
}

Edited Nov 23, 2022 by fengzi