React-Hooks之useContext

1.什么是useContext Hook?
useContext相当于 类组件中的 static contextType = Context
函数式组件使用之前的Context来传递数据非常麻烦，代码如下:

import React, {createContext, useContext} from 'react';
const UserContext = createContext({});
const ColorContext = createContext({});
function Home() {
    const user = useContext(UserContext);
    const color = useContext(ColorContext);
    return (
        <UserContext.Consumer>
            {
                value1 =>{
                    return (
                        <ColorContext.Consumer>
                            {
                                value2 =>{
                                    return (
                                        <div>
                                            <p>{value1.name}</p>
                                            <p>{value1.age}</p>
                                            <p>{value2.color}</p>
                                        </div>
                                    )
                                }
                            }
                        </ColorContext.Consumer>
                    )
                }
            }
        </UserContext.Consumer>
    )
}
function App() {
    return (
        <UserContext.Provider value={{name:'sjl', age:21}}>
            <ColorContext.Provider value={{color:'red'}}>
                <Home/>
            </ColorContext.Provider>
        </UserContext.Provider>
        )
}
export default App;

问题发现：

• 嵌套太深
• 代码结构复杂，阅读性差
  useContext能够解决这个问题

import React, {createContext, useContext} from 'react';
const UserContext = createContext({});
const ColorContext = createContext({});
function Home() {
    const user = useContext(UserContext);
    const color = useContext(ColorContext);
    return (
        <div>
            <p>{user.name}</p>
            <p>{user.age}</p>
            <p>{color.color}</p>
        </div>
    )
}
function App() {
    return (
        <UserContext.Provider value={{name:'sjl', age:21}}>
            <ColorContext.Provider value={{color:'red'}}>
                <Home/>
            </ColorContext.Provider>
        </UserContext.Provider>
        )
}
export default App;

简洁又方便，完结_{开心的使用hooks的一天}

嘿嘿.png