任意组件之间的方法共享

简介

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 .终于不用写很丑的操作了