0

React アプリのルート コンポーネントには、次のようなものがあります。

class App extends Component {
...
  ComponentDidMount() {
    window.addEventListener('resize', this.handleResize, false);
  }
  handleResize{
    this.parentSize = {height: window.innerWidht - this.node.offsetLeft ..., width: ...};
    this.forceUpdate();
  }
  render() {
    <div ref="e=>this.node=e}>
      <ChildComponent parentSize={this.ParentSize} />
    </div>
  }
}

App コンポーネントが setState または forceUpdate() を介して再レンダリングされると、子コンポーネントが実際に再マウントされることに気付きました (つまり、componentWillUnmount、componentWillMount、componentDidMount が更新ごとに呼び出されます)。私が期待する動作は、Child コンポーネントの render 関数だけが再度呼び出されることです。最近、React-router 4.x にアップグレードしたので、これに関連しているかどうかはわかりません。

これが仕様によるものかどうか誰かに教えてもらえますか? componentDidMount を複数回呼び出すと、データをフェッチしようとすると問題が発生します。サイズ変更中に、その高価な操作を何度も実行したくありません。

アップデート：

この問題の考えられる原因を見つけました。複数のネストされたコンポーネントがあり、プロジェクト全体を投稿するのは難しいため、問題の原因となっている実際のコードを投稿するのが難しい場合があります。しかし、私はこれだと思います：

return (
  <div className="app-view" style={style} ref={el=>this.node=el}>
    <Switch>
      <Route exact path='/' component={() => <Home store={store} />} />
      <Route path='*' component={Error404} />
    </Switch>
  </div>
);

ここでは、ルート (React-router 4.x) 内のコンポーネントに props を渡そうとしています。これを行うには、ホームページを作成する関数を提供します。これは、レンダリングのたびにホームページを再作成する可能性があります。

問題は、ルート内のすべてのレンダリングでページを再作成せずに小道具を渡す方法ですか?

4

2 に答える 2

8

この問題は、最近の React-Router 4.x のアップグレードに関連していることを確認しました。React-Router のドキュメント:

component を使用する場合 (以下の render または children の代わりに)、ルーターは React.createElement を使用して、指定されたコンポーネントから新しい React 要素を作成します。つまり、コンポーネント属性にインライン関数を提供すると、レンダリングごとに新しいコンポーネントが作成されます。これにより、既存のコンポーネントが単に更新されるのではなく、既存のコンポーネントがアンマウントされ、新しいコンポーネントがマウントされます。インライン レンダリングにインライン関数を使用する場合は、render または children prop (下記) を使用します。

みんなのサポートに感謝します。

于 2017-08-11T12:35:31.887 に答える