我知道箭头函数可以让事情变得更有效率
每次引用函数时重新创建函数
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>
更好的方法是创建组件组合。
您可以创建一个包装相关标记的子组件，将拥有它自己的处理程序，并将 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（构造函数）的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;
}();