react中useContext的用法

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

import React from 'react';

const TestContext = React.createContext(true);

export { TestContext };
1
2
3
4
5

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

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

<TestContext.Provider value={false}>
  <Child />
</TestContext.Provider>
1
2
3
4
5

在子组件中使用useContext获取值

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

useContext(TestContext); // false
1
2
3
4

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