内容简介:react因为组件化,使得组件间通信十分的重要。本文就来简单介绍一些常见的react组件间传递的内容。 我将归纳为以下几种关系来详述:react的数据流是单向的,最常见的就是通过props由父组件向子组件传值。我们做一个简单的选择商品,然后改变价格的事例。
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组件)。
// 创建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等。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
机器学习系统设计
[德] Willi Richert、Luis Pedro Coelho / 刘峰 / 人民邮电出版社 / 2014-7-1 / CNY 49.00
如今,机器学习正在互联网上下掀起热潮,而Python则是非常适合开发机器学习系统的一门优秀语言。作为动态语言,它支持快速探索和实验,并且针对Python的机器学习算法库的数量也与日俱增。本书最大的特色,就是结合实例分析教会读者如何通过机器学习解决实际问题。 本书将向读者展示如何从原始数据中发现模式,首先从Python与机器学习的关系讲起,再介绍一些库,然后就开始基于数据集进行比较正式的项目开......一起来看看 《机器学习系统设计》 这本书的介绍吧!