Question

我试图进行搜索，但我认为答案被许多使用相似关键字的问题和教程所迷惑-但并非针对我遇到的特定问题。 This问题已经解决-复杂的组件（D3）不断被重新渲染。我发现很多答案都是关于备忘录和PureComponents的-尽管它们不适用于d3，Google Maps等-Stateful_Class_Component_Widget的渲染是没有失败的。

我有一个React应用，其结构类似于以下内容（非常基本的常规示例）

// big stateful component running everything with state
class AppView extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
        documents: [] // array of simple JSON docs fetched from API
        show_widget: true 
      }
      this.function1 = this.function1.bind(this)
      // more involved functions, set states, etc
      render()
         return (
         <div>
         <StatelessFC1
              documents = {this.state.documents}
              show_widget = {this.state.show_widget}

         />
         <StatelessFC2
              props={this.state.otherStateThing}
         />
         </div>
         )
}

class Stateful_Class_Component_Widget  extends React.Component {
   // assume D3, Google Maps, Leaflet - a big involved 
   constructor(props) {
      super(props);
      console.log("New instance")
      this.state = {
        documents: [] // array of simple JSON docs fetched from API 
      }
   }
      // some functions etc
   render() {
     return (
      <div id="d3_uses_me">
      // d3/google maps code
      </div>
     )
   }

const StatelessFC1 = (props) =>
 return (
   <StatelessFC1_a 
     documents={props.documents}
     show_widget = {props.show_widget}
   />
 )

const StatelessFC1_a = (props) =>
 return (
   <StatelessFC1_a_i
       documents={props.documents}
       show_widget = {props.show_widget}
   />
// this only renders when AppView's state is 'show-widget') 
const StatelessFC1_a_i = (props) =>
  return (
    { props.show_widget &&
       <Stateful_Class_Component_Widget 
          documents={props.documents}
       />
    }
    </div>)

所以这个想法是，为了构造应用程序视图，我具有一个无状态无状态组件的功能，当AppView状态更改时，该组件会根据需要重新渲染-一切都很好。 AppView可以很好地处理其他所有状态。

问题是-Stateful_Class_Component_Widget（在我的情况下，它类似于Google地图-每次无意义的更改都没有意义时重新渲染它）会不断被重新创建-即每次AppView的状态更改时，都会创建一个Stateful_Class_Component_Widget的新实例（可能是由于其“父”无状态组件中触发了重新渲染-这是很麻烦的，因为这是第三方API。理想情况下，它仅应在状态/属性更改时进行更新-很好-但是现在每次AppView状态更改时都将创建它（每次可以在控制台中看到“新实例”）

基本上，我想要一个Stateful_Class_Component_Widget的实例，并希望它在应用程序生命周期中保持持久性（尽管并不总是可见的）。现在，它总是在被重建。将它直接带入AppView的唯一方法是吗？

在功能组件内渲染有状态的类组件实例

0 个答案: