时间戳

首页 > 解决方案 > RN perf 问题：尽早绑定，不要在渲染中创建函数

javascript - RN perf 问题：尽早绑定，不要在渲染中创建函数

问题描述

我是 react-native 和一般反应的新手，我在这里阅读这篇文章时偶然发现了这一点：

避免在渲染中执行此操作。

<Text onPress={ () => this.doWork() }>Do Some Work</Text>

另外，避免这种情况。

<Text onPress={ this.doWork.bind(this) }>Do Some Work</Text>

因为render经常被调用，而且每次做上面两件事的时候，都会创建一个新的函数，不推荐这样。如果您想将参数传递给 doWork 函数，请创建一个子组件并将该函数作为道具传递，简单。

我使用的是功能组件而不是类，但第一个示例几乎是我处理 onPress 函数的方式，这很糟糕吗？在我的组件中，我会在返回的视图中看到类似的内容：

<Text onPress={ () => doWork() }>Do Some Work</Text>

在我的逻辑中：

const doWork = () => { //do stuff}

这是正确的方法吗？如果不是，那么以高性能方式定义功能和处理按钮按下的正确方法是什么。

我之前也尝试过这种方式，但是由于某种原因，该功能会触发很多次，有人可以解释为什么吗？

<Text onPress={ doWork() }>Do Some Work</Text>

标签： javascriptreactjsreact-native

解决方案

渲染时react，您创建一个新函数并在其中调用处理程序。没用的。此外，在此示例中，您不需要将参数传递给处理程序。

因此，使用onPress = {() => doWork ()}. 改用就好onPress = {doWork}了。

这是正确的方法吗？如果不是，那么以高性能方式定义功能和处理按钮按下的正确方法是什么。

是的，您正确定义了处理程序，您只需要修复它的用法。

在这个例子中，onPress = {doWork ()}你立即调用了这个函数，这会导致每次渲染组件时都会调用它，你不应该那样做。

因此，以这种方式声明处理程序：

const doWork = () => { 
  //do stuff 
}

并像这样使用它：

<Text onPress={doWork}>Do Some Work</Text>

如果您需要将参数传递给处理程序，则有 3 个选项：

选项 1 - 创建匿名函数

<Text onPress = {() => doWork(payload)}>Do Some Work</Text>

选项 2 - 使用绑定

<Text onPress = {doWork.bind(this, payload)}>Do Some Work</Text>

选项 3 - 使用数据属性

限制：

  1. 不适用于 React Native
  2. 您只需将 DOM 传递给元素，它不适用于组件
const handleClick = (e) => {
  // e.target.dataset.payload <= "payload"
}

...
<button data-payload="payload" onClick={doWork}>Do Some Work</button>

如果你想了解 React 中公认的命名处理程序的约定，你可以阅读这篇文章。

推荐阅读