基本的に、コンストラクターでイベントハンドラー関数をバインドするか、以下のように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でフックが導入された後、クラスコンポーネントは状態のある機能コンポーネントになりました。
では、関数コンポーネントのフックで関数をバインドするにはどうすればよいですか？
関数にはないので、関数コンポーネントに関数/コールバックをバインドする必要はありませんthis。クラスでは、コールバック内のがコンポーネントのインスタンス自体を参照してthisいることを確認する必要があるため、バインドすることが重要thisでした。ただし、.bindコンストラクターで実行することには、コンポーネントのライフサイクル全体で1回関数を作成するという別の便利なプロパティがあり、のすべての呼び出しで新しいコールバックが作成されるわけではありませんrender()。Reactフックを使用してコールバックを1回だけ初期化するには、を使用します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>;
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加