微商城网站建设咨询,网站做的不满意,更新wordpress咋办,网站开发模板教务管理相关文章#xff1a; React Context的使用方法 react Provider Consumer 使用方法
1. 是什么
我们将组件间通信可以拆分为两个词#xff1a;
组件通信
组件是vue中最强大的功能之一#xff0c;同样组件化是React的核心思想 相比vue#xff0c;React的组件更加灵活和多样…相关文章 React Context的使用方法 react Provider Consumer 使用方法
1. 是什么
我们将组件间通信可以拆分为两个词
组件通信
组件是vue中最强大的功能之一同样组件化是React的核心思想 相比vueReact的组件更加灵活和多样按照不同的方式可以分成很多类型的组件 而通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的广义上任何信息的交通都是通信 组件间通信即指组件通过某种方式来传递信息以达到某个目的
2. 如何通信
组件传递的方式有很多种根据传送者和接收者可以分为如下
父组件向子组件传递子组件向父组件传递兄弟组件之间的通信父组件向后代组件传递非关系组件传递
2.1 父组件向子组件传递
由于React的数据流动为单向的父组件向子组件传递是最常见的方式 父组件在调用子组件的时候只需要在子组件标签内传递参数子组件通过props属性就能接收父组件传递过来的参数
function EmailInput(props) {return (labelEmail: input value{props.email} //label );}
const element EmailInput email123qq.com /;2.2 子组件向父组件传递的
子组件向父组件通信的基本思路是父组件向子组件传一个函数然后通过这个函数的回调拿到子组件传过来的值 父组件对应代码如下
//父组件代码
class Parents extends Component {constructor() {super();this.state { price: 0 };}getPrice(e) {this.setState({price: e }); }render() {return ( divdivprice: {this.state.price}/div {/*向子组件传入一个函数 */}Child getPrice{this.getPrice.bind(this)} //div ); }
}子组件对应代码如下
//子组件代码
class Child extends Component {clickGoods(e) {// 在此函数中传入值this.props.getPrice(e); }render() {return (divbutton onClick{this.clickGoods.bind(this, 100)}goods1/button button onClick{this.clickGoods.bind(this, 1000)}goods2/button/div ); }}2.3 兄弟组件之间的通信
如果是兄弟组件之间的传递则父组件作为中间层来实现数据的互通通过使用父组件传递
class Parent extends React.Component {constructor(props) {super(props)this.state {count: 0} }setCount () {this.setState({count: this.state.count 1})}render() {return ( div SiblingA count{this.state.count}/SiblingB onClick{this.setCount}//div ); }
}2.4 父组件向后代组件传递
父组件向后代组件传递数据是一件最普通的事情就像全局数据一样 使用context提供了组件之间通讯的一种方式可以共享数据其他数据都能读取对应的数据通过使用React.createContext创建一个context
const PriceContext React.createContext(price)context创建成功后其下存在Provider组件用于创建数据源Consumer组件用于接收数据使用实例如下 Provider组件通过value属性用于给后代组件传递数据
PriceContext.Provider value{100}
/PriceContext.Provider如果想要获取Provider传递的数据可以通过Consumer组件或者或者使用contextType属性接收对应分别如下
class MyClass extends React.Component {static contextType PriceContext;render() {let price this.context;/* 基于这个值进行渲染工作*/}
}Consumer 组件
PriceContext.Consumer { /*这里是一个函数 */ }
{price divprice {price}/div }/PriceContext.Consumer2.5 非关系组件传递
如果组件之间关系类型比较复杂的情况建议将数据进行一个全局资源管理从而实现通信例如redux。关于redux的使用后续再详细介绍
3. 总结 由于React是单向数据流主要思想是组件不会改变接收的数据只会监听数据的变化当数据发生变化时它们会使用接收到的新值而不是去修改已有的值因此可以看到通信过程中数据的存储位置都是存放在上级位置中
