Don't Use No Memo Callback To Render Element

react针对props state的变化是浅比较，因此不要在组件内部创建简单的变量并且依赖它

const ScalingNotAllowedText = (props: any) => {
    const {style, ...otherProps} = props;
    const customStyle = [
        style,
        {
            fontFamily: FontFamily.main
        }
    ]

    return <Text allowFontScaling={false} style={customStyle} {...otherProps}/>;
}

使用 useMemo代替

const ScalingNotAllowedText = (props: any) => {
    const [customStyle,otherProps]=useMemo(()=>{
        const {style, ...otherProps} = props;
        const customStyle = [
            style,
            {
                fontFamily: FontFamily.main,
            }
        ]
        return[ customStyle,otherProps];

    },[props]);

    return <Text allowFontScaling={false} style={customStyle} {...otherProps}/>;
}

如此使用也会导致每次diff都重复渲染组件

const Home = ({navigation}: NavigationProps) => {
    const functionBar = () => <FunctionBar navigation={navigation}/>;
    const marinBoard = () => <MainBoard/>;
    const modalVisible = useAppSelector(selectShowAddBoard);

    return (
        <View style={styleSheet.homeContainer}>
            <View style={{width: '100%', height: '18%'}}>
                {functionBar()}
            </View>
            <View style={styleSheet.mainBoardWrapper}>
                {marinBoard()}
            </View>
             {/*AddBoard模态*/}
            <Modal
                visible={modalVisible}
                transparent={true}
                animationType={'fade'}
            >
                <View style={{flex: 1, alignItems: 'center', backgroundColor: BackgroundColor.modalShadow}}>
                    <View style={{position: 'absolute', bottom: 0, width: '100%'}}>
                        <AddBoard/>
                    </View>
                </View>
            </Modal>
        </View>
    )
}

最好的方法是

const Home = ({navigation}: NavigationProps) => {
    const modalVisible = useAppSelector(selectShowAddBoard);

    return (
        <View style={styleSheet.homeContainer}>
            <View style={{width: '100%', height: '18%'}}>
                <FunctionBar navigation={navigation}/>
            </View>
            <View style={styleSheet.mainBoardWrapper}>
                <MainBoard/>
            </View>
             {/*AddBoard模态*/}
            <Modal
                visible={modalVisible}
                transparent={true}
                animationType={'fade'}
            >
                <View style={{flex: 1, alignItems: 'center', backgroundColor: BackgroundColor.modalShadow}}>
                    <View style={{position: 'absolute', bottom: 0, width: '100%'}}>
                        <AddBoard/>
                    </View>
                </View>
            </Modal>
        </View>
    )
}

如果非要使用callback 你可以

const Home = ({navigation}: NavigationProps) => {
    const functionBar = useCallback(() => <FunctionBar navigation={navigation}/>, [navigation]);
    const marinBoard = useCallback(() => <MainBoard/>, [navigation]);
    const modalVisible = useAppSelector(selectShowAddBoard);

    return (
        <View style={styleSheet.homeContainer}>
            <View style={{width: '100%', height: '18%'}}>
                {functionBar()}
            </View>
            <View style={styleSheet.mainBoardWrapper}>
                {marinBoard()}
            </View>
            {/*AddBoard模态*/}
            <Modal
                visible={modalVisible}
                transparent={true}
                animationType={'fade'}
            >
                <View style={{flex: 1, alignItems: 'center', backgroundColor: BackgroundColor.modalShadow}}>
                    <View style={{position: 'absolute', bottom: 0, width: '100%'}}>
                        <AddBoard/>
                    </View>
                </View>
            </Modal>
        </View>
    )
}

sky31studio / GongGongApp

Don't Use No Memo Callback To Render Element #2