Taro 升级 React 18

[AdvancedCat]

背景

随着React v18的正式发布，目前可以正式在项目中使用新版本React特性，Taro计划实现React18版本升级。

新特性调研

根据官网Blog进行新特性梳理

Automatic Batching

自动合并更新在多次触发更新时，可以提升React渲染性能。React18将自动合并扩展至生命周期函数、合成事件、原生事件、定时器回调中。自动合并是在 react-reconciler 中完成的，Taro中完整复用了react-reconciler，Taro无需关心。

Transitions

React将更新分为 urgent 与 non-urgent 两类，将 non-urgent update 定义为 “transitions” ，可以调用 startTransition 或 useTransition 指定哪些更新是 “transitions”。non-urgent可中断，React会丢弃陈旧的更新，而渲染最新的更新。

同样的，transitions的更新调度是在 react-reconciler 中完成的，Taro无需关心。

New Suspense

Suspense提供了“UI loading state”的中间状态，减少白屏时间。通常需要与 React.lazy 配合使用。Taro H5可以正常使用Suspense，在小程序环境，由于需要将业务整体打包，暂无法使用Suspense.

New Client API

新的客户端api是使用上列新特性的开关，当用户调用 createRoot 时，默认使用v18提供的新特性。v18允许同一个应用中存在多个React实例，互不影响。

const root = createRoot(container);
root.render(element);
// 卸载
root.unmount()

本次Taro将重点支持 New Client API

React官方建议从 react-dom/client 中引入 createRoot ，但非强制要求，在开发模式会有warning告警。

New Server API

Taro暂不支持服务端渲染特性。

Strict Mode

在开发模式下，<StrictMode>提供更好的开发提示。升级React v18即可

New Hooks

• useId：unique id 生成器。在ssr时使用
• useTransition：指定哪些更新为transitions
• useDeferredValue：将复杂数据的渲染推迟，给urgent更新让路
• useSyncExternalStore：为库作者开放
• useInsertionEffect：为库作者开放

升级React v18即可

详细设计

依赖包升级

Name	Location	Old	New
react-reconciler	packages/taro-react/package.json	0.26.1	0.27.0
@types/react-reconciler	package.json	0.26.1	0.27.0 (官方库未更新)
react	package.json	17.0.2	18.0.0
@types/react	package.json	17.0.0	18.0.0
react-dom	package.json	17.0.2	18.0.0

Taro运行时使用 New Client API

需要对两个运行时包 @tarojs/react 、 @tarojs/plugin-framework-react 进行修改

1、@tarojs/react

• reconciler.ts

  • hostConfig 新增方法 getCurrentEventPriority()

    const hostConfig = {
      getCurrentEventPriority() {
         // 因 @types/react-reconciler 未更新，ts会报错，这里直接返回16
         return 16 // import { DefaultEventPriority } from 'react-reconciler/constants'
      }
    }

    事件优先级：DiscreteEventPriority | ContinuousEventPriority | DefaultEventPriority

  • hostConfig 新增方法 detachDeletedInstance()

• render.ts

  • 新增createRoot方法

    export function createRoot (domContainer: TaroElement) {
      const oldRoot = ContainerMap.get(domContainer)
      if (oldRoot != null) {
        return oldRoot
      }
      const root = new Root(TaroReconciler, domContainer, true)
      ContainerMap.set(domContainer, root)
      return root
    }

  • 修改类Root的构造函数，允许传入 isConcurrentRoot变量，判断是否开启“New Client API”

    class Root{
      public constructor (renderer: Renderer, domContainer: TaroElement, isConcurrentRoot = false) {
         this.renderer = renderer
         this.internalRoot = renderer.createContainer(domContainer, isConcurrentRoot ? 1 : 0, false, null)
      }
    }

2、@tarojs/plugin-framework-react

• connect.ts

  修改调用ReactDOM.render 的方式，根据实际用户安装的react版本号来决定调用哪种Client API

  function renderReactRoot () {
      let appId = 'app'
      if (process.env.TARO_ENV === 'h5') {
        appId = config?.appId || appId
      } else {
        ReactDOM.version = react.version // 在小程序环境中，取自实际react版本号
      }
      const container = document.getElementById(appId)
      const version = Number((ReactDOM.version || '').split('.')[0])
      if (version >= 18) {
        const root = ReactDOM.createRoot(container)
        root.render?.(h(AppWrapper))
      } else {
        ReactDOM.render?.(h(AppWrapper), container)
      }
    }

  同时，由于 root.render 不再返回根组件AppWrapper实例，改由AppWrapper构造函数中赋值

  class AppWrapper {
    constructor (props) {
      super(props)
      appWrapper = this
    }
  }

启用react18新特性

本次更新提供了配置项，允许用户自由选择react的工作模式，目前默认 legacy 模式，如需要在react18下启用 concurrent，则需要在插件@tarojs/plugin-framework-react中配置参数 reactMode：

// config/index.js
const config = {
  plugins: [
    ['@tarojs/plugin-framework-react', { reactMode: 'concurrent' }]
  ]
}

Taro React 样板仓库升级至v18

TODO

分支

feat/react18

测试

通过以下操作可试用React18

# In taro repo
$ cd taro
$ git checkout -b upgrade-react18 origin/upgrade-react18
$ yarn
$ lerna run build --scope=@tarojs/react
$ lerna run build --scope=@tarojs/plugin-platform-react
$ cd packages/taro-react && yarn link
$ cd packages/taro-plugin-react && yarn link

# In local project
$ cd MyProject
$ yarn add react@latest react-dom@latest
$ yarn link @tarojs/react @tarojs/plugin-platform-react
$ npm run dev:weapp

因taro中的 react-reconciler 包会引入 react 依赖，需要将此react代理至测试项目的react包，否则在调试Hooks相关代码时出现项目存在多个react版本的错误提示。

# In local project
$ cd node_modules/react && yarn link

# In taro repo
$ yarn link react

缺陷

• Taro运行时将根据用户侧使用的React版本来决定是否启用 New Client API ，暂时未提供配置项来降级为LegacyRoot；
• React v18有较多新特性，无法通过模拟每个场景来判定Taro升级React18是成功的，需要进行广泛测试；

待确认

• Taro RN的升级需要与58侧同学进行沟通确认 —— RN目前不支持 18，需要等官方支持方案出来

[zhiqingchen]

RN目前不支持 18，需要等官方支持方案出来

[SyMind]

添加配置项是否启用 react 18 Concurrent Mode，可供参考的技术：vercel/next.js#10645

[AdvancedCat]

LGTM