跳到主要内容

认识

2023年02月22日
柏拉文
越努力，越幸运

一、认识​

useContext 接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。

当组件上层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重渲染，并使用最新传递给 MyContext provider 的 context value 值。即使祖先使用 React.memo 或 shouldComponentUpdate，也会在组件本身使用 useContext 时重新渲染。

二、特点​

三、语法​

import React, {useContext, useState} from 'react';
import {Context, Provider, Consumer, ContextType} from './context';

function Child() {
    const value = useContext(Context);
    const {name, age} = value;
    console.log(name, age);
    return <div>Child</div>;
}

function App() {
    const [name, setName] = useState('');
    const [age, setAge] = useState(28);
    return (
        <Provider value={{name, age}}>
            <div>App</div>
            <Child />
        </Provider>
    );
}

export default App;