Geek Answers Handbook

Saving the state of remote components

I often see these patterns when you need to add or remove a component when rendering based on some state (either in the details or in the state). For example, a tabbed user interface or extension / collapse widget.

render: function() {
  if (this.state.show) {
    var showRender = <Show />;
  } else {
    var showRender = <Hidden />;
  }

  return {showRender};
}

However, the problem occurs every time you change this.state.show, a new Show or Hidden is created. An old state that might exist in a previous Show instance or some deep Show subcomponent is reinitialized.

Moving a state to a parent object is impractical when the state can exist in several components and subcomponents.

Another solution that I can think of is to style the "display: none"component I want to hide. But if I apply this template everywhere, it will be difficult for him to create the whole user interface, even if it is not visible.

Adding support key="someValue"works as long as the component simply moves and is not completely removed.

Are there any other patterns?

+4
source share
2 answers

. , , . , getInitialState . , . - .

Flux, . , , .

+2

Flux . , , . : https://github.com/enaqx/awesome-react#flux-tutorials

Edit:

Flux , ( ). . Mine - , , PostalJs. - PostalJs mixin React, , , . , , , , . Flux: "Store", Message Bus - . , , Flux - - . @FakeRainBrigand , .

+2

More articles:


All Articles