如何使用React中的挂钩绑定函数?

没有必要在功能组件中绑定函数/回调,因为没有 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>;
}

您不妨编写组件 Foo 这样可以节省一些打字时间。注意handleClick的语法。。。它将闭包handleClick定义为Foo上的字段,而不是方法。这样就不需要使用bind覆盖构造函数中对象的“handleClick”引用(另外,如果只是调用“super”,则不需要定义构造函数

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

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

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

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

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