React component passing value - passing value across components

pass value across components

context object -- context object

The data passed between react components is passed down through props, which is a one-way transfer. It is passed down from the parent to the children and grandchildren through props layer by layer. Sometimes our components are nested layer by layer. , so this method is troublesome to pass layer by layer. If you want to jump layer by layer, you will use context

context: context object

Context solves the complexity of passing values ​​across components very well. It can quickly transfer data across components.

If you want to use context to pass values ​​across components, you need to use the createContext() method, and the method provides us with two objects:

Provider object producer ----> used to produce data Consumer object consumer ----> used to use data

import React, { Component } from 'react'
// 1.创建context对象
const GlobalContext = React.createContext()
​
class Zia extends Component {
    render() {
        return (
            <div>
                我是第一个子组件
            </div>
        )
    }
}
class Zib extends Component {
    render() {
        return (
​
            <div>
                我是第2个子组件
                {/* 3.任意组件引入GlobalContext并调用context，使用GlobalContext.Consumer（消费者） */}
​
                <GlobalContext.Consumer>
                    {/* 4.在回调函数中直接使用生产者的数据 */}
                    {
​
                        (value) => {
                            return <h1>{value.name}</h1>
                        }
                    }
                </GlobalContext.Consumer>
            </div>
​
        )
    }
}
export default class fu extends Component {
    render() {
        return (
            // 2.在根组件件引入GlobalContext，并使用GlobalContext.Provider生产者
            // 并且使用value属性传入数据
            <GlobalContext.Provider value={
   
   { name: "xixi", age: 18 }}>
                <div>
                    我是根组件
                    <Zia />
                    <Zib />
                </div>
            </GlobalContext.Provider>
        )
    }
}

Function components use the context object

After react16.8, a new feature called hook was added. One of them is useContext, which can simplify the complexity of using context objects in function components

useContext

Receives a context object (the return value of React.createContext) and returns the current value of the context.

The data in the Consumer consumer of the context object can be obtained directly (simplifies the complexity of using the consumer)

Pass values ​​across components when not in use

import React, { createContext } from 'react'
let context = createContext()
function Sun() {
    return (
        <div>
            孙
            <context.Consumer>
                {
                    (value)=>{
                        return (
                            <h1>{value.name}</h1>
                        )
                    }
                }
            </context.Consumer>
        </div>
    )
}
​
function Zi() {
    return (
        <div>
            子
            <Sun></Sun>
        </div>
    )
}
​
export default function Fu() {
    return (
        <context.Provider value={
   
   {name:"xixi",age:18}}>
            <div>
                父
                <Zi></Zi>
            </div>
        </context.Provider>
    )
}
​

Use useContext

import React, { createContext,useContext } from 'react'
let context = createContext()
function Sun() {
    // 使用useContext可以直接得到Consumer中的数据
    let value=useContext(context)
    return (
        <div>
            孙
            <h1>{value.name}</h1>
        </div>
    )
}
​
function Zi() {
    return (
        <div>
            子
            <Sun></Sun>
        </div>
    )
}
​
export default function Fu() {
    return (
        <context.Provider value={
   
   {name:"xixi",age:18}}>
            <div>
                父
                <Zi></Zi>
            </div>
        </context.Provider>
    )
}
​

redux

The use of redux