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覆盖
        
            
        
    }
}

import React, { Component } from "react"
import { Consumer } from 'App.js'
function DisplayData(props){
    return (
    	
        	{
                (bar)=>{
                    

                    	
{bar.name}
 // wangyibo
                    	
{bar.age}
 // 23
                    
                }
            }
        
    )
}

通过之前的方式需要用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 (
    	
        	
        
    )
}
function DisplayData(props) {
    const people = useContext(PeoplesContext);
    return (
    	

        	
{people.name}
 // wangyibo
            
{people.age}
 // 23
        
    )
}

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