Shulou(Shulou.com)06/02 Report--

This article shows you what the component communication of React is, which is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Introduction of component newsletter

A component is a separate and closed unit, and by default, only its own data can be used.

In the process of componentization, we split a complete function into multiple components to better complete the function of the whole application.

In this process, it is inevitable for multiple components to share some data.

In order to achieve these functions, it is necessary to break the independent closure of the component and let it communicate with the outside world. This process is component communication.

Three ways

Between parent and child components

Between sibling components

Cross component level

Summary

The state in the component is private, that is, the state of the component can only be used inside the component, not directly outside the component.

Component communication-parent-child content:

The parent component provides the state data to be passed

Add an attribute to the child component tag with the value of the data in state

The data passed in the parent component is received through props in the child component.

Core code

The parent component provides the data and passes it to the child component

Class Parent extends React.Component {state = {lastName: 'Wang'} render () {return (transfer data to child components:)}} subcomponents receive data function Child (props) {return subcomponents receive data: {props.name}} component communication-child passing parent idea

Using the callback function, the parent component provides the callback, the child component calls, and the data to be passed is used as the parameter of the callback function.

Steps

1. Parent component

1. Define a callback function f (which will be used to receive data)

two。 Pass the function f as the value of the attribute to the child component

two。 Sub-component

1. Get f through props

two。 Call f and pass in the data of the subcomponent

Core code

The parent component provides functions and passes them to child components

Class Parent extends React.Component {state: {num: 100} f = (num) = > {console.log ('received subcomponent data', num)} render () {return (subcomponent:)}}

The subcomponent receives the function and calls the

Class Child extends React.Component {handleClick = () = > {/ / invokes the props passed in by the parent component and passes in the parameter this.props.f} return (click me to pass data to the parent component)} summary

Child passing parent: invokes methods defined from the parent component in the child component and passes in parameters as needed

Component Communications-Brotherhood component

There is no definite sibling component in React, there is no such saying, there is only state promotion.

Train of thought

Promote the shared state to the nearest common parent component, which is managed by the common parent component

Thought: state improvement

Common parent component responsibilities:

Provide sharing statu

Provide a way to manipulate shared state

A method by which subcomponents to communicate only need to receive status or operational status through props

Core code

Parent.js

Import React, {Component} from 'react'import ReactDOM from' react-dom'import Jack from'. / Jack'import Rose from'. / Rose'class App extends Component {/ / 1. Status is promoted to parent component state = {msg:',} render () {return (I am App component {/ * 2. Display status to subcomponents * /})} changeMsg = (msg) = > {this.setState ({msg,})}} / / rendering component ReactDOM.render (, document.getElementById ('root'))

Son1.js

Import React, {Component} from 'react'export default class Jack extends Component {render () {return (I am the Jack component)} say = () = > {this.props.say (' you jump i look')}}

Son2.js

Import React, {Component} from 'react'export default class Rose extends Component {render () {return (I am a Rose component-{this.props.msg})}} component communication-cross-level component communication

To use cross-level component communication in vue, you need to use Context

To use Context

There are three steps:

1. Import and call the createContext method to deconstruct the Provider and Consumer components from the result

Import {createContext} from 'react'const {Provider, Consumer} = createContext ()

two。 Wrap the root component with the Provider component and provide the data to be shared through the value property

Return ()

3. In any descendant component, wrap the entire component using the Consumer component exported in step 2

Return ({(data) = > {/ / the parameter data here will automatically receive the data passed in Provider / / console.log (data) return}}) landing code

Create a context.js file

Import {createContext} from 'react'const {Provider, Consumer} = createContext () export {Consumer, Provider}

Transform the root assembly

Import {Provider} from'. / context'render () {return (root component, num: {this.state.num})}

Retrofit the descendant component Uncle.js

Import React from 'react'import {Consumer} from'. / context'export default class Uncle extends React.Component {render () {return ({(data) = > {return I am a Uncle component, {data.num}})}} above is what the component communication of React is. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.