React-hooks-useContext

React-hooks-useContext

在学习之前我们先来看看我们在没有hooks之前使用Context, 使用Context是为了避免props多层传递的麻烦

// ###App.js
import React, { createContext, Component } from "react"
// foo作为默认数据被传入
const foo = {
    name: "wangzhan",
    age: 22
}
export const {Provider, Consumer} = createContext(foo);
export default class App extends Component{
    render() {
        const bar = {
            name: "wangyibo"
            age: 23
        }
        //这里传递数据bar会将默认数据foo覆盖
        <Provider value={bar}>
            <DisplayData/>
        </Provider>
    }
}

import React, { Component } from "react"
import { Consumer } from 'App.js'
function DisplayData(props){
    return (
    	<Consumer>
        	{
                (bar)=>{
                    <div>
                    	<p>{bar.name}</p> // wangyibo
                    	<p>{bar.age}</p> // 23
                    </div>
                }
            }
        </Consumer>
    )
}

通过之前的方式需要用Provider和Consumer两个组件来对上下文进行共享

使用useContext

import React, { createContext, useContext } from "react"
const peoples = {
    wangzhan:{
        name: "wangzhan",
    	age: 22
    },
    wangyibo:{
        name: "wangyibo",
        age: 23
    }
}
const PeoplesContext = createContext(peoples.wangzhan);
function App(){
    return (
    	<PeoplesContext.Provider value={peoples.wangyibo}>
        	<DisplayData/>
        </PeoplesContext.Provider>
    )
}
function DisplayData(props) {
    const people = useContext(PeoplesContext);
    return (
    	<div>
        	<p>{people.name}</p> // wangyibo
            <p>{people.age}</p> // 23
        </div>
    )
}

这里我们可以省掉一些不必要的Consumer组件，当我们的组件嵌套层数过多时候，Consumer会阻碍我们对代码的理解，使用useContext会使得数据在子组件中更加方便我们阅读和理解代码