React之Context大全

首先我们来说一下Context是干什么的,其实就是实现跨组件之间数据通信的一种方式

1.在react项目中使用context

我们的demo目录结构如下:

我们可以先建一个文件Mycontext,来管理我们的数据

在Parent引入Son组件,在Son组件引入Grandson,比如我们想在组件中使用Mycontext中的数据,我们可以这样写:

• static contextType = 引入的模块 是固定写法,然后通过this.context就能拿到想要的值
  

2.第一种写法Class.contextType

我们要用你导入的模块.Provider包裹所有的内容,必须要传入value,当传入value,Mycontext组件中的默认值就失效了,我们在Parent父组件中进行包裹

在Grandon孙子组件见中可以直接拿到值,不需要再通过Son组件进行传值

3.第二种写法:Consumer

固定写法 ,必须是一个表达式里面必须是一个函数 函数里面返回一个内容

还可以在新建CommonContext.js文件在传入值

4.购物车商品加减案例

文件目录

ContentContext.jsx文件

import React, { Component } from 'react'
import { createContext } from 'react'

const {Provider,Consumer:CountConsumer} = createContext()
// 使用class相当于封装了一下Provider
class ContentProvider extends Component {
    // 状态管理count
    constructor(){
        super()
        this.state = {
            count:1
        }
    }
    incrementCount = ()=>{
        this.setState({
            count:this.state.count + 1
        })
    }
    decrementCount = ()=>{
        this.setState({
            count:this.state.count - 1
        })
    }
    render() {
        return (
            <Provider value={{
                count:this.state.count,
                incrementCount:this.incrementCount,
                decrementCount:this.decrementCount
            }}>
                {/* 相当于vue里面的插槽,当在Cart中引入ContentProvider的时候,能拿到里面的内容 */}
                {this.props.children}
            </Provider>
        )
    }
}
export {
    ContentProvider,
    CountConsumer
}

Cart.jsx文件

import React, { Component } from 'react'
import Count from './Count'
import CountBtn from './CountBtn'
import {ContentProvider} from './ContentContext'

export default class Cart extends Component {
    render() {
        return (
            <ContentProvider>
                <CountBtn type="increment"></CountBtn>
                <Count></Count>
                <CountBtn type="decrement"></CountBtn>
            </ContentProvider>
        )
    }
}

CountBtn.js文件

import { CountConsumer } from './ContentContext'
const CountBtn = (count) => {
    return (
        <CountConsumer>
            
            {
                // 传入incrementCount和decrementCount方法,如果类型是increment就调用incrementCount方法
                //{incrementCount, decrementCount}相当于把内容解构出来,第二种写法: 
                //(a) => {
                //     // 把type解构出来
                //     let handleClick =  count.type === "increment" ? a.incrementCount : a.decrementCount
                //     {/* 判断传入的类型然后赋值+或- */}
                //     return <button onClick={handleClick}>{count.type === "increment"?"+":"-"}</button>
                // }
                    {/* 判断传入的类型然后赋值+或- */}
                    return <button onClick={handleClick}>{count.type === "increment"?"+":"-"}</button>
                }
            }
                ({incrementCount, decrementCount}) => {
                    // 把type解构出来
                    let handleClick =  count.type === "increment" ? incrementCount : decrementCount
                    {/* 判断传入的类型然后赋值+或- */}
                    return <button onClick={handleClick}>{count.type === "increment"?"+":"-"}</button>
                }
            }

        </CountConsumer>
    )
}
export default CountBtn

count.jsx

import React from 'react'
import {CountConsumer} from './ContentContext'
const Count = ()=>{
    return (
        <CountConsumer>
            {
                // 
                ({count})=>{
                    return <span>{count}</span>
                }
            }
        </CountConsumer>
    )
}
export default Count