您的位置:首页 > 新闻 > 会展 > Amis源码 embed渲染方法解析(json结构渲染原理):

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

2025/11/7 0:05:13 来源:https://blog.csdn.net/qq_42152032/article/details/139301762  浏览:    关键词: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 传递过去完成渲染。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com