众所周知，this.someFunction = this.someFunction.bind(this)可以在 React 类组件中使用。但是，有时为非常简单的组件创建类会很麻烦。那么，如何在不创建类的情况下将函数绑定到this呢？
使用箭头函数 箭头函数
在 React 16.8 中，你可以对有状态组件使用钩子，本质上允许你将所有内容编写为函数，并且无需使用类和它们附带的所有警告(this、.bind()等)。
使用示例
下面是在函数中使用useState()钩子和useEffect()钩子的示例，以及已绑定到组件上下文的箭头函数：
import React, { useState, useEffect } from 'react';
function LimitedTextarea({ rows, cols, value, limit }) {
const [content, setContent] = useState(value);
const setFormattedContent = text => {
text.length > limit ? setContent(text.slice(0, limit)) : setContent(text);
};
useEffect(() => {
setFormattedContent(content);
}, []);
return (
<div>
<textarea
rows={rows}
cols={cols}
onChange={event => setFormattedContent(event.target.value)}
value={content}
/>
<p>
{content.length}/{limit}
</p>
</div>
);
}
简短解释
- 您可以使用
useState()创建状态变量content和更新该变量的方法setContent()。 - 创建一个箭头函数
setFormattedContent通过已绑定到上下文的setContent方法更新content状态变量。 - 您可以使用
useEffect()对content状态变量的值调用setFormattedContent。 - 最后，在类组件中返回
render()方法中的任何内容。
this类组件中有意义，因为它引用了组件实例。它在功能组件中没有意义，因为它要么是undefined的，要么是全局的，具体取决于环境和函数的声明方式。
至于类组件，如果不需要显式构造函数，可以省略显式构造函数，类字段可用于分配实例属性，包括绑定方法：
class Foo extends Component {
foo = this.foo.bind(this);
foo() { ... }
...
}
这是句法糖，用于：
class Foo extends Component {
constructor(props) {
super(props);
this.foo = this.foo.bind(this);
}
foo() { ... }
...
}
绑定原型方法与实例箭头方法相比有几个优点。
是的，箭头函数是解决方案。
与此绑定，
this.someFunction = this.someFunction.bind(this)
使用箭头函数，
someFunction = () => {
// do something
}
如果使用箭头函数，则无需绑定"this"。它具有简单而干净的语法。
someFuncton = () => {
// whatever write here...
}