It is the spring of the year again, the time when all things come to life and animals begin to make love 🤣; Thinking of such a good season, what else is there to do? And then Ben went down a road of no return. 🤐

Interviewer: Tell me about the React communication methods.

At this point I took a deep breath and said six ways to communicate: 1. Props Parent-child Communication 2. Context, communication across components 5. Singleton communication of node's Events module 6. Redux shared data communicationCopy the code

Interviewer: “Yeah, it’s pretty complete.”

Then he gave a wicked smile and added.

Interviewer: “mouth say without rely, can each kind of communication all give me lift 🌰”

Me: “Okay.”

In fact, at this point…

Then I took some of his computers.

1. Props communicates with the parent

    function Children(props) {
      return (
        <div>
          <p>Children</p>
          <p>{props.text}</p>
        </div>
      )
    }
    function Parent() {
      return (
        <div>
          <p>Parent</p>
          <Children text="This is something dad handed down to you."></Children>
        </div>
      )
    }
    
    export default Parent
    
Copy the code

2. Callback function, child parent communication

function Children(props) {
  return (
    <div>
      <p>Children</p>
      <p>{props.text}</p>
      <button onClick={() => { props.handleChange('Changed'</button> </div>)}function Parent() {
  let [text, setText] = useState('This is what dad handed down to you.')
  function handleChange(val) {
    setText(val)
  }
  return (
    <div>
      <p>Parent</p>
      <Children handleChange={handleChange} text={text}></Children>
    </div>
  )
}
export default Parent
Copy the code

3. Variable promotion, brothers form communication

function Children(props) {
  return (
    <div>
      <p>Children</p>
      <button onClick={() => { props.setText('THIS is a message from Children'</button> </div>)}function Children1(props) {
  return (
    <div>
      <p>Children1</p>
      <p>{props.text}</p>
    </div>
  )
}

function App() {
  let [text, setText] = useState(' ')
  return (
    <>
      <div>APP</div>
      <Children setText={setText}></Children>
      <Children1 text={text}></Children1>
    </>
  )
}
export default App
Copy the code

4.Context, communication across components

The old way

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: 'I am daddy's message'}}render() {
    return (
        <div>
          <p>Parent</p>
          <Children></Children>
        </div>
    )
  }
}
export default Parent

Copy the code

The new writing

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: 'I am the context' }}>
        <div>
          <p>Parent</p>
          <Children1></Children1>
        </div>
      </Provider>
    )
  }
}

export default Parent

Copy the code

5. Singleton communication of the Events module of Node

function Children(props) {
  return (
    <div>
      <p>Children</p>
      <p>{props.text}</p>
      <button onClick={() => { props.event.emit('foo'</button> </div>)}function Parent() {
  let [text, setText] = useState('This is what dad handed down to you.')
  let event = new Events()
  event.on('foo', () = > {setText('Changed')})return (
    <div>
      <p>Parent</p>
      <Children event={event} text={text}></Children>
    </div>
  )
}
export default Parent
Copy the code

Note ⚠️ : For this communication, remember to introduce the Events module at the top, without installing node’s own module.

6. Redux shared data communication

store.js

import { createStore } from 'redux'

let defaultState = {
    text: 'I am a store'
}

let reducer = (state = defaultState, action) => {
    switch (action) {
        default: return state
    }
}

export default createStore(reducer)
Copy the code

child.js

import React from 'react'

import { connect } from 'react-redux'

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)
Copy the code

Parent.js

class Parent extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <div>
          <p>Parent</p>
          <Child></Child>
        </div>
      </Provider>
    )
  }
}

export default Parent
Copy the code

Note ⚠ : Remember to install redux and React-redux.

The interviewer looked at it and finally showed uncle’s smile.

---

🇨🇳 come on motherland, Come on Wuhan; Where there is a country, there is a home, we are together 🇨🇳