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}
    )
}

猜你喜欢

转载自blog.csdn.net/weixin_42450794/article/details/97908166