设计React里面使用的Amis组件

本文介绍: 我们可以改造一下，对菜单数据里面的每个菜单项增加一个指向 amis page的前缀，这样运营人员设计菜单的json 文档的时候，就可以在path里面直接书写文件名了。这个页面承载了我们的设计思想，就是根据不同的path 加载不同的json 文件，那么这个页面就会频繁的被调用，它在路由里面是需要设置参数的，这个参数就是我们的json 文件名。这样做的好处是，运营的时候可以交给不懂编程的运营人员直接修改，修改后的json 格式 schema 上传后就可以了。依赖列表一个数组，一个变量名称组成的数组，是触发影响函数的依赖变量。

创建 amis 组件

我们前面已经安装好了amis，并且copy 官方Demo 代码生成了一个react中使用 amis的页面。但是这样是不方便的，我们每一个a m i s schema都需要重复做这样的页面是不合适的。考虑我们可以读取本地 json 文档，应该设计一个am i s 组件，这个组件可以获取当前 url的path 最后一层为文件名，根据文件名加载本地json文档做为组件的schema。
这样做的好处是，运营的时候可以交给不懂编程的运营人员直接修改，修改后的json 格式 schema 上传后就可以了。这样，程序的修改，不需要重新编译程序。

Ho ok 方式的挂载 事件

创建组件，我们采用函数方式：

const AmisComponent: React.FC = () =&gt; {
}

这种方式，因为没有采用 class 继承，没有 t his,没有生命周期函数比如：componentDidMo u n t()，componentDidUp date()，componentWillUn mount()等等。取而代之的是useEf fe ct和useSta te。

useSta te

在使用class的时候，组件的数据通过 t his.state = {}，来实现，但是在hook中我们采用的方式就是使用useSta te这个hook。示例如下：

import { useEffect, useState } from 'react';
const [count, setValue] = useState<number&gt;(0);
setValue(3);

这个代码翻译成class方式如下：

this.state = {count:0};
this.setState({count:3});

useEff ect

useEff ect的原型如下：

function useEffect(effect: EffectCallback, deps?: DependencyList): void;

总共两个参数，一个是Eff ect影响函数，一个是依赖列表。影响函数好理解，就是我们希望对本组件进行影响的操作。
依赖列表一个数组，一个变量名称组成的数组，是触发影响函数的依赖变量。影响函数外面的任何可能改变函数运行结果的变量都可以写入依赖列表里面去。例如：

  //代码A
  let a=0,b=0,c=0;
  useEffect(() =&gt; {
    console.log(a,b,c);
    },[])

上面这段代码里面，a,b,c三个变量都可能改变函数的运行，所以都可以写到依赖列表里面去：

  //代码B
  let a=0,b=0,c=0;
  useEffect(() =&gt; {
    console.log(a,b,c);
    },[a,b,c])

上面两段代码A和B，由于A里面的代码依赖列表是空白的，所以useEf f ect里面的影响函数指执行一次。代码B里面的依赖列表是a,b,c只要a,b,c有变化，影响函数就会执行。

useEf fect与class 时代的生命周期

基于上面对useEffect的理解，我们可以整理出它和class时代的生命周期函数的对应关系:
1、componentDidMou nt() 对应如下代码：

useEffect(()=&gt;{},[]);//组件渲染后，执行一次。因为依赖列表里面是空白的

2、componentWillUn mount(),用hook来代替，需要去return一个callback(回调函数)，如下面的形式所示：

 useEffect(() =&gt; {
    return () =&gt; {
      //todo：clear something
    };
  }, []);

3、componentDidUpdate(),用一个特殊变量的去触发 hook,如下面所示,co u nt指的就是这个特殊的变量，该hook 触发，只会是count的值改变时，这个也相当vue里面的watch,可以监控某个变量的变化：

useEffect(() =&gt; { },[count])

组件加载 json 文件

有了以上的知识基础，我们可以开始实现我们的功能。由于我们设计组件的初衷就要组件可以根据location中的path来自动加载，对应的json,我们需要解析 location的最后一层，并且初始化 my schema(用来保存 json 内容的变量)变量，由于我们需要把该变量丢给render 渲染函数，根据amis里面sch ema 类型的定义，我们发现有一个type 属性是非空的，所有我们useState的时候，初始变量必须是{type:‘page’},实在懒得写，也可以给一个{}空白对象作为初始值，否则初次渲染的时候就会报错：Ty peEr ro r: Can not read property ‘mobile’ of undefined。这个是amis渲染器没有undefined 判断的原因。

 //获取path路径中的json文件名称
  const location = useLocation();
  const schemaFile = location.pathname.substring(location.pathname.lastIndexOf('/') + 1);
  //初始化Schema
  const [myschema, setValue] = useState<Schema>({ type: 'page', title: '', body: '' });

加载 sc h ema文件时，我们采用umi 的request库，改库返回的是一个Pro mise，在useEffect也可以用.then来实现赋值，但是这种很破坏结构新的回调函数方式我比较不喜欢。通常解决办法是用async/await，由于我们采用函数式，React.FC如果前面加async，会有类型错误的提醒（typescript 问题），为了确保函数类型一致，我们采用立即执行函数IIFE。因此useEffect被设计成这样：

useEffect(() => {   
    (async () => {
      const schema = await getLocalSchema(schemaFile, initialState?.ver);
      if (isMounted) setValue(schema);
    })();//IIFE
  }, [schemaFile]);//我们希望组件会根据当前location里面的path的变化重新加载不同的json文件，所以这个地方的依赖列表不能空

提醒注意，由于我们需要在用户点击不同菜单项的时候加载不一样的js on 文件，所以我们需要监控sche maFile的变化，必须要把它列入依赖列表。

