无法在React.memo中使用React.memo

Question

我想在react本机中使用React.memo进行优化。

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 :未定义不是一个函数(计算render(nextProps))。此错误位于: in Demo(at renderApplication.js:34) in RCTView(at View.js:44 )

我们可以使用React.memo来反应本机吗？

Answer 1

你想要回忆录的“组件”不是一个正确的反应组件，它没有被传递任何道具。react memo HOC也只适用于功能组件，对基于类的组件使用PureComponent。

您需要确保您正在使用引入memo自定义的are的当前版本，并按如下方式使用：

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!

反应备忘录

Answer 2

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

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

export default React.memo(MyFunctionComponent);