我知道箭头函数通过不在每次引用时重新创建函数来提高效率
这不是真的。
箭头函数this以词法方式处理上下文，“普通”函数动态处理。如果您需要有关它的更多信息，我会深入介绍这个关键字。
在您的两个内联箭头函数示例中，您都在每个render.
这将在每个渲染上创建并传递一个新实例
onClick={() => {}}
在第三个示例中，您只有一个实例。
这仅传递对已存在实例的引用
onClick={this.myHandler}
至于箭头函数作为类字段的好处（有一个小的缺点，我会将其发布在答案的底部），如果您有一个需要访问classvia当前实例的普通函数处理程序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从父组件中获取 the和as props。
然后子组件将调用它从父组件获取的处理程序并将其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>
类字段的缺点：
正如我所提到的，类字段有一个小的缺点。
一个类的方法和一类字段之间的区别是，类字段被附接到instance所述的class（构造函数）。
其中类方法和对象附加到原型。
因此，如果您将拥有大量此类的实例，则可能会导致性能下降。
鉴于此代码块：
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;
}();