如何在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，看看是否有必要。如果您不确定是否需要它，那么您可能不需要。为了确保它对你有好处，请对其进行分析。