无法在 React Native 应用程序中使用 React.memo

Posted 2023-03-23

【中文标题】无法在 React Native 应用程序中使用 React.memo

【英文标题】：Unable to use React.memo in React Native app

【发布时间】：2019-04-20 11:26:02

【问题描述】：

我想使用 React.memo 来优化 react native。

import React from "react";
import  View, Text  from "react-native";

const Memo = React.memo(function() 
  return (
    <View>
      <Text>Ok</Text>
    </View>
  );
);
class Demo extends React.Component 
  render() 
    return <Memo />;
  


export default Demo;

它给出以下错误：

TypeError : undefined 不是函数（评估render(nextProps)）。 此错误位于： 在演示中（在 renderApplication.js:34） 在 RCTView（在 View.js:44 处）

我们可以在 react native 中使用 React.memo 吗？

【问题讨论】：

你使用的是什么版本的 react-native？我的猜测是您使用的版本早于 16.8，它不支持挂钩。是这样吗？

github.com/facebook/react-native/issues/22366 这是一个真正的问题，似乎还没有解释

【参考方案1】：

您尝试记忆的“组件”不是正确的反应组件，它没有被传递任何道具。 react memo HOC 也只适用于功能组件，PureComponent 用于基于类的组件

您需要确保您使用的是引入了memo HOC 的当前版本的 react，并按如下方式使用它：

import React,  Component, memo  from "react";
import  View, Text  from "react-native";

const Demo = props => (
  <View>
    <Text>Ok</Text>
  </View>
);

export default memo(Demo); // memo HOC memoizes return component based on state and props!

React memo

【参考方案2】：

const MyFunctionComponent = (text) => <Text>text</Text>;

MyFunctionComponent.displayName = 'HarmlessComponent';
MyFunctionComponent.propTypes = text: PropTypes.string.isRequired;

export default React.memo(MyFunctionComponent);

【讨论】：

请使用提供的工具格式化您的答案中的代码。通过解释代码及其解决问题的方式，几乎总能改进仅代码的答案。