在 React 中正确使用箭头函数

Posted

技术标签:

【中文标题】在 React 中正确使用箭头函数【英文标题】:Correct use of arrow functions in React 【发布时间】:2018-07-19 20:30:30 【问题描述】:

我正在使用带有 Babel 和 Webpack 的 ReactJS,并使用 ES6 以及 proposed class fields 来实现箭头功能。我知道箭头函数通过not recreating the functions each render 使事情变得更高效,类似于构造函数中的绑定工作方式。但是,我不能 100% 确定我是否正确使用它们。以下是我在三个不同文件中的代码的简化部分。

我的代码:

Main.js

prevItem = () => 
    console.log("Div is clicked")


render()
    return (
         <SecondClass prevItem=this.prevItem />
    )

SecondClass.js

<ThirdClass type="prev" onClick=()=>this.props.prevItem() />

ThirdClass.js

<div onClick=()=>this.props.onClick()>Previous</div>

问题:

我上面的代码是否正确使用了箭头函数?我注意到对于 SecondClass.js,我也可以使用:

<ThirdClass type="prev" onClick=this.props.prevItem />

由于我在原始函数定义中使用了 ES6 箭头函数,因此一种方法或另一种方法有区别吗?或者我应该一直使用箭头语法直到我的最后一个 div?

【问题讨论】:

developer.mozilla.org/en-US/docs/Web/javascript/Reference/… 这里有更多细节.. onClick=this.props.prevItem 这里因为prevItem中没有引用this,所以你可以使用它。但是,如果您添加范围级别的代码,它将中断。由于您从一个对象分配一个函数并调用它,它失去了它的上下文。 仅供参考,类字段不是 ES6 的一部分 How to use arrow functions (public class fields) as class methods?的可能重复 【参考方案1】:

我知道箭头函数可以让事情变得更有效率 每次引用函数时重新创建函数

This is not true。

箭头函数以词法方式处理this 上下文,其中“普通”函数处理dynamically。如果您需要更多信息,我写了关于 the this key word in depth 的文章。

在您的两个内联箭头函数示例中,您将在每个 render 上创建一个新函数实例。 这将在每次渲染时创建并传递一个新实例

onClick=() => 

在第三个示例中,您只有一个实例。 这只会传递对已经存在的实例的引用

onClick=this.myHandler


至于箭头函数作为类字段的好处(有一个小的缺点,我会在答案的底部发布),如果您有一个需要访问当前的普通函数处理程序class 通过this 的实例:
myHandler()
  //  this.setState(...)

您需要将 bind 显式显示为 class。 最常见的方法是在constructor 中执行此操作,因为它只运行一次:

constructor(props)
  super(props);
  this.myHandler = this.myHandler.bind(this);

如果您使用箭头函数作为处理程序,则不需要将bind 传递给class,因为如上所述,箭头函数使用this 的词法上下文:

myHandler = () => 
  //  this.setState(...)

通过这两种方法,您将像这样使用处理程序:

<div onClick=this.myHandler></div> 

采用这种方式的主要原因:

<div onClick=() => this.myHandler(someParameter)></div>

如果你想将参数传递给被传递的原生event 旁边的处理程序,这意味着你想向上传递一个参数。

如前所述,这将在每次渲染时创建一个新的函数实例。 (对此有更好的方法,请继续阅读)。

此类用例的运行示例:

class App extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      items: [ name: 'item 1', active: false ,  name: 'item 2', active: true ],
    
  
  toggleITem = (itemName) => 
    this.setState(prev => 
      const nextState = prev.items.map(item => 
        if (item.name !== itemName) return item;
        return 
          ...item,
          active: !item.active
        
      );
      return  items: nextState ;
    );
  
  render() 
    const  items  = this.state;
    return (
      <div>
        
          items.map(item => 
            const style =  color: item.active ? 'green' : 'red' ;
            return (
              <div
                onClick=() => this.toggleITem(item.name)
                style=style
              >
                item.name
              </div>
          
          ))
        
      </div>
    );
  


ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

