如何在 React 中将函数与钩子绑定？

Question

基本上我们在构造函数中绑定事件处理函数，或者在 React 类组件中将它们作为箭头函数，如下所示

class Test extends Component{
  constructor(props){
    super(props);
    this.state = { count:0 };
    this.setCount = this.setCount.bind(this);
  }

  setCount() {
    this.setState({count: this.state.count + 1});
  }

  render() {
    return <button onClick={this.setCount}>Increase</button>
  }
}

但是在 React v16.7.0 中引入了钩子之后，类组件变成了有状态的函数式组件。

那么如何在函数组件中绑定函数和钩子呢？

Answer 1

没有必要在函数组件中绑定函数/回调，因为函数中没有this。在类中，绑定this 很重要，因为我们要确保回调中的this 引用组件的实例本身。但是，在构造函数中执行.bind 具有另一个有用的属性，即在组件的整个生命周期中创建函数一次，并且不会在每次调用render() 时创建新的回调。要使用 React 钩子只初始化一次回调，您可以使用 useCallback。

类

class Foo extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log('Click happened');
  }

  render() {
    return <Button onClick={this.handleClick}>Click Me</Button>;
  }
}

挂钩

function Foo() {
  const memoizedHandleClick = useCallback(
    () => {
      console.log('Click happened');
    },
    [], // Tells React to memoize regardless of arguments.
  );
  return <Button onClick={memoizedHandleClick}>Click Me</Button>;
}

Answer 2

人们来到 SO 并复制粘贴代码。把这个答案留在这里，这样 React 社区就不会错误地记住所有内容，并可能做不必要的工作。

功能组件

function Foo() {
  const handleClick = function(){
    // use function statements to avoid creating new instances on every render
    // when you use `bind` or arrow functions
    console.log('memoizing can lead to more work!')
  };
  return <Button onClick={handleClick}>Click Me</Button>;
}

提示：查看使用useCallback 时转译了哪些代码，看看是否有必要，然后再将其放入。如果您不确定是否需要它，则可能不需要。为了确保它对你有好处，请对其进行分析。

Answer 3

您不妨像这样编写上面的组件Foo 并节省一些打字时间。注意 handleClick 周围的语法...它将闭包 handleClick 定义为 Foo 上的一个字段，而不是一个方法。这消除了您在构造函数中使用 bind 覆盖 OBject 的“handleClick”引用的需要。 （另外，如果你只是调用'super'，你不需要定义构造函数！）

class Foo extends Component {
  handleClick = () => {
    console.log('Click happened');
  }

  render() {
    return <Button onClick={this.handleClick}>Click Me</Button>;
  }
}

同样，对于您的原始示例，只需直接声明 state 和 setCount 并简化您的代码：

class Test extends Component{
  state = {count: 0}

  setCount = () => {
    this.setState({count: this.state.count + 1});
  }

  render() {
    return <button onClick={this.setCount}>Increase</button>
  }
}