1

渡された小道具に基づいてwithPropsOnChange、新しいデバウンスされた関数を作成するために使用したいと思います。小道具が変更された場合、新しい関数を作成する必要があります。再構成が提供しないコールバックの内部にアクセスする必要があることを除いwithPropsOnChangeて、これには完璧に思えます。this.statecreateProps

代替手段は何ですか?つまり、他のいくつかのプロパティに依存/依存し、それらの小道具が更新されると自動的に更新されるプロパティ (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.optionsorprops.delayを変更した場合、コンストラクターでのみこれを行っているため、更新されthis.loadOptions ません。

でこれをすべてやり直すことができますが、実際には または のいずれかが更新されcomponentWillUpdateた場合にのみ実行したいのです。props.optionsprops.delay

この種のことに対処するためのよりクリーンなデザインパターンを探しています。考えてみると、基本的には「計算されたプロパティ」にすぎません(ただし、必要に応じて「再計算」することはできません。これらのプロパティが変更されない限り、毎回同じインスタンスが必要です)。

4

1 に答える 1