样式缓存&媒体查询&resize重新计算rpx和style #2101

wenwenhua · 2025-07-07T11:18:59Z

fix: RN 屏幕尺寸变化时，页面onResize触发时机由原来所有页面立即触发onResize更改为只有栈顶页面立即触发，其他页面在其onShow之后触发
feat: RN rpx,vh,vw单位支持在屏幕尺寸变化时重新渲染
feat: RN 新增rnConfig.customDimensionsInfo配置用于修改控制rpx,vh,vw渲染的屏幕尺寸信息
feat: RN 支持css媒体查询

hiyuki · 2025-08-08T07:19:41Z

packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js

 const empty = {}

-function formatValue (value) {
+function formatValue (value, screenInfo = global.__mpxAppDimensionsInfo.screen) {


这个地方没必要传参吧，从全局取就好了

hiyuki · 2025-08-08T09:01:46Z

packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js

 export default function styleHelperMixin () {
  return {
+    watch: {
+      '__dimensionsInfo.screen.width, __dimensionsInfo.screen.height' (newValue, oldValue) {


这个缓存没必要再组件里清除，组件只要能刷新自己就好

hiyuki · 2025-08-08T09:26:00Z

packages/webpack-plugin/lib/react/processStyles.js

        } else {
+          const classMapCode = Object.entries(classMap).reduce((result, [key, value]) => {
+            result += `get ['${key}']() {
+            if(!this.__classMapValueCache) {


你这个地方的this绑定到哪里去了？

直接走闭包变量作为缓存就可以了

hiyuki · 2025-08-08T09:36:26Z

packages/webpack-plugin/lib/react/style-helper.js

+              _media
+            }
+          } else {
+            classMap[key] = Object.assign(classMap[key] || {}, classMapValue)


你这逻辑不会覆盖么

hiyuki · 2025-08-08T10:45:18Z

packages/core/src/platform/patch/getDefaultOptions.ios.js

            triggerPageStatusHook(mpxProxy, newVal)
+            // 如果当前全局size与pagesize不一致，在show之后触发一次resize事件
+            if (newVal === 'show') {
+              triggerResizeEvent(mpxProxy, pageId)


确认一下时序

为啥不是在下面if条件中进行的？

hiyuki · 2025-08-08T11:12:58Z

packages/core/src/platform/createApp.ios.js

+
+        // // 对比 screen 高宽是否存在变化
+        if (getPageSize(screen) === oldScreen) return
+        global.__appClassMapValueCache = {}


这是个Map

…ia-screen

hiyuki · 2025-10-09T06:53:22Z

packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js

+  const oldScreen = getPageSize(global.__mpxAppDimensionsInfo.screen)
+  useDimensionsInfo({ window, screen })
+
+  if (getPageSize(screen) === oldScreen) console.log('Dimensions change, but screen size not changed', getPageSize(screen), oldScreen)


移除调试代码

hiyuki · 2025-10-09T07:03:03Z

packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js

        return concat(staticClass, stringifyDynamicClass(dynamicClass))
      },
      __getStyle (staticClass, dynamicClass, staticStyle, dynamicStyle, hide) {
+        console.log('__getStyle ', JSON.stringify(global.__mpxAppDimensionsInfo.screen))


移除调试代码

packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js

hiyuki · 2025-10-09T07:08:12Z

packages/webpack-plugin/lib/react/processStyles.js

+  if (ctorType === 'app') {
+    output += `
+          /* styles */
+          global.__classMapValueCache = new Map();


这个cache应该是每个style独立一份

hiyuki · 2025-10-09T07:13:10Z

packages/core/src/platform/patch/getDefaultOptions.ios.js


 function createInstance ({ propsRef, type, rawOptions, currentInject, validProps, componentsMap, pageId, intersectionCtx, relation, parentProvides }) {
+  if (type === 'page') {
+    set(global.__mpxPageSizeCountMap, pageId, global.__mpxSizeCount)


逻辑合并到下面处理page的条件中去

hiyuki · 2025-10-09T07:26:20Z

packages/core/src/platform/patch/getDefaultOptions.ios.js

+            // 如果当前全局size与pagesize不一致，在show之后触发一次resize事件
+            if (newVal === 'show' && global.__mpxPageSizeCountMap[pageId] !== global.__mpxSizeCount) {
+              // 刷新__mpxPageSizeCountMap, 每个页面仅会执行一次，直接驱动render刷新
+              set(global.__mpxPageSizeCountMap, pageId, global.__mpxSizeCount)


前面set过了这里可以直接赋值不用set

hiyuki · 2025-10-09T07:27:42Z

packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js

+  const navigation = getFocusedNavigation()
+
+  if (navigation) {
+    set(global.__mpxPageSizeCountMap, navigation.pageId, global.__mpxSizeCount)


直接赋值

hiyuki · 2025-10-09T07:43:33Z

packages/webpack-plugin/lib/react/processStyles.js

  let content = ''
-  let output = '/* styles */\n'
+  let output = ''
+  if (ctorType === 'app') {


这里全局方法不要挂在app当中，独立输出组件时没有app，都统一放到运行时的styleHelperMixin.ios.js中

hiyuki · 2025-10-10T11:09:27Z

packages/webpack-plugin/lib/react/processStyles.js

        })
+        const classMapCode = Object.entries(classMap).reduce((result, [key, value]) => {
+          result += `get ['${key}']() {
+            return global.__getCacheClass(__classMapCache, '${key}', () => (${shallowStringify(value)}));


感觉样板代码有点太多了，特别是key会出现两次，可以优化为：
classMap只转为getter, __getClassMap方法移除，改为__getClassStyle，接收classname返回样式obj，在运行时处理缓存逻辑

global.currentInject.injectMethods = { __getClassStyle: function(classname) { if(!__classMap) { __classMap = { 'class-a':()=>({'color': 'red'}), 'class-b':()=>({'font-size': 12}) } } return global.__getCachedClassStyle(classname, __classMap, __classMapCache); }

hiyuki · 2025-10-10T11:48:30Z

packages/webpack-plugin/lib/react/processStyles.js

+        }, '')
        if (ctorType === 'app') {
          output += `
+          const __classMapCache = new Map()


简化叫classCache吧

hiyuki · 2025-10-14T09:06:49Z

packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js

-              // todo 全局样式在每个页面和组件中生效，以支持全局原子类，后续支持样式模块复用后可考虑移除
-              mergeResult(appClassMap[className])
+            const _thisStyle = this.__getClassStyle?.(className)
+            const appStyle = global.__getAppClassStyle?.(className)


这里实现优化一下，在本地classStyle存在的情况下不需要访问App

let localStyle, appStyle const getAppClassStyle = global.__getAppClassStyle || noop if(localStyle = this.__getClassStyle(className)){ // use localStyle } else if(appStyle = getAppClassStyle(className)){ // use appStyle }

hiyuki · 2025-10-14T09:14:00Z

packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js

+              }
            } else if (isObject(this.__props[className])) {
              // externalClasses必定以对象形式传递下来
              mergeResult(this.__props[className])


确认externalClasses是否需要处理default和media,需要的话处理统一放在mergeResult里吧

这个我看了一下不需要处理，你改完代码需要测试啊。。。

…ia-screen

hiyuki · 2025-10-22T06:54:16Z

packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js

+            let localStyle, appStyle
+            const getAppClassStyle = global.__getAppClassStyle || noop
+            if (localStyle = this.__getClassStyle(className)) {
+              mergeResult(localStyle || empty)


不需要||empty

wenwenhua and others added 9 commits June 13, 2025 17:16

feat: add init

733a094

format screen options

4284962

Merge branch 'master' into feat-media-screen

1dd7830

feat: rpx、vh、vw屏幕变化时刷新

21f3b8c

feat: onResize触发时机与微信拉齐

9f9837c

mergr fix-rn-resize-mackwang

304401f

add mefia

c2df416

add media app

13abb6d

Merge branch 'master' into feat-media-screen

38611dc

wenwenhua changed the title ~~Feat media screen~~ 样式缓存&媒体查询&resize重新计算rpx和style Jul 7, 2025

wenwenhua changed the title ~~样式缓存&媒体查询&resize重新计算rpx和style~~ 【开发中】样式缓存&媒体查询&resize重新计算rpx和style Jul 7, 2025

wenwenhua and others added 7 commits July 8, 2025 23:08

add 样式缓存

2e5c822

update minWidth

f947cfd

feat: add

cdc2bcb

merge master

9ea1f8f

feat: 安卓折叠屏恢复临时方案

6cbc234

feat: 暴露rnConfig.dimensionsInfoEdit方法修改dimensionsInfo

e2944c9

feat: rnConfig.dimensionsInfoEdit更名为customDimensionsInfo

a80133b

wenwenhua changed the title ~~【开发中】样式缓存&媒体查询&resize重新计算rpx和style~~ 样式缓存&媒体查询&resize重新计算rpx和style Jul 16, 2025

wenwenhua and others added 3 commits July 16, 2025 12:01

Merge branch 'master' into feat-media-screen

55e1e94

feat: 所有css单位由基于window改为基于screen

bca2197

文档

6760f80

hiyuki reviewed Aug 8, 2025

View reviewed changes

Merge branch 'master' into feat-media-screen

c8dc4c4

hiyuki reviewed Aug 8, 2025

View reviewed changes

Merge branch 'master' into feat-media-screen

bb311e4

Merge branch 'feat-media-screen' of github.com:didi/mpx into feat-med…

b6cb63b

…ia-screen

hiyuki reviewed Oct 9, 2025

View reviewed changes

packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js Show resolved Hide resolved

hiyuki reviewed Oct 9, 2025

View reviewed changes

mackwang112 and others added 7 commits October 9, 2025 15:59

fix: delete console.log

fa19f4a

feat: fix cr __classMapCache

7b8aadd

del style

af3be1b

getStyleObj兜底

9702977

merge master

bfc1282

fix: 解决冲突

016f94d

fix: 解决冲突

a03632a

hiyuki reviewed Oct 10, 2025

View reviewed changes

wenwenhua added 2 commits October 10, 2025 21:02

fix cr __getClassStyle

15c1f30

fix classCache

40fdec7

hiyuki reviewed Oct 14, 2025

View reviewed changes

hiyuki and others added 4 commits October 15, 2025 18:43

Merge branch 'master' into feat-media-screen

85e9e96

Merge branch 'master' into feat-media-screen

9fb7799

Merge branch 'feat-media-screen' of github.com:didi/mpx into feat-med…

344a836

…ia-screen

fix cr

659518b

hiyuki reviewed Oct 22, 2025

View reviewed changes

wenwenhua added 3 commits October 22, 2025 19:42

cr

ecc2131

Merge branch 'master' into feat-media-screen

26946b3

feat: gcc 不兜底

b8c332c

样式缓存&媒体查询&resize重新计算rpx和style #2101

Are you sure you want to change the base?

样式缓存&媒体查询&resize重新计算rpx和style #2101

Uh oh!

Conversation

wenwenhua commented Jul 7, 2025 • edited by mackwang112 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hiyuki Aug 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hiyuki Aug 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hiyuki Oct 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hiyuki Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

wenwenhua commented Jul 7, 2025 •

edited by mackwang112

Loading

hiyuki Aug 8, 2025 •

edited

Loading

hiyuki Aug 8, 2025 •

edited

Loading

hiyuki Oct 9, 2025 •

edited

Loading

hiyuki Oct 10, 2025 •

edited

Loading