Welche Methoden der Reaktionskommunikation gibt es?-Front-End-Fragen und Antworten-php.cn

Welche Methoden der Reaktionskommunikation gibt es?

青灯夜游

Freigeben： 2022-03-22 14:33:19

Original

5457 Leute haben es durchsucht

React-Kommunikationsmethoden umfassen: 1. Verwenden Sie Requisiten, um zwischen übergeordneten und untergeordneten Komponenten zu kommunizieren. 3. Verwenden Sie die Variablenförderung, um zwischen untergeordneten Komponenten zu kommunizieren. Komponentenkommunikation; 5. Verwenden Sie den Knoten. Das Ereignismodul führt die Singleton-Kommunikation durch. 6. Verwenden Sie Redux, um die Datenkommunikation zu teilen.

Welche Methoden der Reaktionskommunikation gibt es?

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

Die sechs Kommunikationsmethoden von React

1. Unterstützt die Eltern-Kind-Kommunikation
2. Rückruffunktion, Kind-Eltern-Kommunikation
3. Variable Förderung, Geschwisterkomponentenkommunikation
4.Kontext, komponentenübergreifende Kommunikation
5. Knoten Singleton-Kommunikation von Ereignissen Modul
6. Redux Shared Data Communication

1.props Eltern-Kind-Kommunikation

function Children(props) {
      return (
        <div>
          <p>Children</p>
          <p>{props.text}</p>
        </div>
      )
    }
    function Parent() {
      return (
        <div>
          <p>Parent</p>
          <Children text="这是爸爸传给你的东西"></Children>
        </div>
      )
    }
    
    export default Parent

Nach dem Login kopieren

2. Rückruffunktion, Kind-Eltern-Kommunikation

3. Variable Werbung, Brother-Establishment-Kommunikation

function Children(props) {
  return (
    <div>
      <p>Children</p>
      <p>{props.text}</p>
      <button onClick={() => { props.handleChange(&#39;改变了&#39;) }}>
        点击我改变爸爸传给我的东西
      </button>
    </div>
  )
}

function Parent() {
  let [text, setText] = useState(&#39;这是爸爸传给你的东西&#39;)
  function handleChange(val) {
    setText(val)
  }
  return (
    <div>
      <p>Parent</p>
      <Children handleChange={handleChange} text={text}></Children>
    </div>
  )
}
export default Parent

Nach dem Login kopieren

4.Kontext, versammlungsübergreifende Kommunikation

Alte Schreibweise

function Children(props) {
  return (
    <div>
      <p>Children</p>
      <button onClick={() => { props.setText(&#39;我是Children发的信息&#39;) }}>给Children1发信息</button>
    </div>
  )
}
function Children1(props) {
  return (
    <div>
      <p>Children1</p>
      <p>{props.text}</p>
    </div>
  )
}

function App() {
  let [text, setText] = useState(&#39;&#39;)
  return (
    <>
      <div>APP</div>
      <Children setText={setText}></Children>
      <Children1 text={text}></Children1>
    </>
  )
}
export default App

Nach dem Login kopieren

Neue Schreibweise

class Children extends React.Component {
  static contextTypes = {
    text: PropsType.string
  }
  render() {
    return (
      <div>
        <p>Children</p>
        <p>{this.context.text}</p>
      </div>
    )
  }
}

class Parent extends React.Component {
  static childContextTypes = {
    text: PropsType.string
  }
  getChildContext() {
    return {
      text: &#39;我是爸爸的信息&#39;
    }
  }
  render() {
    return (
        <div>
          <p>Parent</p>
          <Children></Children>
        </div>
    )
  }
}
export default Parent

Nach dem Login kopieren

5. Singleton-Kommunikation des Knotens of events-Modul

const { Consumer, Provider } = React.createContext()

class Children extends React.Component {
  render() {
    return (
      <Consumer>
        {
          (value) => (
            <div>
              <p>Children1</p>
              <p>{value.text}</p>
            </div>
          )
        }
      </Consumer>
    )
  }
}

class Parent extends React.Component {
  render() {
    return (
      <Provider value={{ text: &#39;我是context&#39; }}>
        <div>
          <p>Parent</p>
          <Children1></Children1>
        </div>
      </Provider>
    )
  }
}

export default Parent

Nach dem Login kopieren

Hinweis⚠️: Denken Sie bei dieser Art der Kommunikation daran, das events-Modul oben einzuführen, es ist keine Installation erforderlich,
node ein eigenes Modul. 6.redux gemeinsame Datenkommunikation . 【Verwandte Empfehlung:
Redis-Video-Tutorial
】
Das obige ist der detaillierte Inhalt vonWelche Methoden der Reaktionskommunikation gibt es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!