Welche Methoden gibt es, um auf den Aktualisierungsstatus zu reagieren?

Die Methoden zum Aktualisieren des Status in React sind: 1. Unterkomponenten durch Schlüssel ändern, Code wie „8fded789aed3f8a3486f6a50a3cec222"; 2. Verwenden Sie die übergeordnete Referenzkomponente, um die Funktion der untergeordneten Komponente aufzurufen. 3. Übergeben Sie Daten über das übergeordnete Element an das untergeordnete Element, und das untergeordnete Element ist nur für das Rendern verantwortlich.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Welche Methoden gibt es zum Aktualisieren des Status in React?

Es gibt viele Möglichkeiten, den untergeordneten Status zu aktualisieren, wenn sich übergeordnete Requisiten in React ändern.

Unterkomponente:

class Children extends Component {
  constructor(props) {
     super(props);
     this.state = {
       a: this.props.a,
       b: this.props.b,
       treeData: '',
       targets: '',
     }
    }
  componentDidMount() {
   const { a, b } = this.state
   const data = {a,b}
   fetch('/Url', {
     data
   }).then(res => {
   if (res.code === 0) {
     this.setState({
     treeData: res.a,
     targets: res.b,
  })
  } else {
   message.error(res.errmsg)
  }
  })
  }
 test(item1, item2) {
   const data = { item1, item2 }
   fetch('/Url', {data}).then(res => {
     if (res.code === 0) {
       this.setState({
         treeData: res.a,
         targets: res.b,
       })
     } else {
       message.error(res.errmsg)
     }
   })
 }
}
export default Children

Methode 1: Verwenden Sie die Taste

<Children key={this.state.key} a={this.state.a} b={this.state.b} /> //父组件调用子组件

geschickt Die Unterkomponente wird durch Schlüsseländerungen neu instanziiert (Reaktionsschlüsseländerungen zerstören die Komponente, bevor die Komponente erneut instanziiert wird).

Methode 2: Verwenden Sie die übergeordnete Referenzkomponente, um die Unterkomponentenfunktion aufzurufen (entspricht nicht der Reaktion Designspezifikationen, können aber als Escape-Exit betrachtet werden) Hehe~)

class father extends Component {
    constructer(props) {
      super(props);
      this.state={
       a: '1',
       b: '2',
      }
      this.myRef
      this.test = this.test.bind(this)
    }
   change() {
     const { a,b } = this.state
     console.log(this.myRef.test(a,b)) // 直接调用实例化后的Children组件对象里函数
    }
render() {
 <Children wrappedComponentRef={(inst) => { this.myRef = inst } } ref={(inst) => { this.myRef = inst } } />  
 <button onClick={this.test}>点击</button>
}
}

Hinweis: WrappedComponentRef wird in React-Router v4 verwendet, um das Problem zu lösen, dass höherwertige Komponenten Ref nicht korrekt erhalten können (nicht höherwertige Komponenten müssen dies tun). entfernt werden)

Methode 3: Das übergeordnete Element übergibt Daten an das untergeordnete Element, und das untergeordnete Element ist nur für das Rendern verantwortlich (am konsistentesten mit Reaktionsdesignkonzepten). Empfohlen! !

Übergeordnete Komponente:

class father extends Component {
    constructer(props) {
      super(props);
      this.state={
       a:'1',
       b:'2',
       data:'',
      }
    }
  getcomposedata() {
    const { a, b } = this.state
    const data = { a, b }
    fetch('/Url', {data}).then(res => {
      if (res.code === 0) {
        this.setState({
          data:res.data
        })
      } else {
        message.error(res.errmsg)
      }
    })
  }
render() {
 <Children data={this.state.data}} />  
}
}

Untergeordnete Komponente:

  componentWillReceiveProps(nextProps) {
    const { data } = this.state
    const newdata = nextProps.data.toString()
    if (data.toString() !== newdata) {
      this.setState({
        data: nextProps.data,
      })
    }
  }

Hinweis: Der Reaktionszyklus der KomponenteWillReceiveProps ist der Existenzzeitraum, und die geänderten Requisiten werden verwendet, um ihren eigenen Zustand zu beurteilen und zu aktualisieren

Empfohlenes Lernen: „Video-Tutorial zum Reagieren „

Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es, um auf den Aktualisierungsstatus zu reagieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!