react因为组件化，使得组件间通信非常的重要。本文就来简略介绍一些常见的react组件间传递的内容。
我将演绎为以下几种关系来详述:父组件与子组件之间，子组件与父组件之间，发布者与订阅者模式（context），兄弟组件间，redux也是一种组件治理的办法，然而redux状态治理的内容比拟多，这里只做简略介绍，之后再另开一篇详述。
父组件向子组件通信
react的数据流是单向的，最常见的就是通过props由父组件向子组件传值。
示例（要害局部有正文）：
咱们做一个简略的抉择商品，而后扭转价格的事例。
父组件：
父组件就是两个按钮，用来切换商品的价格，其中援用了子组件。
class Parents extends Component {
//构造函数
constructor() {
super();
// 设置state
this.state = {
price: 0
};
}
clickGoods(e) {
//更新state
this.setState({
price: e
});
}
// 渲染
render() {
let { price } = this.state;
return (
<div>
<button onClick={this.clickGoods1.bind(this)}>goods1</button>
<button onClick={this.clickGoods2.bind(this)}>goods2</button>
// 父组件中 <Child price={price} />
</div>
);
}
}
子组件：
子组件中应用props属性接管传递来的数据。
class Child extends Component {
render() {
{/*这里从props中拿到*/}
return <div> price: {this.props.price} </div>;
}
}
子组件向父组件通信
接下来咱们反过来，让子组件向父组件通信。 子组件向父组件通信的基本思路是，父组件向子组件传一个函数，而后通过这个函数的回调，拿到子组件传过来的值。上面是例子，正好和下面是反的，父组件用来显示价格，子组件显示两个按钮，子组件把价格传递给父组件。
示例（要害局部有正文）：
父组件
class Parents extends Component {
constructor() {
super();
this.state = {
price: 0
};
}
getItemPrice(e) {
this.setState({
price: e
});
}
render() {
return (
<div>
<div>price: {this.state.price}</div>
{/* 向子组件中传入一个函数 */}
<Child getPrice={this.getItemPrice.bind(this)} />
</div>
);
}
}
子组件
class Child extends Component {
clickGoods(e) {
// 在此函数中传入值
this.props.getPrice(e);
}
render() {
return (
<div>
<button onClick={this.clickGoods.bind(this, 100)}>goods1</button>
<button onClick={this.clickGoods.bind(this, 1000)}>goods2</button>
</div>
);
}
}
发布者与订阅者模式（context）
React 的props都是由父组件传递给子组件的，一旦遇到孙组件，就须要一层层的传递上来。而context提供了一种组件之间通信的新的形式（16.3版本之后），能够共享一些数据，其它的组件都能从context中读取数据（相似于有个数据源，组件能够订阅这个数据源）。
应用办法
React.createContext()办法
咱们能够应用createContext来创立一个context,它能够接管一个变量或者对象做为参数（当对象为参数的时候，react应用object.is()去比拟，有些影响性能）。这个传入的值做为context的默认值
const PriceContext = React.createContext('price')
这样就创立了一个Context
Provider组件
Provider就是用来创立数据源的。它是给所有的子组件提供数据源的跟组件。它承受一个value作为props，用来传递值，它会扭转context的默认值。一个provider能够蕴含多个Consumer组件。如果Provider组件嵌套的话，
<PriceContext.Provider value={100}>
</PriceContext.Provider>
Consumer组件
Consumer示意承受数据的组件，它承受一个函数做为子元素。这个函数会接管context传递的值，返回一个react的组件。Consumer组件必须蕴含在Provider外面。
<PriceContext.Consumer>
{ /*这里是一个函数*/ }
{
price => <div>price：{price}</div>
}
</PriceContext.Consumer>
示例
在这部分咱们尝试一下从父组件间接传递到孙组件，不通过子组件（间接从A组件传值到C组件，不通过B组件）。
参考React实战视频解说：进入学习
// 创立Context
const PriceContext = React.createContext('price')
// A组件中
class ClassA extends Component {
constructor(){
super()
this.state={
price:0
}
}
// 点击按钮事件
clickGoods(e) {
this.setState({
price:e
})
}
render(){
const { price } = this.state
return(
// Provider
// 把state里price转到Provider的value中
<PriceContext.Provider value={price}>
<button onClick={this.clickGoods.bind(this, 100)}>goods1</button>
<button onClick={this.clickGoods.bind(this, 1000)}>goods2</button>
<ClassB />
</PriceContext.Provider>
)
}
}
// 组件B
class ClassB extends Component {
// 组件B中只是援用了ClassC，没有进行传值的操作
render(){
return(
<div><span>price:</span><span><ClassC /></span></div>
)
}
}
// 组件C
class ClassC extends Component {
render(){
return(
// Consumer,留神Consumer的上面要蕴含一个函数
<PriceContext.Consumer>
{
price=><span>{price}</span>
}
</PriceContext.Consumer>
)
}
}
context的总结与了解
一个react app是由很多react组件组成的，有的组件之间是有嵌套关系的，能够造成一条“组件链”。Context能够当做组件的“作用域”[3]。一个根组件，它定义了一个context，它的组件链上的组件都能够拜访到provider中定义的变量或对象，如下图所示，这就比拟像‘作用域’的概念。context在一些简略的场景下能够代替局部redux的性能。
兄弟组件间通信
兄弟间组件通信，个别的思路就是找一个雷同的父组件，这时候既能够用props传递数据，也能够用context的形式来传递数据。
当然也能够用一些全局的机制去实现通信，比方redux等。
小结
本文次要介绍了3种通信的关系父组件与子组件之间，子组件与父组件之间，发布者与订阅者模式（context），简述了兄弟组件间的通信。次要是介绍两种形式，利用props属性和Context。也介绍了一些context的了解。
发表回复