web-dev-qa-db-ja.com

Reactでフックと関数をバインドするにはどうすればよいですか？

基本的に、コンストラクターでイベントハンドラー関数をバインドするか、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で導入された後、クラスコンポーネントは状態を持つ機能コンポーネントになりました。

では、機能コンポーネントのフックを使用して関数をバインドするにはどうすればよいですか？

javascriptreactjsreact-nativereact-hooks
8
Hemadri Dasari

関数にはthisがないため、機能コンポーネントに関数/コールバックをバインドする必要はありません。クラスでは、thisをバインドすることが重要でした。これは、コールバック内のthisがコンポーネントのインスタンス自体を参照するようにするためです。ただし、コンストラクタで_.bind_を実行すると、コンポーネントのライフサイクル全体で関数onceを作成する別の便利なプロパティがあり、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>;
}
_
21
Yangshun Tay