Prevention of re-creation of the repeater component when switching communication channels

Question

I have a series of top-level navigation links that switch page-level components when you switch between links. Some pages have complex mesh components that are very expensive to create. I noticed that the react router constructs the component every time the page switches. Is there a way to cache the component passed to the route ?, i.e. PositionsPage

<Route path="/positions" component={PositionsPage} />

Answer 1

This is a very important measure of effectiveness in React in general (and not only react-router).

React DOM props state.

, React documentation for Advanced Performance.

: ​​ . .

. webpack.config.js , NODE_ENV React.

  ...
  plugins: [
    new CommonsChunkPlugin('bundle.js'),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      }
    })
  ]
  ...

, NODE_ENV=production webpack -p.

, / propTypes .

DOM

. ( ) props state, , .

, . , state prop.

shouldComponentUpdate: function(nextProps, nextState) {
  // @TODO your logic here
  // return true to update, false otherwise
  return true;
}

, React , .

Answer 2

, CSS.