4

私の React アプリでは、いくつかのライブラリ (Material UI と React Intl など) を使用して、React 要素を小道具として高レベル コンポーネントから「ダム コンポーネント」に渡しています。

スマート コンポーネント:

import ActionExplore from 'material-ui/svg-icons/action/explore';
import { FormattedMessage } from 'react-intl';

export class SmartComponent extends Component {
  render() {
    return (
      <div>
        <DumbComponent
          text={<FormattedMessage id="en.dumbComponent.text" />}
          icon={<ActionExplore/>}
        />
        <AnotherDumbComponent {props.that.are.changing} />
      </div>
    );
  }
}

ダムコンポーネント:

import shallowCompare from 'react-addons-shallow-compare';

export class DumbComponent extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  }

  render() {
    return (
      <div>
        <h1>{this.props.text}</h1>
        {this.props.icon}
      </div>
    );
  }
}

これを行う利点は、DumbComponent がアプリケーション ロジック (マテリアル UI、国際化など) について何も知る必要がないことです。SmartComponent がすべてのビジネス ロジックを処理するようにして、単純にレンダリングします。

このアプローチで私が直面しているマイナス面はパフォーマンスです.DumbComponent は常に を返すため、AnotherDumbComponent の props が独自のものではなく変更された場合でも、常に再レンダリングされます。上記の例では、React 要素間の正確な等価性チェックを行うことができません。shouldComponentUpdate trueshouldComponentUpdate

React 要素をどのように等価性チェックすることができますshouldComponentUpdateか? これは実行するにはコストがかかりすぎますか? React要素を小道具としてダムコンポーネントに渡すのは悪い考えですか? React 要素を props として渡さずに、コンポーネントをダムのままにすることは可能ですか? ありがとう！

4

2 に答える 2

0

パフォーマンスが高いかどうかは、ユースケースによって異なります。経験則として、この種のロジックは、ユーザー入力がピアではなく「ダムコンポーネント」の子にのみ影響を与えると予想される場合に最適に使用されると思います。

例として、Material-UI のダイアログは、アクション ボタンとタイトルについて提案したものとほぼ同じ構造をしています。( https://github.com/callemall/material-ui/blob/master/src/Dialog/Dialog.js#L292 )。ただし、これらの要素はモーダル上にあり、開いたり閉じたりしない限り、それ自体は変更されないため、その場合はうまく機能します。

別の潜在的な回避策として、要素全体を渡すのではなく、子要素を作成するために必要なオブジェクトを渡した場合はどうなるでしょうか? 私はこれを試していないので、うまくいくかどうかはわかりませんが、試してみる価値はあります。程度の何か;

<DumbComponent 
    textComponent={FormattedMessage} 
    textProps={{id: "en.dumbComponent.text"}}/>

//In DumbComponent;

render(){
    return (
        <div>
            <h1>
                <this.props.textComponent {...this.props.textProps}/>
            </h1>

        </div>
    );
}

更新する必要があるかどうかを判断する際に、いくつかの具体的な操作を行うことができます。

于 2016-06-06T20:25:26.897 に答える
-1

これらのプレーンな React 要素を Immutable.js マップに変換し、代わりにそれらを props として渡すことで、これを解決しました。

この記事は非常に役に立ちました: https://www.toptal.com/react/react-redux-and-immutablejs

Immutable.js を使用すると、JavaScript オブジェクト/配列の変更を、非効率な詳細な等価性チェックに頼ることなく検出できます。これにより、React は、必要のないときに高価な再レンダリング操作を回避できます。

于 2016-06-07T16:59:37.740 に答える