Const vs Class Functions 是 React Native答案

【问题标题】：Const vs Class Functions is React NativeConst vs Class Functions 是 React Native
【发布时间】：2020-01-05 19:10:39
【问题描述】：

我最近一直在看一些关于 RN 的教程，我注意到其中一些在创建组件时不使用类，而是使用 const。下面的代码显示了该特定教程的应用程序的主屏幕。我的问题是：他们这样做而不使用课堂是否有原因？还有，有关系吗？您使用 const 代替 class 有什么特别的原因吗？

const HomeScreen = ({ navigation }) => {
    return (
      <View>
        <Text style={styles.textStyle}>This is the Home Screen</Text>
        <Button title="Go to Components Demo"
          onPress={() => navigation.navigate('Components')}
        />
        <Button title="Go to list demo"
          onPress={() => navigation.navigate('List')}
        />
        <Button title="Go to Image Screen"
        onPress={() => navigation.navigate('Image')}
        ></Button>
        <Button title="Go to Counter"
        onPress={() => navigation.navigate('Counter')}
        ></Button>
        <Button title="Colors"
        onPress={() => navigation.navigate('Color')}
        ></Button>
        <Button title="Squares"
        onPress={() => navigation.navigate('Square')}
        ></Button>
      </View>
    );
  };


const styles = StyleSheet.create({
  textStyle: {
    fontSize: 30,
    textAlign: "center"
  },
});

export default HomeScreen;

【问题讨论】：

标签： react-native

【解决方案1】：

如果你不使用 state，你应该使用 const，它被称为无状态函数。这是关于性能。如果你使用状态，你必须使用类。（react 的早期版本）如果你升级 react-native 并使用钩子，它会有所不同。

我认为您应该检查this article 关于类与无状态函数的信息。

【讨论】：

【解决方案2】：

您发布的示例是stateless function component。它只是一个被分配给变量const HomeScreen = 的JavaScript arrow function。你也可以把它写成一个标准的匿名函数：

// the props you give to <HomeScreen/> get passed as parameter to the function
// by React. You can destructure them right in place, like with ({navigation}).

const HomeScreen = function({ navigation }) {
   ...
   return (...)
}

无状态函数组件没有状态。如果您不需要状态和生命周期方法等，可以使用它们。此外，可以使用钩子将它们转换为 stateFUL 函数组件。

钩子是预定义的函数，可以在函数组件中使用，以通过状态、生命周期管理等来增强它。但这是一个更广泛的主题。

没有钩子你可以使用无状态组件而不是类组件来保持你的代码小（函数而不是类，没有这个，没有渲染函数，只需返回，通过导入函数并在组件内部使用更容易重用代码）

为了提高性能，您需要再次使用钩子（例如 useMemo() 钩子）。习惯钩子的概念需要一些时间，但这是值得的。我现在更喜欢它们而不是类组件，主要是因为代码更干净。

【讨论】：

【解决方案3】：

这取决于你的 React 版本和使用状态。

有一个简单的技巧，（如果你的反应版本高于 16.8.0）选择你想要的。

如果没有并且您的组件没有使用状态，您可以使用函数式组件而不是基于类的组件。不会有什么不同。

【讨论】：