更好的方法是创建组件组合。 您可以创建一个包装相关标记的子组件,将拥有它自己的处理程序,并将 datahandler 作为来自父级的道具。

然后子组件将调用它从父组件获得的处理程序并将data 作为参数传递。

带有子组件的运行示例:

class Item extends React.Component 
  onClick = () => 
    const  onClick, name  = this.props;
    onClick(name);
  
  render() 
    const  name, active  = this.props;
    const style =  color: active ? 'green' : 'red' ;
    return (<div style=style onClick=this.onClick>name</div>)
  


class App extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      items: [ name: 'item 1', active: false ,  name: 'item 2', active: true ],
    
  
  toggleITem = (itemName) => 
    this.setState(prev => 
      const nextState = prev.items.map(item => 
        if (item.name !== itemName) return item;
        return 
          ...item,
          active: !item.active
        
      );
      return  items: nextState ;
    );
  
  render() 
    const  items  = this.state;
    return (
      <div>
        
          items.map(item => 
            return <Item ...item onClick=this.toggleITem />
          )
        
      </div>
    );
  


ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

类字段向下: 正如我所提到的,类字段有一个小的缺点。 类方法和类字段的区别在于类字段附加到class(构造函数)的instance。 其中类方法和对象附加到原型。

因此,如果您有大量此类的实例,您可能会受到性能影响。

鉴于此代码块:

class MyClass 
  myMethod()  
  myOtherMethod = () => 

babel 会将其转换为:

var _createClass = function() 
  function defineProperties(target, props) 
    for (var i = 0; i < props.length; i++) 
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    
  
  return function(Constructor, protoProps, staticProps) 
    if (protoProps) defineProperties(Constructor.prototype, protoProps);
    if (staticProps) defineProperties(Constructor, staticProps);
    return Constructor;
  ;
();

function _classCallCheck(instance, Constructor) 
  if (!(instance instanceof Constructor)) 
    throw new TypeError("Cannot call a class as a function");
  


var MyClass = function() 
  function MyClass() 
    _classCallCheck(this, MyClass);

    this.myOtherMethod = function() ;
  

  _createClass(MyClass, [
    key: "myMethod",
    value: function myMethod() 
  ]);

  return MyClass;
();

【讨论】:

【参考方案2】:

使用JavaScriptcurring函数声明,可以和其他答案不同,注意以下代码:

clickHandler = someData => e => this.setState(
  stateKey: someData
);

现在JSX,你可以写:

<div onClick=this.clickHandler('someData') />

带有someDataclickHandler 返回一个带有e 参数的函数,但它不在clickHandler 函数内部使用。所以效果很好。

为了写得更完整,如下所示:

clickHandler = someData => () => this.setState(
  stateKey: someData
);

不用e,那我为什么要写呢。

【讨论】:

【参考方案3】:

我知道箭头函数可以让事情变得更有效率 重新创建每个呈现的函数类似于在 构造函数工作。

这不是真的。这取决于您使用箭头功能的确切位置。如果在 render 方法中使用了Arrow function,那么它们会创建一个新实例everytime,render 的调用方式与bind 的工作方式相同。考虑这个例子

<div onClick=()=>this.onClick()>Previous</div>

这里每次调用 render 时都会创建一个匿名函数,调用该函数时会调用 this.onClick

但是考虑下面的情况

onClick = () => 
    console.log("Div is clicked")

在上述情况下,箭头函数不会每次都重新创建函数,而是在类实例化时将上下文绑定到 React 组件An arrow function does not have its own this; the this value of the enclosing execution context is used.。这类似于binding works is constructor。这是proposed class fields for arrow functions 的一部分,不是 ES6 功能,

要理解你想问什么,你必须知道一个函数从它被调用的地方获取它的上下文。检查this question以获得更多了解。

