React-组件通信方式

父组件向子组件(通过props传递)

• 父组件在子组件标签上通过子组件定义的事件或属性进行传递，子组件使用解构从props对象中拿到对应变量
• 示例：

  // 父组件
  const parent = memo(() => {
  	return (
  	<div>
  		<Child title="我是父组件传递给子组件的变量" />
  	</div>
  	)
  })
  
  // 子组件
  interface IChildProps {
  	title: string
  }
  const Child = memo<IChildProps>((props) => {
  	const { title } = props
  })
  export default Child

子组件向父组件通信

• 子组件定义事件，在事件中传递信息，父组件在子组件标签中通过箭头函数拿到参数

  // 父组件
  const parent = memo(() => {
  	const receiveMessage = (value: string) => {
  		console.log(value)
  	}
  	return <Child sendMessage={(value:string) => receiveMessage(value)} />
  })
  // 子组件
  interface IChildProps {
  	sendMessage: (value: string) => void
  }
  
  const Child = memo<IChildProps>((props) => {
  	const { sendMessage } = props
  	const [title, setTitle] = useState('')
  	const handleClick = () => sendMessage(title)
  
  	return (<div>
  		<div onClick={() => handleClick()}></div>
  	</div>)
  })
  export default Child

跨级组件通信 useContext

• 作用：全局传递数据，读取和订阅组件中的 context
• 参考：想了解useContext更多内容，点击查看
• 用法：

1. 创建一个单独的文件来管理

   // store/context.tsx
   import { createContext } from 'react'
   export const ThemeContext = createContext(false)

2. 在顶级组件中使用Context.Provider来进行包裹，值通过value={}传递，包裹的内部组件都可以使用

• 示例：
  • 需求：这个ThemeContext会随着点击事件而改变，并且应用于全局
  • 可以在App.tsx文件中使用，也可以在全局的布局组件中使用，这里在全局的布局组件中使用

    import React from 'react'
    import { memo, useState } from 'react'
    import { ThemeContext } from '@store/context'
    const Layout = memo((props) => {
    	const [theme, setTheme] = useState(false)
    	const { children } = props
    	const sunMoon = classNames(`${theme
    	? 'bg-primary text-black transition-all'
    	: 'bg-black text-primary transition-all'}`)
    	return (
    		<ThemeContext.Provider value={theme}>
    			<div  className={`imgBg ${sunMoon}`}>
    				<SideColumn 
    					changeWAB={()=> setTheme(!theme)}
    				/>
    				<div>{children}</div>
    			</div>
    		</ThemeContext.Provider>
    	)
    })
     export default Layout;

3. 子组件通过useContext()来拿到传递过来值，直接使用

   import React from 'react'
   import { memo, useState, useContext } from 'react'
   import { ThemeContext } from '@store/context'
   const SideColumn = memo<sideColumnProps>((props) => {
   	const theme = useContext(ThemeContext)
   })

非嵌套关系的组件通信

• 即没有任何包含关系的组件，包括兄弟组件以及不在同一个父级中的非兄弟组件。
• 可以使用自定义事件通信（发布订阅模式），使用pubsub-js
• 可以通过redux等进行全局状态管理
• 如果是兄弟组件通信，可以找到这两个兄弟节点共同的父节点, 结合父子间通信方式进行通信。
• 可以new一个 Vue 的 EventBus,进行事件监听，一边执行监听，一边执行新增 VUE的eventBus 就是发布订阅模式，是可以在React中使用的;