Amis源码 embed渲染方法解析(json结构渲染原理):

js sdk中的渲染函数embed使用方式如下:

const amis = amisRequire("amis/embed");  

const amisScoped = amis.embed( self.$refs["mnode"],amisJSON, {}, amisEnv); //env会有默认值,默认值与传来的参数进行合并({默认值, ...env})

amisScoped.getComponentByName("crud");

embed函数源码在examples/embed.tsx中

import {  render as renderAmis } from 'amis ';

1.核心是通过 {renderAmis(schema, amisProps, amisEnv)}渲染的. (amisEnv里是fetcher,isCancel,tracker等)

2.返回一个scoped对象,里面属性(getComponentByName等)是在amis-core/src/Scoped.tsx中调用scopeRef方法赋值的

render函数在amis-core/src/index.tsx中:

没什么东西,只是return 了一个AMISRenderer,我们直接看AMISRenderer:

1.首先会从stores缓存中获取store(RendererStore树),按amisEnv.session指定的值来获取,amisEnv.session不存在则用固定值'global'

2.若缓存store(RendererStore树)不存在,则会创建一个RendererStore类型的mobx树,将env设置为树的环境配置。然后会将此store(树)缓存到stores对象中(key为amisEnv.session || 'global')。

3.若缓存store(RendererStore树)存在,获取缓存store中的env,并做assign更新env。

默认 env 会被缓存,所以新传入的 env 不会替换旧的除非先删了旧的,新的才会生效

另外:RendererStore是一个渲染器store也是rootStore. RendererStore里还有个单例stores是用来维护amisJSON渲染时生成的一个个组件store树(page、form、crud等),组件销毁时从stores中移除。

4.最终走<ScopedRootRenderer> 并传递props进行后续处理

ScopedRootRenderer在amis-core/src/Root.tsx中导出:

1.default导出函数及解释:

export default StatusScoped(Scoped(Root));

Scoped函数:传入Root 作为ComposedComponent参数, 返回ScopedComponent

StatusScoped函数:传入 Scoped(Root) 作为ComposedComponent, 返回一个自定义class

2.自定义class 在amis-core/src/StatusScoped.tsx中:

主要是 向下传递了一个statusStore( StatusStore.create({}) )给dialog drawer等模态框级别使用,独立占用一个状态管理作用域

3.ScopedComponent在amis-core/src/Scoped.tsx中:

主要封装了一个scoped对象(包含getComponentByName等属性方法)并作为provide向下传递。 此外还调用了scopeRef方法(examples/embed.tsx中传递过来的)

4.在amis-core/src/Root.tsx中:

进行reduce处理,rootWrappers数组中有wrapper函数则进行合并处理,空数组直接返回初始值进行<RootRenderer schema = {{type: 'page'}}>

最终走<RootRenderer> 并传递props进行后续处理

Root.tsx中renderChild方法:

export function renderChild(prefix: string,node: SchemaNode,props: renderChildProps
): ReactElement {if (Array.isArray(node)) {return renderChildren(prefix, node, props);}//...省略return (<SchemaRendererrender={renderChild as any}{...props}schema={schema}propKey={schema.key}$path={`${prefix ? `${prefix}/` : ''}${(schema && schema.type) || ''}`}/>);
}

RootRenderer在amis-core/src/RootRenderer.tsx中

创建顶级store(RootStore树),并添加到rootStore.stores中(rootStore即RendererStore),这个store会作为topStore向下传递。  props.rootStore.addStore({storeType: RootStore.name})

使用amisProps.data初始化顶级store数据域 。  this.store.initData(props.data);

最终调用this.props.render函数(这个props.render是Root.tsx中renderChild方法,底层走<SchemaRenderer>完成渲染)进行render渲染page

