我知道箭头函数通过避免每次引用时重新创建函数，使事情更有效率。但
这不是真的。箭头函数以词法方式处理
this上下文，而“普通”函数则
动态地处理它。如果您需要更多信息，请查看我详细介绍
this关键字的文章。
在这里。
在您提到的内联箭头函数示例中，每次
render都会创建一个新的函数实例。这将在每个渲染过程中创建并传递一个新的实例。
onClick={() => {}}
在第三个例子中，您只有一个实例。
这只传递到已经存在的实例的引用。
onClick={this.myHandler}
关于将箭头函数作为类属性的好处（有一个
小缺点，我会在回答底部发布它），如果您有一个需要通过
this访问当前
class实例的普通函数处理程序：
myHandler(){
}
您需要将其显式地绑定到类。
最常见的方法是在constructor中执行，因为它仅运行一次：
您需要将其显式地绑定到类。
最常见的方法是在constructor中执行，因为它仅运行一次：
constructor(props){
super(props);
this.myHandler = this.myHandler.bind(this);
}
如果您将箭头函数用作处理程序，那么您不需要将它绑定到类上，因为如上所述，箭头函数使用词法上下文来确定 this:
如果您将箭头函数用作处理程序，则无需将其绑定到类上，因为如上所述，箭头函数使用词法上下文来确定 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>
更好的方法是创建组件组合。
您可以创建一个子组件来包装相关的标记，它将拥有自己的处理程序，并从父组件中作为props获取data和handler。
然后，子组件将调用从父组件获取的处理程序，并将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 Fields the down-side:
正如我所提到的，类字段存在一些小的缺点。
类方法和类字段之间的区别在于，类字段附加到类（构造函数）的实例上，而类方法和对象则附加到原型上。
因此，如果您将有非常大量的此类实例，则可能会导致性能下降。
给定这段代码块：
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;
}();
prevItem中没有对this的引用，因此您可以使用它。但是，如果您添加作用域级别的代码，它将会失效。因为您正在从一个对象中分配并调用函数，所以它将失去其上下文。onClick={this.props.prevItem}- Rajesh