14

Reactを学んでいます。さまざまなサイトの一部の人は、refs を使用するのは悪い習慣だと皆に言います (そうです、まったく使用していません)。

それと本当の取引は何ですか？たとえば、子コンポーネントにアタッチするのは悪いことですか（内部のものにアクセスできるようにします）？

ありがとう！

4

2 に答える 2

3

うーん...答えとしての資格があるかどうかはわかりませんが、コメントには長すぎます。

システムのさまざまな状態を示すウィジェットを含むダッシュボードがあるとします。各ウィジェットには、独自のデータ ソースと独自のコントロールがあります。おそらく、それらは時々リフレッシュされることさえあります。ただし、ユーザーがシステムの更新されたビューを見たい場合は、ダッシュボード レベルに [更新] ボタンがあります。このようなボタンの実装は簡単ではありません。

Redux アプリケーションを使用している場合は、dispatch('refresh')すべての子に対して「偽造」するという選択肢があります。それを切り離すために、ロード時に各ウィジェットがアクションを登録するため、親は単純にすべてのアクションを実行し、命令型の更新が必要なときにそれらを起動します。

非 Redux/Flux システム、またはより複雑で動的なシナリオでは、これは不可能であるか、それほど単純ではない可能性があります。refreshその場合、すべてのウィジェットでメソッドを公開し、親 (または、所有者) からアクセスする方が、複雑さを考慮してより適切な場合があります。

class WidgetA extends React.Component {
    refresh() {
        console.log('WidgetA refreshed');
    }

    render() {
      return (
        <h3>WidgetA</h3>
      );
    }
}  

class WidgetB extends React.Component {
    refresh() {
        console.log('WidgetB refreshed');
    }

    render() {
      return (
        <h3>WidgetB</h3>
      );
    }
}  

class Dashboard extends React.Component {
    constructor() {
        super();

        this.onRefresh = this.handleRefresh.bind(this);
        this.onRegister = this.handleRegister.bind(this);
        this.widgets = [];
    }

    handleRegister(widget) {
        this.widgets.push(widget);
    }

    handleRefresh() {
        this.widgets.forEach((widget) => {
            widget.refresh();
        });
    }

    render() {
        return (
            <div>
                <button onClick={this.onRefresh}>Refresh</button>
                <hr />
                <WidgetA ref={this.onRegister} />
                <WidgetB ref={this.onRegister} />
            </div>
        );
    }
}

もちろん、冗長性を抑えた、そのようなものです。

補足として、私は@skavの回答に賛成票を投じ、これらのシナリオは避けるべきだと考えています。これは例外です。

CodePen の例

于 2016-11-13T08:53:40.140 に答える