将参数传递给 javascript 函数而不在 jsx 中使用内联函数

Question

所以在阅读了几篇关于 React Native 性能的文章后，我意识到你应该避免在 JSX 中使用箭头函数。 https://blog.codemagic.io/improve-react-native-app-performance/#avoid-arrow-functions

但我有以下反应本机代码

function Layout() {

    function handlePress(index) {
        console.log("Inside HandlePress", index)
        // I want index here
    }

    function NavItemIterable(item, index) {
        return(
            // how to pass index without arrow functions
            <Pressable key={index} onPress={handlePress}>
                <NavItem />
            </Pressable>
            )
    }

    return(
        <Box>
            {data.map(NavItemIterable)}
        </Box>
        )
}

有了箭头函数，我可以做类似的事情 <Pressable key={index} onPress={()=> handlePress(index)}>.

在这种情况下如何避免使用箭头函数并且仍然使用 index 调用 handlePress。（或者我应该尽量避免）

Answer 1

That blog post you have mentioned 至少具有误导性，并且没有提供足够的上下文来理解它的语句（例如，为什么在这种情况下您甚至会使用嵌套函数）。

您的示例（功能组件）与该博客 post 中的示例（class 组件）根本不同。

在您的示例中，可以使用函数 将参数“传递”给处理程序。这通常符合常见的 React 原则，如果您使用箭头函数 (const f = () => {};) 或 classic 函数 (const f = function(){};)。（仍然可以进行优化。）

博客 post 说的和没说的...

博客 post 指出您应该 “避免使用箭头函数”，并给出了一个示例。

在那个例子中使用 classic 和箭头函数之间的区别，但这不是实际问题，博客 post 根本没有说明为什么要在那里使用额外的函数（无论 classic 还是箭头函数）？

class MyClass extends React.Component {
  addTodo() {}
  render() {
    return <>
      <MyComponent onClick={ () => this.addTodo()         /* <-- Why would you even do this ? ...   */ } />
      <MyComponent onClick={ function(){ this.addTodo() } /* <-- ... even with a classic function ? */ } />
      <MyComponent onClick={ this.addTodo } />            /* <-- Recommended. */
    </>;
  }
}

当然，如果没有理由添加它，您应该避免使用该额外功能。

博客 post 大概是什么意思...

使用额外函数的一个常见原因是捕获 class 的 this 上下文。的确，这里你需要使用箭头函数。

在这个例子中，只有箭头函数可以工作 （和备选方案），因为它捕获了 this组件的上下文：

class MyClass extends React.Component {
  myValue = 'some value';
  addTodo(){
    try { console.log( 'ok, value is:', this.myValue ); }
    catch(_){
      console.error( 'error: `this` is:', this );
    }
  }
  render() {
    const capturedThis = this;
    return <>
      <button onClick={ () => this.addTodo()          } > arrow: works. </button>
      <button onClick={ this.addTodo                  } > no extra function: error. </button>
      <button onClick={ function(){ this.addTodo(); } } > classic function: worse error! </button>
      <button onClick={ function(){ capturedThis.addTodo(); } } > classic alternative: works. </button>
    </>;
  }
}

博客post错过了什么...

捕获的 this 上下文（“闭包”）可能会导致问题。这可能就是博客 post 建议避免使用它的原因。

但实际的建议不应该是“避免箭头函数”，而是避免在闭包中捕获this上下文（通常使用箭头函数来完成）。

一个解决方案是将方法绑定到组件:

class MyClass extends React.Component {
    constructor(props){
        super(props);
        this.addTodo = this.addTodo.bind(this); // <-- bind method to the components `this`
    }
    myValue = 'some value';
    addTodo(){
        console.log( 'ok, value is:', this.myValue );
    }
    render() {
        return <>
            <button onClick={ this.addTodo } > works without arrow function </button>
        </>;
    }
}

备注：

我建议您忘记您曾经阅读过该博客中的误导性建议 post，并找到更好的知识来源。

我认为闭包、.bind(this) 模式和优化功能组件超出了这个问题主题的范围。

如果您仍然想优化与该博客无关的功能组件post，那么我认为您应该提出一个新问题。

将参数传递给 javascript 函数而不在 jsx 中使用内联函数

pass parameters to a javascript function without using an inline function inside jsx

javascript

reactjs

react-native

博客 post 说的和没说的...

博客 post 大概是什么意思...

博客post错过了什么...

备注：