渡された小道具に基づいてwithPropsOnChange
、新しいデバウンスされた関数を作成するために使用したいと思います。小道具が変更された場合、新しい関数を作成する必要があります。再構成が提供しないコールバックの内部にアクセスする必要があることを除いwithPropsOnChange
て、これには完璧に思えます。this.state
createProps
代替手段は何ですか?つまり、他のいくつかのプロパティに依存/依存し、それらの小道具が更新されると自動的に更新されるプロパティ (React またはバニラ) を作成するにはどうすればよいですか?
これが私が今持っているものの要点です:
class MyClass extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
isOpen: false,
isLoading: 0,
isWaiting: false,
searchQuery: '',
options: [],
value: undefined,
highlightedValue: undefined,
scrollPos: 0,
};
if(props.options) {
this.loadOptions = Lo.debounce(searchQuery => {
this.setState(state => ({
isLoading: state.isLoading + 1,
}));
props.options(searchQuery).then(result => {
this.setState(state => ({
isLoading: state.isLoading - 1,
options: result.options,
}));
});
}, props.delay);
}
}
}
ご覧のとおり、私は という名前のプロパティを定義していますが、this.loadOptions
これは のデバウンスされたコピーでありprops.options
、何らかの状態処理が行われています。
これは今のところ適切に機能しますが、アップストリームがprops.options
orprops.delay
を変更した場合、コンストラクターでのみこれを行っているため、更新されthis.loadOptions
ません。
でこれをすべてやり直すことができますが、実際には または のいずれかが更新されcomponentWillUpdate
た場合にのみ実行したいのです。props.options
props.delay
この種のことに対処するためのよりクリーンなデザインパターンを探しています。考えてみると、基本的には「計算されたプロパティ」にすぎません(ただし、必要に応じて「再計算」することはできません。これらのプロパティが変更されない限り、毎回同じインスタンスが必要です)。