综上，组件完整代码如下：

/* eslint-disable react-hooks/exhaustive-deps */
// import axios from 'axios';
import copy from 'copy-to-clipboard';
import './cxd.css';
import { render as renderAmis } from 'amis';
import { ToastComponent, AlertComponent, toast } from 'amis-ui';
import { useLocation } from 'react-router';
import { useModel } from 'umi';
import { getLocalSchema } from '@/services/ant-design-pro/api';
import { useEffect, useState } from 'react';
import type { Schema } from 'amis';
import request, { amisRequest } from '@/utils/request';
import remoteRequest from '@/utils/request';
//import request, { localRequest } from '@/utils/request';
const AmisComponent: React.FC = () => {
  //获取path路径中的json文件名称
  const location = useLocation();
  const schemaFile = location.pathname.substring(location.pathname.lastIndexOf('/') + 1);
  //获取版本号
  const { initialState } = useModel('@@initialState');
  //初始化Schema
  const [myschema, setValue] = useState<Schema>({ type: 'page', title: '', body: '' });
  //读取本地json文件到mySchema变量
  useEffect(() => {
    //https://zhuanlan.zhihu.com/p/454841748
    //设置isMounted是为了解决react内存泄露警告问题
    let isMounted = true;
    (async () => {
      const schema = await getLocalSchema(schemaFile, initialState?.ver);
      if (isMounted) setValue(schema);
    })();
    return () => {
      isMounted = false;
    };
  }, [schemaFile]);
  const theme = 'cxd';
  const locale = 'zh-CN';
  // 请勿使用 React.StrictMode，目前还不支持
  return (
    <div>
      <ToastComponent theme={theme} key="toast" position={'top-right'} locale={locale} />
      <AlertComponent theme={theme} key="alert" locale={locale} />
      {
        renderAmis(
        myschema,//这个就是json文件内容     
        {
          // 下面三个接口必须实现
          fetcher: ({
            url, // 接口地址
            method, // 请求方法 get、post、put、delete
            data, // 请求数据
            responseType,
            config, // 其他配置
            headers, // 请求头
          }: any) => {
            // eslint-disable-next-line no-param-reassign
            config = config || {};
            config.withCredentials = true;
            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
            responseType &amp;&amp; (config.responseType = responseType);

            if (config.cancelExecutor) {
              request.CancelToken = config.cancelExecutor;
              //config.cancelToken = new (axios as any).CancelToken(config.cancelExecutor);
            }

            config.headers = headers || {};

            if (method !== 'post' &amp;&amp; method !== 'put' &amp;&amp; method !== 'patch') {
              if (data) {
                config.params = data;
              }

              return amisRequest(url, method, { ...data, ...config }); // (axios as any)[method](url, config);
            } else if (data &amp;& data instanceof FormData) {
              config.headers = config.headers || {};
              config.headers['Content-Type'] = 'multipart/form-data';
            } else if (
              data &&
              typeof data !== 'string' &&
              !(data instanceof Blob) &&
              !(data instanceof ArrayBuffer)
            ) {
              // eslint-disable-next-line no-param-reassign
              data = JSON.stringify(data);
              config.headers = config.headers || {};
              config.headers['Content-Type'] = 'application/json';
            }
            //return (axios as any)[method](url, data, config);
            return amisRequest(url, method, { ...data, ...config });
          },
          isCancel: (value: any) => remoteRequest.isCancel(value), //isCancel(value),
          copy: (content) => {
            copy(content);
            toast.success('内容已复制到粘贴板');
          },
          theme,

         
        },
      )}
    </div>
  );
};
export default AmisComponent;

修改 路由

有了组件，我们可以添加页面了：src/pages里面添加amispage，并完成代码如下：

import AmisComponent from '@/components/Amis';
export default AmisComponent;

这个页面承载了我们的设计思想，就是根据不同的path加载不同的json文件，那么这个页面就会频繁的被调用，它在路由里面是需要设置参数的，这个参数就是我们的json文件名。在config/config.ts的路由数组里面添加如下代码

{
      path: '/amispage/:f',
      name: 'amispage',
      icon: 'smile',
      component: './amispage',
},

我们在前面从服务器加载菜单的时候，为了实现菜单的图标，有做过一个组件LocalMenu实现对菜单数据的遍历。我们可以改造一下，对菜单数据里面的每个菜单项增加一个指向amispage的前缀，这样运营人员设计菜单的json文档的时候，就可以在path里面直接书写文件名了。src/components/LocalMenu/index.tsx代码修改如下：

const loopMenuItem = (menus: any[]): MenuDataItem[] =>
  menus.map(({ icon, routes, filename, path, ...item }) => {
    let newPath = path;
    if (path) {
      newPath = `/amispage/${path}`;
    }
    return {
      ...item,
      path: newPath,
      icon: icon && IconMap[icon as string],
      children: routes && loopMenuItem(routes),
    };
  });

这样，我们的运营人员就可以自由的设计如下的菜单json，其中每个path都对应一个在public/json文件夹里面的json文件，比如path:index对应public/json/index.json，菜单json示例如下：

[
  {
    "path": "/",
    "name": "表的crud",
    "locale":false,
    "icon": "smile",  
    "routes": [      
      {
        "path": "index",
        "name": "crud基本操作"        
      },
      {
        "path": "crudNew",
        "name": "crud新增操作"
      },
      {
        "path": "crudDelete",
        "name": "crud删除操作"
      }      
    ]
  },
  {
    "path": "echart",
    "locale":false,
    "icon": "heart",
    "name": "其它示例"
  }
]