当前位置： 首页 > news >正文

ReactNative Fabric渲染器和组件(5)

news 2024/12/30 0:51:55

ReactNative Fabric渲染器和组件

简述

Fabric是ReactNative中新架构最核心的模块，本章我们会来了解一下自定义一个Fabric组件，然后在JS文件中声明之后如何，是怎么映射到原生构建一个View的。
关于Fabric架构理念官网已经有说明了，我们就不细说了，从实现来说，就是在JS层会有一套DOM树，这个是基于React实现的，然后在C++层会构建出一个ShadowTree，由一个个ShadowNode组成的树，最终会映射到原生的View。

Demo

和TurboModule一样，我们也先按照官网流程生成一个自定义的Fabric组件，然后后面我们在JS中去使用它，最终来看看它的构建流程。

我们定义一个JS文件，然后使用使用Codegen生成脚手架。

// @flow strict-localimport type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
import type {HostComponent} from 'react-native';
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';type NativeProps = $ReadOnly<{|...ViewProps,text: ?string,// add other props here
|}>;export default (codegenNativeComponent<NativeProps>(
'RTNTestView',
): HostComponent<NativeProps>);

生成的代码如下：
在这里插入图片描述

入口

我们从index.js开始看，我们会省略一些React的逻辑，主要是看一下RN在Android上的流程，而对React对DOM对构建和管理不是我们所关心的。

1.1 index.js
入口调用了AppRegistry.registerComponent，() => App是我们写UI布局的地方，我们知道RN使用了JSX语法，我们 这样的UI标签本质其实是React.createElement(“Text”,…)，所以我们是可以通过这个函数获取ReactElement的，这一部分的构建属于React的，我们不深入研究。

AppRegistry.registerComponent(appName, () => App);

1.2 AppRegistry.registerComponent
主要是调用了renderApplication

