react组件通信

react组件间的通信包含以下几种形式：

1、父组件向子组件通信
2、子组件向父组件通信
3、跨级组件通信
4、非嵌套关系组件间的通信

父组件向子组件通信

父组件通过props向子组件传递需要的信息

// 子组件
const Child = (props) => {
	return <div>{props.name}</div>
}
// 父组件
const Parent = () => {
	return <Child name="react传值" />
}

子组件向父组件通信

子组件通过props+回调的方式向父组件传值

// 子组件
class Child extends React.Component {
	render() {
		return <button onClick={() => {
		this.props.callBack('子组件的值')}}>传值</button>
	}
}
// 父组件
class Parent extends React.Component {
	callBack = (value) => {
		console.log(value)
	}
	render() {
		return <Child callBack={this.callBack} />
	}
}

跨级组件通信

父组件向子组件的子组件通信，向更深层子组件通信
1、props （不推荐使用） 利用中间组件层层传递，会增加复杂度。
2、使用context （推荐使用） context相当于一个容器，把通信的数据存放在这个容器中，不管嵌套多深组件都可以随意取用。
1、Context 能让你将这些数据向组件树下所有的组件进行“广播”，所有的组件都能访问到这些数据，也能访问到后续的数据更新。
2、Context 主要应用场景在于很多不同层级的组件需要访问同样一些的数据。

const ThemeContext = React.createContext()
// 子组件的子组件
class GrandChild extends React.Component {
	render(
		return (
			<ThemeContext.Consumer>
			{
				(color) => <h1>themeColor: {color}</h1>
			}
			</ThemeContext.Consumer>
		)
	)
}
// 子组件
const Child = () => {
	return (
		<GrandChild />
	)
}
// 父组件
class Parent extends React.Component {
	render () {
		const color = 'red'
		return (
			<ThemeContext.Provider value={color}>
				<Child />
			</ThemeContext.Provider>
		)
	}
}

3、组合组件
如果你只是想避免层层传递一些属性，组件组合有时候是一个比 context 更好的解决方案。

非嵌套关系组件间的通信

包含兄弟组件和不在同一个父级中的非兄弟组件。
1、通过redux进行全局状态管理
2、如果是兄弟组件，可以找到这两个兄弟节点的共同父级节点，结合父子间通信方式进行通信。
3、通过自定义事件通信（发布订阅模式）