原生工作原理

React Strict DOM 依赖 React Native 和 polyfill 来针对原生平台。

原生能力

React Strict DOM 帮助推动了向 React Native 添加新功能，使其与 W3C 规范相匹配，例如 boxShadow、filter、mixBlendMode、DOM 遍历 API、事件循环等。在原生代码中添加新功能是充实 React Native 中 Web 兼容性的首选方法。

元素 polyfill

React Strict DOM polyfill 了 React DOM 提供的许多 HTML 元素，例如 <div>、<span>、<main>、<del> 等。每个 HTML 元素都映射到 React Native 中的等效元素。 块级元素（例如，<div>）映射到 <ViewNativeComponent>。内联（文本）元素（例如，<span>）映射到 <Text>。 用户输入元素（例如，input 和 textarea）映射到 <TextInput>。 等等。

属性 polyfill

某些 W3C 元素属性 polyfill 之前已构建到 React Native 中。 其他的则在 React Strict DOM 中实现或重新实现。

样式 polyfill

React Strict DOM 通过使用 flexbox 近似值来 polyfill 诸如 <div> 之类的元素的默认块布局。当诸如 <div> 之类的元素使用 flexbox 布局时，浏览器对于 flex 的默认设置也会在原生端进行复制。 需要使用这种方法，因为 React Native 目前不支持 CSS 流式布局，并且 HTML 元素的默认布局和样式与 React Native 元素提供的布局和样式不同。

React Strict DOM 通过使用 React Context 和关于应用状态的其他运行时信息来 polyfill 依赖于元素层次结构的 CSS 特性 - CSS 自定义属性、CSS 媒体查询、CSS 继承、CSS 相对单位。 大量使用 Memoization 来降低重复操作的成本，并限制由样式更改引起的避免 React 重新渲染和更新。

React Strict DOM 通过将 W3C CSS 属性名称和值映射到 React Native 中适当的非标准等效项来 polyfill 它们。 并且它通过使用 React Native 的 Animated 库组件来 polyfill CSS 过渡。