React新特性Context

Context有点类似于Redux 

创建createContext
import { createContext } from 'react';
const a = createContext;

Context的用法跟Redux差不多,Provider和Consumer

//理解为供应级吧
<x.Provider value={state}>
    //理解为消费级
    <x.Consumer>
        //内容必须是一个JS表达式
    {
        state => <p>{state}</p>
    }
    </x.Consumer>
</x.Provider>

没有Consumer的写法,需要用到contextType

class x extends Component {
    static contextType = x;
    render () {
        const y = this.context;
        return (
            {y}  
        )
    }
}

没有Consumer的写法2,用useContext

function b () {
    const c = useContext(x);
    return (
        {c}
    )
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值