我应该在 React/React Native 组件的啥地方放置一个函数？我看到三个选项

Posted 2023-02-23

【中文标题】我应该在 React/React Native 组件的啥地方放置一个函数？我看到三个选项

【英文标题】：Where inside a React/React Native component do I put a function? I see three options我应该在 React/React Native 组件的什么地方放置一个函数？我看到三个选项

【发布时间】：2020-07-07 18:17:29

【问题描述】：

我在下面添加了图片，以便您了解我在说什么。

对于一个 React 组件，我能够创建一个类并具有显示从这些函数返回的内容的函数。我看到一个组件的三个部分，我可以放置一个功能（参见图像中的红色框）。我对放置实际功能是否重要感到困惑。这三个函数都做同样的事情，但在不同的地方。 有人可以告诉我这是否重要，或者是否只是开发人员的偏好。 谢谢你。 C

如下图。

【参考方案1】：

组件外部：

对于不需要 this 组件的关键字并且只获取参数并执行一些代码并返回一些东西（如果你想要的话）的函数是合适的。如果你不需要访问this，那是写函数最方便的地方。

内部组件：

对于需要this关键字的函数来说是合适的。例如，如果您需要访问组件状态（this.state，this.setState()，...）和道具（this.props，...），这里是正确的地方。

组件内部的 render() 方法：

根据this，每次渲染都会创建render方法中的函数，这会对性能造成轻微影响。如果将它们放在渲染中也会很混乱，这是一个更大的原因，您不必滚动渲染中的代码来查看 html 输出。把它们放在课堂上是合适的。