SchemaRenderer在amis-core/src/SchemaRenderer.tsx中

  核心是利用renderer Component进行渲染(amis/src/renderers中定义的),根据schema的type,找到@renderer(type: 'xxx’)注册的渲染器,将schema数据作为props传入渲染不同Component。

  由对应的renderer Component内部控制body子节点渲染:比如Page会判断schema的body存在则调用this.props.render('body', body)渲染body子节点(这个props.render是SchemaRenderer.tsx中的 renderChild方法进行了一些预处理,最终还是调用的Root.tsx中renderChild走<SchemaRenderer>完成渲染】)

    const Component = renderer.component;let props = {$schema: schema,ref: this.refFn,
//传递的是SchemaRenderer.tsx中的 renderChild方法(进行了一些预处理,然后还是调用的Root.tsx中renderChild渲染<SchemaRenderer>)render: this.renderChild, rootStore,statusStore,dispatchEvent: this.dispatchEvent,mobileUI: schema.useMobileUI === false ? false : rest.mobileUI};//...省略// 自动解析变量模式,主要是方便直接引入第三方组件库,无需为了支持变量封装一层if (renderer.autoVar) {for (const key of Object.keys(schema)) {if (typeof props[key] === 'string' && isExpression(props[key])) {props[key] = resolveVariableAndFilter(props[key],props.data,'| raw');}}}const component = isClassComponent ? (<Component {...props} ref={this.childRef} />) : (<Component {...props} />);return this.props.env.enableAMISDebug ? (<DebugWrapper renderer={renderer}>{component}</DebugWrapper>) : (component);}
}

SchemaRenderer.tsx中renderChild:

  renderChild(region: string,node?: SchemaNode,subProps: {data?: object;[propName: string]: any;} = {}) {//这个render是Root.tsx中的renderChild方法(底层<SchemaRenderer>渲染)let {schema: _, $path: __, env, render, ...rest} = this.props;let {path: $path} = this.resolveRenderer(this.props);const omitList = RENDERER_TRANSMISSION_OMIT_PROPS.concat();if (this.renderer) {const Component = this.renderer.component;Component.propsList &&omitList.push.apply(omitList, Component.propsList as Array<string>);}return render!(`${$path}${region ? `/${region}` : ''}`, node || '', {...omit(rest, omitList),defaultStatic:(this.renderer?.type &&['drawer', 'dialog'].includes(this.renderer.type)? false: undefined) ??this.isStatic ??(_.staticOn? evalExpression(_.staticOn, rest.data): _.static ?? rest.defaultStatic),...subProps,data: subProps.data || rest.data, //首先取传来的data 没有 则用this.props.data父组件dataenv: env});}

amis 的渲染过程是将 json 转成对应的 React 组件。先通过 json 的 type 找到对应的 Component,然后把其他属性作为 props 传递过去完成渲染。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/336943.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

海外高清短视频:四川京之华锦信息技术公司

海外高清短视频&#xff1a;探索世界的新窗口 在数字化时代的浪潮下&#xff0c;海外高清短视频成为了人们探索世界、了解异国风情的新窗口。四川京之华锦信息技术公司这些短视频以其独特的视角、丰富的内容和高清的画质&#xff0c;吸引了无数观众的目光&#xff0c;让人们足…

统计各个商品今年销售额与去年销售额的增长率及排名变化

文章目录 测试数据需求说明需求实现分步解析 测试数据 -- 创建商品表 DROP TABLE IF EXISTS products; CREATE TABLE products (product_id INT,product_name STRING );INSERT INTO products VALUES (1, Product A), (2, Product B), (3, Product C), (4, Product D), (5, Pro…

「vue同一个组件,不同路由切换时界面没有更新问题」

问题&#xff1a;vue项目中不同路由切换时&#xff0c;因为引用的同一个组件&#xff0c;界面数据没有更新 一、解决方法 添加key&#xff0c;具体原理可参考vue中的diff算法 <router-view :key"$route.fullPath"></router-view>

Linuxftp服务002本地登入

本期主要讲述的是ftp服务中的本地用户登入。 操作系统 CentOS Stream 9 操作步骤 首先我们先建立一个ftp组的用户&#xff0c;并设置密码。 [rootlocalhost ~]# useradd -g ftp wq [rootlocalhost ~]# echo 1 |passwd --stdin wq 更改用户 wq 的密码 。 passwd&#xff1a…

GPT-4o:人工智能技术的新巅峰

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…

MySQL 命令总结篇-思维导图

一些常用命令以思维导图形式总结在这里了&#xff0c;掌握这些进行MySQL基本操作绝对没问题&#xff0c;加油&#xff01;友友们可以根据这些思维导图进行知识总结。 目录 一、快速上手 二、SQL 语句分类&#xff08;DDL、DML、DQL、DCL&#xff09; 三、数据类型 四、约束…

【机器学习】探索未来科技的前沿:人工智能、机器学习与大模型

文章目录 引言一、人工智能&#xff1a;从概念到现实1.1 人工智能的定义1.2 人工智能的发展历史1.3 人工智能的分类1.4 人工智能的应用 二、机器学习&#xff1a;人工智能的核心技术2.1 机器学习的定义2.2 机器学习的分类2.3 机器学习的实现原理2.4 机器学习的应用2.5 机器学习…

# Mybatis 高级用法和tk.mybatis使用

Mybatis 高级用法和tk.mybatis使用 文章目录 Mybatis 高级用法和tk.mybatis使用使用SelectProvider、InsertProvider、UpdateProvider、DeleteProviderSelectProvider使用例子 tk.mybatis引入依赖查询实现实体映射类实体类规范 dao层调用dao 使用SelectProvider、InsertProvide…

vue3 侦听器

侦听器示例 计算属性允许我们声明性地计算衍生值。然而在有些情况下&#xff0c;我们需要在状态变化时执行一些“副作用”&#xff1a;例如更改 DOM&#xff0c;或是根据异步操作的结果去修改另一处的状态。 在组合式 API 中&#xff0c;我们可以使用 watch 函数在每次响应式…

prometheusgrafananode_export搭建监控平台

一、环境要求 1、docker安装docker环境 2、docker安装prometheus 3、docker安装grafana 4、node-exportor(安装在被测服务器上) 5、我的服务器是Ubuntu 二、docker 安装prometheus 1、下载Prometheus镜像 docker pull prom/prometheus 2、检查端口是否被占用 安装netstat命…

动手学深度学习4.6 暂退法-笔记练习(PyTorch)

以下内容为结合李沐老师的课程和教材补充的学习笔记&#xff0c;以及对课后练习的一些思考&#xff0c;自留回顾&#xff0c;也供同学之人交流参考。 本节课程地址&#xff1a;丢弃法_哔哩哔哩_bilibili 本节教材地址&#xff1a;4.6. 暂退法&#xff08;Dropout&#xff09;…

AngularJS基础语法(2009版本)

jquery和AngularJS 数据绑定和获取对比&#xff1a; jquery&#xff0c;要操作DOM&#xff1a; angularJS&#xff0c;无需操作DOM就可以进行动态数据变化&#xff1a; 要使用Angularjs就需要在html页面先引入&#xff1a; ng-app&#xff1a; html页面中&#xff0c;需要给…

网安行业,能力重要么?

网安职场&#xff0c;说能力不重要&#xff0c;那是扯淡&#xff1b;说能力重要的&#xff0c;那也是扯淡。职场不是能力的比拼&#xff0c;职场是修行的比拼&#xff0c;是成长的比拼。 我经常在公众号里讲&#xff0c;网安职场是熬出来的&#xff0c;网安人要忠于职业&…

【学习Day3】计算机基础

✍&#x1f3fb;记录学习过程中的输出&#xff0c;坚持每天学习一点点~ ❤️希望能给大家提供帮助~欢迎点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;指点&#x1f64f; 1.5.4 Cache替换算法 Cache的页面淘汰算法 常用替换算法有&#xff1a; • 随机替换算法RA…

23 vue3面试重难点复习:响应式原理、特点、8大生命钩子、data数据定义、组件、全家桶

vue作为用的最为广泛的当前热门框架&#xff0c;总结如下重难点核心知识&#xff1a; 1.vue特点是什么&#xff1f; 1.1优点 渐进式 vue本身只提供数据响应式&#xff0c;需要全局缓存用 vuex&#xff0c;需要路由用 vue-router 组件化 封装组件&#xff0c;利于复用 响应式数…

DSP开发入门

视频&#xff1a; 创龙TI 最新DSP CPU核心架构 C66x 以及 KeyStone I 架构 DSP TMS320C6655/57以及TMS320C6678视频教程全集_哔哩哔哩_bilibili 2024年硬汉科技手把手教您学DSP28335视频教程持续更新中_哔哩哔哩_bilibili DSP芯片介绍 DSP选型 TI的DSP 分为三大系列&#…

AI绘画Stable Diffusion【隐藏文字】:将艺术字隐藏在国风云雾山水图中

大家好&#xff0c;我是灵魂画师向阳 今天我们分享一下用AI绘画工具Stable Diffusion制作网上很火的隐藏文字。这里以将艺术字隐藏在国风云雾山水图为例进行讲解&#xff0c;下面我们就来看看吧。 一. 艺术字隐藏在国风云雾山水图中制作方法 【第一步】&#xff1a;制作底图…

预约直播丨ETLCloud训练营:ETL中多流数据合并与运算专题

在大数据处理领域&#xff0c;一个至关重要的步骤是对多源数据流进行汇聚与融合&#xff0c;进而开展深度处理与剖析。此操作对于构建高效数据仓库、实现数据动态变化的实时洞察&#xff0c;以及驾驭复杂事件流的处理机制尤为关键。过程涉及从多样化的数据源中抽取信息&#xf…

在PostGIS中检查孤线(Find isolated lines in PostGIS)

场景 在PostGIS中有一张线要素表,需要检查该表中的孤线,并且进行自动纠正的计算。 其中孤线定义为两端端点都不在任何其他线的顶点上。 本文介绍在PostGIS中的线要素点,通过函数计算指定线要素表中的孤线,并计算最接近的纠偏位置。 In PostGIS, there is a table of line …

【C++】开源:RabbitMQ安装与配置使用(SimpleAmqpClient)

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c;下次更新不迷路&#x1…