react16.14使用new-transform

Last updated 4 years ago

react16.14使用new-transform

react使用new transform概要

React使用。

首先要babel去支持，要把@babel/preset-react这个预设插件升级到[7.9.0](https://babeljs.io/blog/2020/03/16/7.9.0)及以上.

然后配置如下：

presets: [
    [
      '@babel/preset-react',
      {
        runtime: 'automatic',
        development: process.env.BABEL_ENV !== 'production'
      }
    ],
    // ...
]

React使用这个new transform对于版本也有要求，但是不一定需要react@^17才行，详见,可以看到react17及以上,react16.14.0,react15.7.0和react0.14.0版本都支持。

笔者从react16.8升级到了react16.14，由于项目庞大，没有直接升级到大版本,但是也整理了react16.8到react16.14.0的变更点。在文章下面罗列了出来，不感兴趣的可以忽视。

升级react(16.14.0)使用new transform 之后出现：

'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

tsconfig 写上之后，发现对应的jsx选项报错：

Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'.

这是由于vscode的ts版本，右下角点击版本号之后进行选择4.1.x。

但是发现tsx里移除React声明之后还是会有问题：

Could not find a declaration file for module 'react/jsx-dev-runtime'. '/Users/username/workspace/project/node_modules/react/jsx-dev-runtime.js' implicitly has an 'any' type.

这个是因为@types的react和react-dom版本不支持（目前是16.14.0）版本的react，但是@types里没有对应的版本，17以下只到了16.9.1。为了不出现其他的未知问题，没有更新对应的types到17。

创建一个xxx.d.ts文件写下：

declare module "react/jsx-runtime" {
  export default any;
}

这样基本就可以了。

Expected 1 arguments, but got 0. Did you forget to include 'void' in your type argument to 'Promise'?ts(2794)
lib.es2015.promise.d.ts(33, 34): An argument for 'value' was not provided.

但是为了不出现其他的问题，暂时就先这样，打算过段时间再折腾。

请原谅笔者现在才发出来，之前在公司里升级后在预发环境上放了近一个月，算下来这次的更新已经过去了两个月左右了。

由于出现了上面的部分加上不确定因素，为了不影响线上，暂时就没有升级了。

因为升级的不单单只有babel和react，还有eslint等配置梳理，很多break change。为了不出其他的幺蛾子，ts暂时就不做大的升级，所以new transform暂时也不做ts支持。

杂记

react16.8 -> react16.14.0

react

移除unstable_ConcurrentMode

react-dom

废弃以前 UNSAFE_* 周期方法

react-dom

nextjs 中的问题

react-dom

react-native-web 中的问题

react-dom

修复useEffect的依赖项在多个root节点没有触发

react is

react

冲突的样式规则会触发警告
增加flag，质疑 unstable_createPortal，大版本移除，直接改名createPortal
ReactDOM添加version属性

react dom

Previousfamily Nextupdate-to-7

Last updated 4 years ago