registerComponent(appKey: string,componentProvider: ComponentProvider,section?: boolean,
): string {const scopedPerformanceLogger = createPerformanceLogger();runnables[appKey] = (appParameters, displayMode) => {const concurrentRootEnabled = Boolean(appParameters.initialProps?.concurrentRoot ||appParameters.concurrentRoot,);// 详见1.3renderApplication(componentProviderInstrumentationHook(componentProvider,scopedPerformanceLogger,),appParameters.initialProps,appParameters.rootTag,wrapperComponentProvider && wrapperComponentProvider(appParameters),rootViewStyleProvider && rootViewStyleProvider(appParameters),appParameters.fabric,scopedPerformanceLogger,appKey === 'LogBox', // is logboxappKey,displayMode,concurrentRootEnabled,);};if (section) {sections[appKey] = runnables[appKey];}return appKey;
}

1.3 renderApplication

export default function renderApplication<Props: Object>(RootComponent: React.ComponentType<Props>,initialProps: Props,rootTag: any,WrapperComponent?: ?React.ComponentType<any>,rootViewStyle?: ?ViewStyleProp,fabric?: boolean,scopedPerformanceLogger?: IPerformanceLogger,isLogBox?: boolean,debugName?: string,displayMode?: ?DisplayModeType,useConcurrentRoot?: boolean,useOffscreen?: boolean,) {
invariant(rootTag, 'Expect to have a valid rootTag, instead got ', rootTag);const performanceLogger = scopedPerformanceLogger ?? GlobalPerformanceLogger;// 这里将传入的RootComponent外面包了两层
let renderable: React.MixedElement = (<PerformanceLoggerContext.Provider value={performanceLogger}><AppContainerrootTag={rootTag}fabric={fabric}WrapperComponent={WrapperComponent}rootViewStyle={rootViewStyle}initialProps={initialProps ?? Object.freeze({})}internal_excludeLogBox={isLogBox}><RootComponent {...initialProps} rootTag={rootTag} /></AppContainer></PerformanceLoggerContext.Provider>
);// ...debug相关操作if (useOffscreen && displayMode != null) {// $FlowFixMe[incompatible-type]// $FlowFixMe[prop-missing]const Activity: ActivityType = React.unstable_Activity;renderable = (<Activitymode={displayMode === DisplayMode.VISIBLE ? 'visible' : 'hidden'}>{renderable}</Activity>);}// We want to have concurrentRoot always enabled when you're on Fabric.const useConcurrentRootOverride = fabric;// ... 性能日志// 渲染element，renderable是我们在app.js定义的UI并且在外面套上AppContainer和PerformanceLoggerContext.Provider生成的Element树的根节点。// 详见1.4Renderer.renderElement({element: renderable,rootTag,useFabric: Boolean(fabric),useConcurrentRoot: Boolean(useConcurrentRootOverride),});// ... 性能日志
}

1.4 renderElement
这里就是判断一下使用新渲染器Fabric还是以前的渲染器，我们这里跟Fabric的。
ReactFabric会根据是否是dev（debug）来决定使用ReactFabric-dev还是ReactFabric-prod，区别就是dev会有一些调试能力。
我们来看ReactFabric-prod里的render。

export function renderElement({element,rootTag,useFabric,useConcurrentRoot,}: {element: React.MixedElement,rootTag: number,useFabric: boolean,useConcurrentRoot: boolean,}): void {if (useFabric) {// 详见1.5require('../Renderer/shims/ReactFabric').render(element,rootTag,null,useConcurrentRoot,{onCaughtError,onUncaughtError,onRecoverableError,},);} else {require('../Renderer/shims/ReactNative').render(element,rootTag,undefined,{onCaughtError,onUncaughtError,onRecoverableError,},);}
}

1.5 render
这个文件里逻辑也可以不用太关心，这里主要是处理树的数据结构构造和更新，加上源码里一堆魔数，看不懂～，主要看一下流程。
接下来我们直接跳到这个文件里创建ShadowNode的地方。

exports.render = function (element,containerTag,callback,concurrentRoot,options) {// roots是一个Map缓存var root = roots.get(containerTag);// 如果之前没有这个root节点，需要新建if (!root) {root = nativeOnUncaughtError;var onCaughtError = nativeOnCaughtError,onRecoverableError = defaultOnRecoverableError;options &&void 0 !== options.onUncaughtError &&(root = options.onUncaughtError);options &&void 0 !== options.onCaughtError &&(onCaughtError = options.onCaughtError);options &&void 0 !== options.onRecoverableError &&(onRecoverableError = options.onRecoverableError);concurrentRoot = concurrentRoot ? 1 : 0;// 新建Fiber root节点options = new FiberRootNode(containerTag,concurrentRoot,!1,"",root,onCaughtError,onRecoverableError,null);// 新建Fiber节点concurrentRoot = createFiber(3, null, null, 1 === concurrentRoot ? 1 : 0);options.current = concurrentRoot;concurrentRoot.stateNode = options;root = createCache();root.refCount++;options.pooledCache = root;root.refCount++;concurrentRoot.memoizedState = {element: null,isDehydrated: !1,cache: root};initializeUpdateQueue(concurrentRoot);root = options;roots.set(containerTag, root);}// 触发更新updateContainer(element, root, null, callback);a: if (((element = root.current), element.child))switch (element.child.tag) {case 27:case 5:element = getPublicInstance(element.child.stateNode);break a;default:element = element.child.stateNode;}else element = null;return element;
};

1.6 completeWork
调用createNode来创建Shadow节点，uiViewClassName则是我们最早在JS中声明的，以我们自定义的Fabric组件为例就是RTNTestView
这里的createNode是nativeFabricUIManager里的createNode，而nativeFabricUIManager是一个native对象，通过JSI加载进来的，加载的代码在UIManagerBinding.cpp中，看过之前TurboModule加载和JSI的章节的话，很容易可以看懂这里的逻辑，详见1.6.1

function completeWork(current, workInProgress, renderLanes) {// ...// 详见1.7oldProps = createNode(current,renderLanes.uiViewClassName,oldProps,updatePayload,workInProgress);// ...
}nativeFabricUIManage = nativeFabricUIManager,
createNode = _nativeFabricUIManage.createNode,

1.6.1 UIManagerBinding::createAndInstallIfNeeded
这里就是将JS nativeFabricUIManager和UIManagerBinding关联，所以我们要来看一下UIManagerBinding的get方法，看一下createNode是怎么定义的。

void UIManagerBinding::createAndInstallIfNeeded(jsi::Runtime& runtime,const std::shared_ptr<UIManager>& uiManager) {auto uiManagerModuleName = "nativeFabricUIManager";auto uiManagerValue =runtime.global().getProperty(runtime, uiManagerModuleName);// 如果之前已经设置过了不重复设置if (uiManagerValue.isUndefined()) {auto uiManagerBinding = std::make_shared<UIManagerBinding>(uiManager);auto object = jsi::Object::createFromHostObject(runtime, uiManagerBinding);// 通过JSI接口设置全局global的属性nativeFabricUIManager为native的uiManagerBindingruntime.global().setProperty(runtime, uiManagerModuleName, std::move(object));}
}

1.7 UIManagerBinding::get
createNode调用了uiManager->createNode来构造ShadowNode，然后把ShadowNode封装到JSI::Vaule返回给JS层。
这里的uiManager是一个UIManager实例，UIManagerBinding和UIManager是在FabricUIManager模块加载时，加载SurfaceManager，里面构造Schudler的时候进行绑定的。

jsi::Value UIManagerBinding::get(jsi::Runtime& runtime,const jsi::PropNameID& name) {auto methodName = name.utf8(runtime);UIManager* uiManager = uiManager_.get();if (methodName == "createNode") {auto paramCount = 5;return jsi::Function::createFromHostFunction(runtime,name,paramCount,[uiManager, methodName, paramCount](jsi::Runtime& runtime,const jsi::Value& /*thisValue*/,const jsi::Value* arguments,size_t count) -> jsi::Value {try {validateArgumentCount(runtime, methodName, paramCount, count);auto instanceHandle =instanceHandleFromValue(runtime, arguments[4], arguments[0]);if (!instanceHandle) {react_native_assert(false);return jsi::Value::undefined();}// 把构造的ShadowNode封装成JSI::Vaule以便返回给JS层return valueFromShadowNode(runtime,// 调用的uiManager->createNode来构造ShadowNode，详见1.8uiManager->createNode(tagFromValue(arguments[0]),stringFromValue(runtime, arguments[1]),surfaceIdFromValue(runtime, arguments[2]),RawProps(runtime, arguments[3]),std::move(instanceHandle)),true);} catch (const std::logic_error& ex) {LOG(FATAL) << "logic_error in createNode: " << ex.what();}});}// ...
}

1.8 UIManager::createNode
这里就是真正构建shadowNode的地方，回过头去看一下Codegen生成的脚手架，会发现这个方法里用到的好多类在刚刚都见过。
componentDescriptor，Props，State，ShadowNode。
后面我们结合脚手架生成的代码来看看这些类的作用。

std::shared_ptr<ShadowNode> UIManager::createNode(Tag tag,const std::string& name,SurfaceId surfaceId,RawProps rawProps,InstanceHandle::Shared instanceHandle) const {SystraceSection s("UIManager::createNode", "componentName", name);// 我们每一个Fabric控件都会有一个ComponentDescriptor,然后会根据组件的名称注册到componentDescriptorRegistry_中去// 这里我们就可以通过组件名称获取ComponentDescriptor  // 我们一会会介绍，根据我们自定义的组件来看的话，这里最终获取的是RTNTestViewComponentDescriptorauto& componentDescriptor = componentDescriptorRegistry_->at(name);auto fallbackDescriptor =componentDescriptorRegistry_->getFallbackComponentDescriptor();PropsParserContext propsParserContext{surfaceId, *contextContainer_.get()};auto family = componentDescriptor.createFamily({tag, surfaceId, std::move(instanceHandle)});const auto props = componentDescriptor.cloneProps(propsParserContext, nullptr, std::move(rawProps));const auto state = componentDescriptor.createInitialState(props, family);// 详见3.1auto shadowNode = componentDescriptor.createShadowNode(ShadowNodeFragment{.props = fallbackDescriptor != nullptr &&fallbackDescriptor->getComponentHandle() ==componentDescriptor.getComponentHandle()? componentDescriptor.cloneProps(propsParserContext,props,RawProps(folly::dynamic::object("name", name))): props,.children = ShadowNodeFragment::childrenPlaceholder(),.state = state,},family);if (delegate_ != nullptr) {// 详见3.2delegate_->uiManagerDidCreateShadowNode(*shadowNode);}if (leakChecker_) {leakChecker_->uiManagerDidCreateShadowNodeFamily(family);}return shadowNode;
}

脚手架代码

我们先来看一下脚手架生成的代码，一会接着上面createNode。

我们先看看注册ComponentDescriptor的流程，在第一章启动流程中，介绍过application会调用getDefaultReactHost构造ReactHost。

2.1 getDefaultReactHost
我们这里只关注注册ComponentDescriptor流程，其他的之前介绍启动流程的时候介绍过了。
这里调用DefaultComponentsRegistry.register

@OptIn(UnstableReactNativeAPI::class)
@JvmStatic
public fun getDefaultReactHost(context: Context,packageList: List<ReactPackage>,jsMainModulePath: String = "index",jsBundleAssetPath: String = "index",isHermesEnabled: Boolean = true,useDevSupport: Boolean = ReactBuildConfig.DEBUG,cxxReactPackageProviders: List<(ReactContext) -> CxxReactPackage> = emptyList(),
): ReactHost {//...val componentFactory = ComponentFactory()// 详见2.2DefaultComponentsRegistry.register(componentFactory)// ...
}

2.2 DefaultComponentsRegistry.register
构造DefaultComponentsRegistry

public fun register(componentFactory: ComponentFactory): DefaultComponentsRegistry =DefaultComponentsRegistry(componentFactory)

2.3 DefaultComponentsRegistry
构造的时候会调用initHybrid，initHybrid是一个native方法。

private val mHybridData: HybridData = initHybrid(componentFactory)

@DoNotStrip private external fun initHybrid(componentFactory: ComponentFactory): HybridData

2.4 initHybrid

jni::local_ref<DefaultComponentsRegistry::jhybriddata>
DefaultComponentsRegistry::initHybrid(jni::alias_ref<jclass>,ComponentFactory* delegate) {auto instance = makeCxxInstance(delegate);auto buildRegistryFunction =[](const EventDispatcher::Weak& eventDispatcher,const ContextContainer::Shared& contextContainer)-> ComponentDescriptorRegistry::Shared {ComponentDescriptorParameters params{.eventDispatcher = eventDispatcher,.contextContainer = contextContainer,.flavor = nullptr};// buildRegistryFunction会调用sharedProviderRegistry，详见2.5auto registry = DefaultComponentsRegistry::sharedProviderRegistry()->createComponentDescriptorRegistry(params);auto& mutableRegistry = const_cast<ComponentDescriptorRegistry&>(*registry);mutableRegistry.setFallbackComponentDescriptor(std::make_shared<UnimplementedNativeViewComponentDescriptor>(params));return registry;};delegate->buildRegistryFunction = buildRegistryFunction;return instance;
}

2.5 buildRegistryFunction

std::shared_ptr<const ComponentDescriptorProviderRegistry>DefaultComponentsRegistry::sharedProviderRegistry() {// 这里注册的是RN的核心模块auto providerRegistry = CoreComponentsRegistry::sharedProviderRegistry();// 这里注册我们自定义的模块，详见2.6 if (DefaultComponentsRegistry::registerComponentDescriptorsFromEntryPoint) {(DefaultComponentsRegistry::registerComponentDescriptorsFromEntryPoint)(providerRegistry);} else {LOG(WARNING)<< "Custom component descriptors were not configured from JNI_OnLoad";}return providerRegistry;
}

2.6 DefaultComponentsRegistry::registerComponentDescriptorsFromEntryPoint
这里的registerComponentDescriptorsFromEntryPoint是facebook::react::registerComponents

void registerComponents(std::shared_ptr<const ComponentDescriptorProviderRegistry> registry) {// ...// 详见2.7autolinking_registerProviders(registry);
}

2.7 autolinking_registerProviders
这里调用add来注册ComponentDescriptor
RTNTestViewComponentDescriptor是脚手架生成的，concreteComponentDescriptorProvider是一个模板方法，其中生成ComponentDescriptorProvider中constructor可以构造RTNTestViewComponentDescriptor

void autolinking_registerProviders(std::shared_ptr<ComponentDescriptorProviderRegistry const> providerRegistry) {providerRegistry->add(concreteComponentDescriptorProvider<RTNTestViewComponentDescriptor>());return;
}

2.8 ComponentDescriptorRegistry::add
这里调用constructor，会构造RTNTestViewComponentDescriptor，然后根据名字和句柄分别存储在两个map中。

void ComponentDescriptorRegistry::add(ComponentDescriptorProvider componentDescriptorProvider) const {std::unique_lock lock(mutex_);auto componentDescriptor = componentDescriptorProvider.constructor({parameters_.eventDispatcher,parameters_.contextContainer,componentDescriptorProvider.flavor});// ...auto sharedComponentDescriptor = std::shared_ptr<const ComponentDescriptor>(std::move(componentDescriptor));_registryByHandle[componentDescriptorProvider.handle] =sharedComponentDescriptor;_registryByName[componentDescriptorProvider.name] = sharedComponentDescriptor;
}

2.9 RTNTestViewComponentDescriptor
RTNTestViewComponentDescriptor是一个ConcreteComponentDescriptor，ConcreteComponentDescriptor封装了组件的信息，包括shadowNode，state，prop等。
而RTNTestViewShadowNode则是一个ConcreteViewShadowNode模板类，里面会包含所RTNTestViewProps，RTNTestViewEventEmitter，RTNTestViewState，这样脚手架就实现了一个自定义Fabric组件然后关联组件自己的Props，State，EventEmitter。

using RTNTestViewComponentDescriptor = ConcreteComponentDescriptor<RTNTestViewShadowNode>;using RTNTestViewShadowNode = ConcreteViewShadowNode<RTNTestViewComponentName,RTNTestViewProps,RTNTestViewEventEmitter,RTNTestViewState>;

接着第一节创建ShadowNode

3.1 RTNTestViewComponentDescriptor.createShadowNode
构建了一个RTNTestViewShadowNode

std::shared_ptr<ShadowNode> createShadowNode(const ShadowNodeFragment& fragment,const ShadowNodeFamily::Shared& family) const override {// ShadowNodeT是模板参数，RTNTestViewShadowNode，所以这里构建了一个RTNTestViewShadowNodeauto shadowNode =std::make_shared<ShadowNodeT>(fragment, family, getTraits());adopt(*shadowNode);return shadowNode;
}

3.2 uiManagerDidCreateShadowNode
这里也是接着1.8的，从delegate_->uiManagerDidCreateShadowNode过来。

void Scheduler::uiManagerDidCreateShadowNode(const ShadowNode& shadowNode) {if (delegate_ != nullptr) {// 详见3.3delegate_->schedulerDidRequestPreliminaryViewAllocation(shadowNode);}
}

3.3 FabricUIManagerBinding::schedulerDidRequestPreliminaryViewAllocation
调用了mountingManager调用maybePreallocateShadowNode，构造好的shadowNode后续需要mount挂载，挂载之后就会构建原生的View。

void FabricUIManagerBinding::schedulerDidRequestPreliminaryViewAllocation(const ShadowNode& shadowNode) {auto mountingManager = getMountingManager("preallocateView");if (!mountingManager) {return;}// 详见3.4 mountingManager->maybePreallocateShadowNode(shadowNode);// ...
}

3.4 FabricMountingManager::maybePreallocateShadowNode
这里构建了ShadowView，然后调用了preallocateShadowView

void FabricMountingManager::maybePreallocateShadowNode(const ShadowNode& shadowNode) {if (!shadowNode.getTraits().check(ShadowNodeTraits::Trait::FormsView)) {return;}static thread_local bool onMainThread = isOnMainThread();if (onMainThread) {// View preallocation is not beneficial when rendering on the main threadreturn;}// 构造ShadowViewauto shadowView = ShadowView(shadowNode);if (ReactNativeFeatureFlags::useOptimisedViewPreallocationOnAndroid()) {std::lock_guard lock(preallocateMutex_);preallocatedViewsQueue_.push_back(std::move(shadowView));} else {// 详见3.5preallocateShadowView(shadowView);}
}

3.5 FabricMountingManager::preallocateShadowView
每个surfaceId会映射一个队列，队列里会记录所有使用过的View的TAG，然后调用preallocateView，preallocateView映射java层的方法。

void FabricMountingManager::preallocateShadowView(const ShadowView& shadowView) {SystraceSection section("FabricMountingManager::preallocateShadowView");{// 每个SurfaceId会映射一个数组，数组里记录使用到的View的TAGstd::lock_guard lock(allocatedViewsMutex_);auto allocatedViewsIterator =allocatedViewRegistry_.find(shadowView.surfaceId);if (allocatedViewsIterator == allocatedViewRegistry_.end()) {return;}auto& allocatedViews = allocatedViewsIterator->second;if (allocatedViews.find(shadowView.tag) != allocatedViews.end()) {return;}allocatedViews.insert(shadowView.tag);}bool isLayoutableShadowNode = shadowView.layoutMetrics != EmptyLayoutMetrics;// 映射java的方法，preallocateViewstatic auto preallocateView =JFabricUIManager::javaClassStatic()->getMethod<void(jint, jint, jstring, jobject, jobject, jboolean)>("preallocateView");// ...处理Prop和Stateauto component = getPlatformComponentName(shadowView);// 调用preallocateView，这里会调用到java的preallocateView，详见3.6 preallocateView(javaUIManager_,shadowView.surfaceId,shadowView.tag,component.get(),props.get(),(javaStateWrapper != nullptr ? javaStateWrapper.get() : nullptr),isLayoutableShadowNode);
}

3.6 SurfaceMountingManager.preallocateView
调用createViewUnsafe构建View

@UiThread
public void preallocateView(@NonNull String componentName,int reactTag,@Nullable ReadableMap props,@Nullable StateWrapper stateWrapper,boolean isLayoutable) {UiThreadUtil.assertOnUiThread();if (isStopped()) {return;}if (getNullableViewState(reactTag) != null) {return;}// 详见3.7createViewUnsafe(componentName, reactTag, props, stateWrapper, null, isLayoutable);
}

3.7 createViewUnsafe

@UiThread
public void createViewUnsafe(@NonNull String componentName,int reactTag,@Nullable ReadableMap props,@Nullable StateWrapper stateWrapper,@Nullable EventEmitterWrapper eventEmitterWrapper,boolean isLayoutable) {Systrace.beginSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE,"SurfaceMountingManager::createViewUnsafe(" + componentName + ")");try {ReactStylesDiffMap propMap = new ReactStylesDiffMap(props);// 将View的核心要素Prop，State，EventEmitter封装到ViewStateViewState viewState = new ViewState(reactTag);viewState.mCurrentProps = propMap;viewState.mStateWrapper = stateWrapper;viewState.mEventEmitter = eventEmitterWrapper;mTagToViewState.put(reactTag, viewState);if (isLayoutable) {ViewManager viewManager = mViewManagerRegistry.get(componentName);// 调用ViewManager.createView,这里的ViewManager每个Fabric组件都有一个// 以我们实现的RTNTestViewManager为例来看看,详见3.8viewState.mView =viewManager.createView(reactTag, mThemedReactContext, propMap, stateWrapper, mJSResponderHandler);viewState.mViewManager = viewManager;}} finally {Systrace.endSection(Systrace.TRACE_TAG_REACT_JAVA_BRIDGE);}
}

3.8 RTNTestViewManager
这里我们实现的RTNTestViewManager继承自SimpleViewManager，而SimpleViewManager继承自BaseViewManager，BaseViewManager继承自ViewManager。
ViewManager的createView会调用createViewInstance，同时createView会更新Prop，State，EventEmitter。
而这里createViewInstance就会构建View。

@ReactModule(name = RTNTestViewManager.NAME)
public class RTNTestViewManager extends SimpleViewManager<TextView>implements RTNTestViewManagerInterface<TextView> {private final ViewManagerDelegate<TextView> mDelegate;static final String NAME = "RTNTestView";public RTNTestViewManager(ReactApplicationContext context) {mDelegate = new RTNTestViewManagerDelegate<>(this);}@Nullable@Overrideprotected ViewManagerDelegate<TextView> getDelegate() {return mDelegate;}@NonNull@Overridepublic String getName() {return RTNTestViewManager.NAME;}@NonNull@Overrideprotected TextView createViewInstance(@NonNull ThemedReactContext context) {// 返回自定义的View，这里只是随便返回一个TextView，实际是要返回一个自定义的Viewreturn new TextView(context);}@Override@ReactProp(name = "text")public void setText(TextView view, @Nullable String text) {view.setText(text);}
}

其他

  • Props
    Props继承了ViewProps，之所以要有继承是因为需要实现一些基础的属性，ViewProps本质是BaseViewProps，BaseViewProps继承了YogaStylableProps和AccessibilityProps，实现基础属性，比如有宽度高度等等基础属性，这样我们自定义的Fabric就只需要定义我们额外的属性。

    class RTNTestViewProps final : public ViewProps {
    public:
    RTNTestViewProps() = default;
    RTNTestViewProps(const PropsParserContext& context, const RTNTestViewProps &sourceProps, const RawProps &rawProps);

      #pragma mark - Propsstd::string text{};

    };

小结

本节我们只是介绍了Fabric的组件以及渲染器的核心流程，在JS层定义UI布局，然后React层会构建一个DOM树，后面会将DOM树同步到ShadowNode层，最后会根据ShadowNode构建原生组件。
EmitterEvent，Props，State这些分发设置我们就不继续深入研究了，如果后续有机会的话可能会更加深入学习，目前我们只是了解一下跨端开发的原理和设计思想，拓宽一下眼界，下一节我们会学习一下Flutter，Flutter和RN的设计思想完全不同。


http://www.mrgr.cn/news/62232.html

相关文章：

  • Python之Web开发
  • 影刀进阶指令 | Kimi （对标ChatGPT）
  • 2025年度好用便签推荐，电脑桌面便签app分享
  • Ftrans数据摆渡系统 搭建安全便捷跨网文件传输通道
  • Linux系统编程——线程
  • 社媒运营专线 - SD-WAN 跨境网络专线 —— 外贸企业社媒平台的专属 “快车道”
  • 统信UOS下启动图形界面应用工具monitor报JAVA相关错：An error has occurred. See the log file
  • 《高频电子线路》 —— 高频谐振功放
  • RK3568平台开发系列讲解（I2C篇）I2C 上拉电阻
  • 统信UOS下启动图形界面应用工具manager报错：No protocol specified的解决办法
  • 不使用三方软件，win系统下禁止单个应用联网能力的详细操作教程
  • C语言实现堆排序
  • Redis 线程控制 问题
  • C语言实现选择排序
  • 主成分分析（PCA）在医学数据分析中的神奇力量
  • 当AI取代真相，大模型如何一步步诱骗了人类的文明？
  • ubuntu增加swap交换空间
  • 车载中控系统的UI自动化测试实践
  • VB.NET中如何利用Windows Forms进行桌面应用开发
  • HCIP-HarmonyOS Application Developer V1.0 笔记（二）
  • 代码编辑器 | Visual Studio Code v1.95.0
  • C语言：动态内存管理【上】
  • leetcode hot100【LeetCode 118. 杨辉三角】java实现
  • 二十二、MySQL 8.0 主从复制原理分析与实战
  • Kylin Server V10 下编译安装 Python
  • npm ERR! path /Users/*/Desktop/task_work_all/node_modules/canvas