时间戳

首页 > 解决方案 > React/JSX 方法定义的优缺点

reactjs - React/JSX 方法定义的优缺点

问题描述

我想了解以下之间的真正区别：

<MyComponent myProp = { ()=> this.myMethod } 
// and
<MyComponent myProp = { this.myMethod }

是否适合使用：

<MyComponent myProp = { () => this.myMethod() } 
// or 
<MyComponent myProp = { this.myMethod() }

为什么bind()有时会在没有this参数的情况下调用函数，如下例所示： 

<MyComponent myProp = { () => this.myMethod.bind () }  
// and 
<MyComponent myProp = { this.myMethod.bind(this) }

以下两种定义方法的优点是什么：

myMethod = (event) => {}
// and  
myMethod(event){}

标签： reactjs

解决方案

我想了解以下之间的真正区别：

<MyComponent myProp = { () => this.myMethod } 
// and
<MyComponent myProp = { this.myMethod }

答：第一个函数声明将方法绑定到this它所在组件的范围 ( )。第二个声明不一定，而是依赖于您在定义方法的地方执行此操作（请参阅下面的定义方法问题中的更多内容）。

问：是否适合使用：

<MyComponent myProp = { () => this.myMethod() } 
// or 
<MyComponent myProp = { this.myMethod() }

A：我想不出什么时候适合使用这两种语法中的任何一种。这种格式会导致每次渲染 jsx 时都会运行该方法（很多）！

问：为什么bind()有时调用函数时不带this参数，如下例： 

<MyComponent myProp = { () => this.myMethod.bind() }  
// and 
<MyComponent myProp = { this.myMethod.bind(this) }

A：我不认为顶级语法是有效的。底部语法等效于使用 lambda <MyComponent myProp = () => {}，因为它们都将函数的范围绑定到包含此 jsx 的组件的范围。

Q：下面两种定义方法的优点是什么：

myMethod = (event) => {}
// and  
myMethod(event){}

答：第一个方法声明将方法绑定到它所属的组件的范围。第二种方法没有，因此如果将其传递给子组件，它将采用子组件的作用域（this）。

高度评价：我的偏好显示在此示例中：

class MyComponent extends React.Component<> {
  // Here we define the method and bind it to this component's scope
  myMethod = () => {}

  render() {
    return (
      // Now add the method as a prop
      <MyComponent myProp = {this.myMethod}>
    );
  }
}

推荐阅读