在你的例子中,你使用了Arrow function 来定义prevItem,因此它获得了封闭的 React 组件的上下文。

prevItem = () => 
    console.log("Div is clicked")


render()
    return (
         <SecondClass prevItem=this.prevItem />
    )

现在在它的子组件中,即使您使用任何自定义上下文调用 prevItemusing bind or arrow functionprevItem 在父组件(即 Main.js)中执行时也会获得其封闭的 React 组件的上下文。而且由于您只想执行 prevItem 函数并且不想将任何数据从孩子传递给它,因此编写

<ThirdClass type="prev" onClick=()=>this.props.prevItem() />

<div onClick=()=>this.props.onClick()>Previous</div>

根本没用,只会增加性能影响,因为每次都会在 SecondClassThirdClass 中创建新函数。您根本不需要将这些函数定义为箭头函数,只需编写

<ThirdClass type="prev" onClick=this.props.prevItem />

<div onClick=this.props.onClick>Previous</div>

因为它已经绑定在父级中。

现在即使你必须从 ThirdClass 和 SecondClass 向这些函数传递一些额外的数据,你也不应该直接使用 Arrow functionbind in render。在How to Avoid binding in Render method上查看这个答案

【讨论】:

使用箭头函数本身还不错。在render 中使用箭头函数非常好,即使它们被重新创建。在大多数应用程序中,性能差异不会很明显。 @DivyanshuMaithani 上面的代码是否也适用于功能组件或仅适用于类组件,当使用功能组件 SecondClass.js 时,我们是否需要像下面一样再次绑定它 this.props.prevItem() /> ThirdClass.js this.props.onClick()>上一个 我的评论是关于性能问题。答案有点混乱,总之你应该只需要绑定一个类方法(在类组件中)。无需为功能组件绑定函数,因为您不会关心 this 的用法。【参考方案4】:

所以你的第一种方法

<ThirdClass type="prev" onClick=()=>this.props.prevItem() />

在此您可以将 ThirdClass 中可用的任何参数传递给 prevItem 函数。这是用参数调用父函数的好方法。像这样

<ThirdClass type="prev" onClick=()=>this.props.prevItem(firstArgument, secondArgument) />

你的第二种方法是

<ThirdClass type="prev" onClick=this.props.prevItem />

这种方法不允许您传递任何 ThirdClass 特定参数。

这两种方法都是对的,只是,这取决于你的使用 案子。两种使用 es6 箭头函数的方法都在上面提到的 各自的场景

【讨论】:

【参考方案5】:

在原始函数定义中使用箭头可以让您不绑定构造函数中的函数。

如果你没有使用箭头...

prevItem()
  console.log("Div is clicked")

然后你必须创建一个构造函数并在那里绑定它......

class MyComponent extends Component 
  constructor(props) 
    super(props)
    this.prevItem = this.prevItem.bind(this)
  

  prevItem()  ... 

刚开始时使用箭头会更容易,因为它可以正常工作,而且您不必了解构造函数是什么,也不必深入研究 javascript 中 this 的复杂性。

然而,在性能方面最好在构造函数中绑定。构造函数方法中的绑定将创建函数的单个实例并重复使用它,即使渲染方法被多次调用。

【讨论】:

用这种方法,有没有办法在调用prevItem时添加参数。例如:onpress=this.prevItem 但我想打电话给this.prevItem(variable)

以上是关于在 React 中正确使用箭头函数的主要内容,如果未能解决你的问题,请参考以下文章

使用 React 时,在构造函数中使用粗箭头函数还是绑定函数更可取?

[react] 在React中什么时候使用箭头函数更方便呢?

无法在 React 组件类中使用箭头函数 [重复]

为啥我能够使用 this.state 而无需绑定或使用箭头函数 React

react生命周期函数使用箭头函数,导致mobx-react问题

[转]为啥在 React 的 Render 中使用箭头函数和 bind 会造成问题