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具有另一个有用的属性，即在组件的整个生命周期中一次创建函数，并且不会在{{1}的每次调用中创建新的回调}。要只使用React钩子初始化一次回调，可以使用render()。

类

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>;
  }
}

Answer 2

您最好像这样编写上面的组件Foo，并节省一些键入时间。注意handleClick周围的语法...它将闭包handleClick定义为Foo上的字段，而不是方法。这样就无需使用绑定来覆盖构造函数中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>
  }
}

如何在React中使用钩子绑定函数？

2 个答案:

类

挂钩