简介
1 .A组件做了一个点击事件,需要B组件来响应他
2 .浏览器自己原生自带的EventEmitter
3 .context+ahook里面的useEventEmitter
context.js
1 .定义全部的全局变量,变量形式以及默认值,但是这里最关键的是什么呢,不能传递hook,所以也就仅仅只能做一些默认值的导出,让别的地方用他
2 .这里最关键的是const ThemeContext = React.createContext().这是一个组件,真正往下传的值,要在使用它的时候传一个value下去,不能再index.js里面使用他
// 这个里面要放所有的context数据以及操作
import React from 'react'
// import {useEventEmitter } from 'ahooks'
// 全局传递和订阅的事件
// const eventFunc=function(){
// return {
// focus$:useEventEmitter()
// }
// }
//hook必须写在函数里面
const themes = {
light: {
foreground: "#000000",
background: "#eeeeee"
},
dark: {
foreground: "#ffffff",
background: "#222222"
},
events:{
"name":'里面是一些全局用到的事件'
}
}
const ThemeContext = React.createContext()
//默认值:这里只是做一些定义或者操作的东西,真的值并不在这里传,关键是这里不能传递hook,所以所有的都放在value里面操作,甚至修改自己data的操作
// 注意这里只能定义,不能修改
export {ThemeContext,themes}
index.js
1 .这里不是一个完整的function类型的结构,所以也不不能传hook类型的context值
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
)
app.js
import './App.css';
import '@antv/x6-react-components/es/split-box/style/index.css'
import {useEventEmitter } from 'ahooks'
import Header from './header'
import Content from './content2'
import {useRef,useEffect,useState,React} from 'react'
import {ThemeContext,themes} from './context'
function App() {
const testEvent=useEventEmitter()
return (
// 感觉一定要这里才行
<div className="App">
<ThemeContext.Provider value={
{
'theme':themes.dark,
//这里传简单的值
'events':{
'test':testEvent,
}
//这里传全局都能调用的函数
}
}>
<Header
/>
<Content
/>
</ThemeContext.Provider>
</div>
);
}
export default App;
header.js
1 .这里是任意的一个组件,主要是用来触发context绑定的全局函数
import { ThemeContext } from './context'
function header(props){
const theme=useContext(ThemeContext)
//拿到theme,这里一定是可以拿到的,所以不用做useEffect的操作,值一定是在的,第一次用那个操作就是有了坑
function handleTest(){
console.log('test',theme)
theme.events.test.emit('test事件被触发')
}
//定义一个用来触发的函数.
}
content.js
1 .这里是任意一个监听事件的函数
import { ThemeContext } from './context'
//这里引入的是初始定义的,没有传参数的.
function content(props){
const theme=useContext(ThemeContext)
//拿到theme,这里一定是可以拿到的,所以不用做useEffect的操作,值一定是在的,第一次用那个操作就是有了坑
theme.events.test.subsription((data)=>{
console.log('data',data)
})
//这里也是一定在的,流批.这里也是看起来用的是旧的,也是可以访问到后来传的value,难道是有做替换
}
总结
1 .终于不用写很丑的操作了
网友评论