Quelles sont les méthodes de communication réactive ?-Questions et réponses frontales-php.cn

Quelles sont les méthodes de communication réactive ?

青灯夜游

Libérer： 2022-03-22 14:33:19

original

5457 Les gens l'ont consulté

Les méthodes de communication de React incluent : 1. Utiliser des accessoires pour la communication entre les composants parent-enfant ; 2. Utiliser des fonctions de rappel pour la communication entre les composants enfant-parent ; 3. Utiliser la promotion de variables pour la communication entre les composants frères et sœurs ; 5. Utiliser le nœud Le module d'événements effectue une communication singleton ; 6. Utiliser Redux pour partager la communication des données.

Quelles sont les méthodes de communication réactive ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, React version 17.0.1, ordinateur Dell G3.

Les six méthodes de communication de React

1. Accessoires de communication parent-enfant
2. Fonction de rappel, communication enfant-parent
3. Promotion variable, communication entre composants frères et sœurs
4. Contexte, communication entre composants
5. module de communication d'événements node Singleton
6. communication de données partagées redux

1.props communication parent-enfant

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

Copier après la connexion

2. Promotion variable, communication de l'établissement Brother

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

Copier après la connexion

4.Contexte, communication inter-assemblées

Ancienne façon d'écrire

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

Copier après la connexion

Nouvelle façon d'écrire

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

Copier après la connexion

5.Single de Node tonne de communication du module d'événements

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

Copier après la connexion

Note⚠️ : Pour ce genre de communication, pensez à introduire le module events en haut, pas besoin d'installer, node son propre module.

6.redux communication de données partagées

store.js

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

function Parent() {
  let [text, setText] = useState(&#39;这是爸爸传给你的东西&#39;)
  let event = new Events()
  event.on(&#39;foo&#39;, () => { setText(&#39;改变了&#39;) })
  return (
    <div>
      <p>Parent</p>
      <Children event={event} text={text}></Children>
    </div>
  )
}
export default Parent

Copier après la connexion

child.js
import { createStore } from 'redux' let defaultState = { text: '我是store' } let reducer = (state = defaultState, action) => { switch (action) { default: return state } } export default createStore(reducer)
Copier après la connexion
Parent.js

import React from &#39;react&#39;

import { connect } from &#39;react-redux&#39;

class Child extends React.Component {
    render() {
        return (
            <div>Child<p>{this.props.text}</p></div>
        )
    }
}

let mapStataToProps = (state) => {
    return {
        text: state.text
    }
}

export default connect(mapStataToProps, null)(Child)

Copier après la connexion

Remarque : n'oubliez pas d'installer

redux

react-redux

【Recommandations associées : Tutoriel vidéo Redis】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!