useContext Hook

主要用于组件传值，一般会单独使用一个文件，使用 React.createContext() 生成一个 context 对象，再通过 useContext 来管理分发数据，类似于 vue 的 bus。

主要和 React.createContext 配合使用。

示例

创建使用 Context 提供服务的文件：

// myContext.js 文件中创建
import React from 'react';

export default React.createContext();

父组件引入并挂载：

// APP 父组件 挂载 redux
import reducer from './store/reducer';
import MyContext from '../../myContext';

const [ name, setName ] = useState('小明');

// 这里注意，需要使用组件 Provider 字段来创建标签
<MyContext.Provider value={{ name, setName }}>
   <Home />
</MyContext.Provider>

子组件中使用：

// Home 子组件 使用 redux
import React from 'react';
import MyContext from '../../myContext';

const Home= () => {
  // 取出挂载的值
  const { name, setName } = React.useContext(MyContext)
  // 使用并添加修改的事件
  return <div onClick={() => setName('大明')}>名字叫：{name}</div>
};
export default Home;

useContext Hook

useContext Hook

关于作者 📝

目录

评论