-
Notifications
You must be signed in to change notification settings - Fork 392
Feat recycle rn & wx #1983
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Feat recycle rn & wx #1983
Conversation
const extendComponents = {} | ||
useExtendComponents.forEach((name) => { | ||
if (mode === 'wx') { | ||
if (EXTEND_COMPONENTS_LIST.includes(name)) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这个直接维护一个map吧,每个mode支持哪些拓展组件,直接依赖那个map判断就行
const extendComponents = {} | ||
useExtendComponents.forEach((name) => { | ||
if (EXTEND_COMPONENTS_LIST.includes(name)) { | ||
extendComponents[name] = require.resolve(`../runtime/components/react/dist/mpx-${name}.jsx`) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
normalize.lib
{ | ||
style: [{ height, width }, style, layoutStyle], | ||
data: convertedListData, | ||
keyExtractor: (item: any, index: number) => item + index, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
用默认的吧,这个不合理
{ | ||
style: [{ height, width }, style, layoutStyle], | ||
sections: convertedListData, | ||
keyExtractor: (item: any, index: number) => item + index, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
+1
), []) | ||
|
||
const renderListHeader = useCallback(() => ( | ||
<ListHeader listHeaderData={listHeaderData} generichash={generichash} genericlistHeader={genericListHeader}/> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这里走callback缓存的话不会重新捕获闭包,数据和jsx片段都不会更新
<ListHeader listHeaderData={listHeaderData} generichash={generichash} genericlistHeader={genericListHeader}/> | ||
), []) | ||
|
||
const convertToSectionListData = useCallback((data: ListItem[]): Section[] => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这个可以直接扔到下面的useMemo里,能少一个钩子
}, [convertedListData]) | ||
|
||
const getItemLayout = useCallback((data: any, index: number) => { | ||
return itemLayouts[index] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
也可以和上面的useMemo合成一个,减少钩子数量
keyExtractor: (item: any, index: number) => item + index, | ||
renderItem: renderItem, | ||
getItemLayout: getItemLayout, | ||
ListHeaderComponent: (generichash && genericListHeader && renderListHeader) || null, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
getGeneric(generichash, genericListHeader) => GenericComponent
|
||
const getListHeaderComponent = (generichash: string, generickey: string, data: any) => { | ||
if (!generichash || !generickey) return undefined | ||
return () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这里直接给element就可以
}, | ||
mpxGenericRecycleItem: String, | ||
mpxGenericSectionHeader: String, | ||
mpxGenericListHeader: String |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这里为啥需要传递这个,在react的实现里没有看到对应属性
scrollWithAnimation: { | ||
type: Boolean, | ||
value: false | ||
}, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
微信下不需要itemHeight之类的吗?但是属性不定义的话会报错吧
|
||
if (mode === 'wx' || mode === 'ali') { | ||
const { useExtendComponents = {} } = mpx | ||
if (isApp && useExtendComponents[mode]) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
需要考虑非App独立组件输出的场景,以及开个编译配置吧,打开的时候再注入
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这个逻辑抽一个方法放在helpers中维护吧
scroll-into-view="{{scrollIntoViewId}}" | ||
scroll-into-view-alignment="{{viewPosition}}" | ||
> | ||
<block wx:if="{{mpxGenericListHeader}}"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
判断是否存在数据来决定是否渲染对应区域,而不是通过generics
</sticky-section> | ||
</block> | ||
<block wx:else> | ||
<block wx:if="{{item.itemData && item.itemData.isSectionHeader}}"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
和上面对齐都使用item.headerData来定义sectionHeader吧
) | ||
) | ||
: createElement( | ||
FlatList, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
FlatList中没有使用用户定义的sectionHeader进行渲染
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
可以考虑统一使用sectionList进行渲染,通过stickySectionHeadersEnabled控制是否开启sticky效果即可
chore: cr问题修改
No description provided.