使用箭头函数箭头函数

在16.8作出react，你可以使用钩子有状态的组件，基本上让你写的一切作为函数和无需使用的类和所有来与他们的告诫（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来content通过setContent已经绑定到上下文的方法更新状态变量。
• 你useEffect()用来调用状态变量setFormattedContent的值content。
• 最后，您返回您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
}