feat: 修改wujie-react组件为函数式组件

examples/react16/config/webpack.config.js

@@ -13,7 +13,7 @@ const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
-const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+// const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 const ESLintPlugin = require('eslint-webpack-plugin');
 const paths = require('./paths');
@@ -317,21 +317,24 @@ module.exports = function (webpackEnv) {
           'scheduler/tracing': 'scheduler/tracing-profiling',
         }),
         ...(modules.webpackAliases || {}),
+        /* react16 内嵌 react17 会导致有多个版本的 react，从而导致 react hook 错误，故需要指定 react 版本为主 app 上的版本 */
+        'react': path.resolve('./node_modules/react'),
       },
       plugins: [
         // Prevents users from importing files from outside of src/ (or node_modules/).
         // This often causes confusion because we only process files within src/ with babel.
         // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
         // please link the files into your node_modules/ and let module-resolution kick in.
         // Make sure your source files are compiled, as they will not be processed in any way.
-        new ModuleScopePlugin(paths.appSrc, [
-          paths.appPackageJson,
-          reactRefreshRuntimeEntry,
-          reactRefreshWebpackPluginRuntimeEntry,
-          babelRuntimeEntry,
-          babelRuntimeEntryHelpers,
-          babelRuntimeRegenerator,
-        ]),
+        /* 为了在多个版本的react的app中指定node_modules/react，故移除该限制 */
+        // new ModuleScopePlugin(paths.appSrc, [
+        //   paths.appPackageJson,
+        //   reactRefreshRuntimeEntry,
+        //   reactRefreshWebpackPluginRuntimeEntry,
+        //   babelRuntimeEntry,
+        //   babelRuntimeEntryHelpers,
+        //   babelRuntimeRegenerator,
+        // ]),
       ],
     },
     module: {

packages/wujie-react/index.d.ts

@@ -1,35 +1,39 @@
 import { bus, preloadApp, destroyApp, setupApp } from "wujie";
-import PropTypes from "prop-types";
-import React from "react";
+import React,{ReactElement} from 'react';
 
-export default class WujieReact extends React.PureComponent {
-  static propTypes: {
-    height: typeof PropTypes.string;
-    width: typeof PropTypes.string;
-    name: typeof PropTypes.string;
-    loading: typeof PropTypes.element;
-    url: typeof PropTypes.string;
-    alive: typeof PropTypes.bool;
-    fetch: typeof PropTypes.func;
-    props: typeof PropTypes.object;
-    attrs: typeof PropTypes.object;
-    replace: typeof PropTypes.func;
-    sync: typeof PropTypes.bool;
-    prefix: typeof PropTypes.object;
-    fiber: typeof PropTypes.bool;
-    degrade: typeof PropTypes.bool;
-    plugins: typeof PropTypes.array;
-    beforeLoad: typeof PropTypes.func;
-    beforeMount: typeof PropTypes.func;
-    afterMount: typeof PropTypes.func;
-    beforeUnmount: typeof PropTypes.func;
-    afterUnmount: typeof PropTypes.func;
-    activated: typeof PropTypes.func;
-    deactivated: typeof PropTypes.func;
-    loadError: typeof PropTypes.func;
-  };
-  static bus: typeof bus;
-  static setupApp: typeof setupApp;
-  static preloadApp: typeof preloadApp;
-  static destroyApp: typeof destroyApp;
+interface WujieReactProps {
+  height?: string
+  width?: string
+  name: string
+  loading?: ReactElement
+  url: string
+  alive?: boolean
+  fetch?: (input: RequestInfo, init?: RequestInit) => Promise<Response>
+  props?: object
+  attrs?: object
+  replace?: (codeText: string) => string
+  sync?: boolean
+  prefix?: object
+  fiber?: boolean
+  degrade?: boolean
+  plugins?: any[]
+  beforeLoad?: (appWindow: Window)=>void
+  beforeMount?: (appWindow: Window)=>void
+  afterMount?: (appWindow: Window)=>void
+  beforeUnmount?: (appWindow: Window)=>void
+  afterUnmount?: (appWindow: Window)=>void
+  activated?: ()=>void
+  deactivated?: ()=>void
+  loadError?: (url: string, e: Error)=>void
 }
+
+interface IWujieReact extends React.FC<WujieReactProps> {
+  bus: typeof bus;
+  setupApp: typeof setupApp;
+  preloadApp: typeof preloadApp;
+  destroyApp: typeof destroyApp;
+}
+
+declare const WujieReact: IWujieReact;
+
+export default WujieReact;

packages/wujie-react/index.js

@@ -1,74 +1,57 @@
-import React from "react";
+import React, {useEffect, useRef} from "react";
 import PropTypes from "prop-types";
 import { bus, preloadApp, startApp, destroyApp, setupApp } from "wujie";
 
-export default class WujieReact extends React.PureComponent {
-  static propTypes = propTypes;
-  static bus = bus;
-  static setupApp = setupApp;
-  static preloadApp = preloadApp;
-  static destroyApp = destroyApp;
-
-  state = {
-    myRef: React.createRef(),
-  };
-
-  destroy = null;
-
-  startAppQueue = Promise.resolve();
-
-  startApp = async () => {
+export default function WujieReact(props) {
+  const { width, height,name,url } = props;
+  const myRef=useRef(null)
+  // 缓存 function 的引用地址，useCallback 会因为 react 的多次 rerender 而多次改变，进而导致调用 startApp 不符合预期
+  const _startApp = useRef(()=>{});
+  _startApp.current = async () => {
     try {
-      const props = this.props;
-      const { current: el } = this.state.myRef;
-      this.destroy = await startApp({
+      await startApp({
         ...props,
-        el,
+        el:myRef.current,
       });
     } catch (error) {
-      console.log(error);
+      console.error(error);
     }
   }
-
-  componentDidMount () {
-    this.startApp();
-  }
 
-  componentDidUpdate(prevProps) {
-    if (this.props.name !== prevProps.name || this.props.url !== prevProps.url) {
-      this.startApp();
-    }
-  }
+  useEffect(()=>{
+    _startApp.current()
+  },[_startApp, name, url])
 
-  render() {
-    const { width, height } = this.props;
-    const { myRef: ref } = this.state;
-    return <div style={{ width, height }} ref={ref} />;
-  }
+  return <div style={{ width, height }} ref={myRef} />;
 }
 
-const propTypes = {
-    height: PropTypes.string,
-    width: PropTypes.string,
-    name: PropTypes.string,
-    loading: PropTypes.element,
-    url: PropTypes.string,
-    alive: PropTypes.bool,
-    fetch: PropTypes.func,
-    props: PropTypes.object,
-    attrs: PropTypes.object,
-    replace: PropTypes.func,
-    sync: PropTypes.bool,
-    prefix: PropTypes.object,
-    fiber: PropTypes.bool,
-    degrade: PropTypes.bool,
-    plugins: PropTypes.array,
-    beforeLoad: PropTypes.func,
-    beforeMount: PropTypes.func,
-    afterMount: PropTypes.func,
-    beforeUnmount: PropTypes.func,
-    afterUnmount: PropTypes.func,
-    activated: PropTypes.func,
-    deactivated: PropTypes.func,
-    loadError: PropTypes.func,
-  }
+WujieReact.propTypes = {
+  height: PropTypes.string,
+  width: PropTypes.string,
+  name: PropTypes.string,
+  loading: PropTypes.element,
+  url: PropTypes.string,
+  alive: PropTypes.bool,
+  fetch: PropTypes.func,
+  props: PropTypes.object,
+  attrs: PropTypes.object,
+  replace: PropTypes.func,
+  sync: PropTypes.bool,
+  prefix: PropTypes.object,
+  fiber: PropTypes.bool,
+  degrade: PropTypes.bool,
+  plugins: PropTypes.array,
+  beforeLoad: PropTypes.func,
+  beforeMount: PropTypes.func,
+  afterMount: PropTypes.func,
+  beforeUnmount: PropTypes.func,
+  afterUnmount: PropTypes.func,
+  activated: PropTypes.func,
+  deactivated: PropTypes.func,
+  loadError: PropTypes.func,
+}
+
+WujieReact.bus = bus;
+WujieReact.setupApp = setupApp;
+WujieReact.preloadApp = preloadApp;
+WujieReact.destroyApp = destroyApp;

packages/wujie-react/package.json

@@ -20,7 +20,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "react": ">=16.0.0"
+    "react": ">=16.8.0"
   },
   "config": {
     "unsafe-perm": true,