Question

我正在使用ReactJS与Babel和Webpack一起使用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？

Answer 1

据我所知，箭头功能可以提高效率每次引用时都重新创建函数

This is not true。

箭头函数以词法方式处理this上下文，其中＆＃34; normal＆＃34;功能做dynamically。

在内联箭头功能的两个示例中，您将在每个render上创建一个新的函数实例。
这将在每个渲染

上创建并传递一个新实例

onClick={() => {}}

在第3个示例中，您只有一个实例这仅传递对已存在的实例的引用

onClick={this.myHandler}

<小时/> 至于箭头函数作为类字段的好处（有一个小的下边，我会将它发布在答案的底部），如果你有一个需要访问当前的普通函数处理程序class来自this的实例：

myHandler(){
  //  this.setState(...)
}

您需要明确bind class 最常见的方法是在constructor中执行此操作，因为它只运行一次：

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

如果您使用箭头函数作为处理程序，则不需要bind它到class，因为如上所述，箭头函数使用{{1}的词汇上下文1}}：

this

使用这两种方法，您将使用这样的处理程序：

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

采用这种方法的主要原因是：

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

是否要将参数传递给传递的本地<div onClick={() => this.myHandler(someParameter)}></div>旁边的处理程序，这意味着您希望向上传递参数。

如上所述，这将在每个渲染上创建一个新的函数实例（有一个更好的方法，继续阅读）。

针对此类用例运行示例：

＆＃13;

event

＆＃13;

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'));

＆＃13;

更好的方法是创建组件组合您可以创建一个包含相关标记的子组件，将其拥有自己的处理程序，并将<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>和data作为父级的道具。

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

使用子组件运行示例：

＆＃13;

data

＆＃13;

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'));

＆＃13;

类字段下方 ：
正如我所提到的，课堂领域有一个小小的缺点类方法和类字段之间的区别在于，类字段附加到<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>（构造函数）的instance。
类方法和对象附加到原型的位置。

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

鉴于此代码块：

class

巴贝尔会将其转化为：

class MyClass {
  myMethod(){}  
  myOtherMethod = () => {}
}

Answer 2

据我所知，箭头功能可以提高效率重新创建每个渲染的函数类似于如何绑定构造函数。

事实并非如此。这取决于您使用Arrow功能的确切位置。如果在render方法中使用了Arrow function，那么它们会创建一个新的实例everytime，就像bind的工作方式一样。考虑这个例子

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

这里每次渲染时都会调用一个匿名函数，并在调用时调用该函数，调用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} />
    )
}

现在在其子级中，即使您使用任何自定义上下文调用prevItem，using bind or arrow function，prevItem在父级Main.js执行时也会获得其封闭的上下文反应组件。因为你只想执行prevItem函数而不想从孩子那里传递任何数据，所以写

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

和

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

简单无用，只会增加性能含义，因为每次都会在SecondClass和ThirdClass中创建新功能。您根本不需要将这些函数定义为箭头函数，只需编写

即可

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

和

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

因为它已经在父母中绑定了。

现在即使你必须从ThirdClass和SecondClass向这些函数传递一些额外的数据，你也不应该直接使用Arrow function或bind in render。在How to Avoid binding in Render method

上查看此答案

Answer 3

所以你的第一个方法

<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特定参数。

两个apporaches都是正确的，它只是，它取决于你的用途案件。使用es6箭头功能的两种方法都在上面提到的各自的情景

Answer 4

使用JavaScript curring函数声明，可以是其他答案的另一种方式，请注意以下代码：

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

现在在JSX中，您可以编写：

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

带有clickHandler的{{1}}返回带有someData自变量的函数，但未在e函数内部使用。所以效果很好。

要写得更完整，请写如下：

clickHandler

不需要clickHandler = someData => () => this.setState({ stateKey: someData });，所以我应该写它。

Answer 5

在原始函数定义中使用箭头允许您不要在构造函数中绑定函数。

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

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

然后你必须创建一个绑定它的构造函数...

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

  prevItem() { ... }
}

当你开始使用时，使用箭头会更容易，因为它只是有效，你不必了解构造函数是什么，并深入研究javascript中this的复杂性。

但是，性能方面，最好在构造函数中绑定。构造函数方法中的bind将创建函数的单个实例并重新使用它，即使多次调用render方法也是如此。

在React中正确使用箭头函数

5 个答案: