react中useContext的用法

Misnice2024-03-20 12:22

先在context文件中使用createContext创建初始值

javascript 复制代码

import React from 'react';

const TestContext = React.createContext(true);

export { TestContext };

然后在父组件中引入，利用Provider传入新值

javascript 复制代码

import { TestContext } from '@/utils/context';

<TestContext.Provider value={false}>
  <Child />
</TestContext.Provider>

在子组件中使用useContext获取值

javascript 复制代码

// Child
import { TestContext } from '@/utils/context';

useContext(TestContext); // false

需要注意的是只要父组件中Provider的value发生变化，所有使用了该Context的子组件都会重新渲染。