父组件与子组件通信

  • 父组件将自己的状态传递给子组件,子组件当做属性来接收,当父组件更改自己状态的时候,子组件接收到的属性就会发生改变
  • 父组件利用ref对子组件做标记,通过调用子组件的方法以更改子组件的状态,也可以调用子组件的方法

父组中定义ref引用

import React,{Component,createRef} from 'react'
import Child1 from './Child1'
export default class App extends Component {
constructor(props){
super(props)
this.child=createRef()
}
render(){
return(
<div>
<Child1 ref={this.child}/>
<button onClick={this.fn.bind(this)}></button>
</div>
)
}
fn(){
const child=this.child.current
child.setTitle()
}
}

子组件定义好数据源和修改数据源方法

import React,{Component} from 'react'
export default class Child1 extends Component{
state={
title:'标题'
}
render(){
return (
<div>
{this.state.title}
</div>
)
}
setTitle(){
this.setstate({title:'hh'})
}
}

子组件与父组件通信

父组件将自己的某个方法传递给子组件,在方法里可以做任意操作,比如可以更改状态,子组件通过this.props接收到父组件的方法后调用。

跨组件通信

在react没有类似vue中的事件总线来解决这个问题,一是我们借助它们共同的父级组件通过代理的方式来实现,但过程会相当繁锁。react提供了Context来实现跨组件通信, 而不必显式地通过组件树的逐层传递 props。

复杂的非父子组件通信在react中很难处理,多组件间的数据共享也不好处理,在实际的工作中我们会使用flux、redux、mobx来实现

祖先子孙

  1. 定义store类 导出createContext中的Provider,COnsumer
  2. 在祖先节点中发布消息: Provider value=任意数据
  3. 在子孙节点中订阅:Consumer 回调函数{value=>(组件)}

    1.定义数据源store

    store.js
import React , {createContext} from 'react'
let {Provider,Consumer} = createContext()
export {
Provider,//发布
Consumer//订阅
}

2.祖先节点

import React ,{Component} from 'react'
import {Provider,Consumer} from './store'
import Son from './Son'
export default class App extends Component{
constructor(props){
super(props)
this.state={
name:'mingcen'
}
}
render(){
return (
<div>
<Provider value={this.state.name}>
<Son/>
</Provider>
</div>
)
}
}

3.后代节点

import React,{Component} from'react'
import {Consumer} from './store'
export default class Son1 extends Component{
constructor(props){
super(props)
this.state={
name:'uuu'
}
}
render(){
return(
<div>
<Consumer>
{
value=>{
<div>{value.name}</div>
}
}
</Consumer>
</div>
)
}
}

兄弟节点通信

  • 一个子物体挂在事件
  • 另一个挂在属性
  • 通过实践改变属性,来改变另一个组件接受的内容

    祖先
state={
count:1,
setCount:()=>{
this.setState(state=>{
return{
count:++state.count
}
})
}
}
render(){
let {count,setCount} = this.state
return(
<div>
<Provider value={{count,setCount}}>
<Cmp1></Cmp1>
<Cmp2></Cmp2>
</Provider>
</div>
)
}

兄弟Cmp2

import React, { Component ,createContext} from 'react'

export default class Cmp2 extends Component {
// 只得到了默认数据 --> 没有包裹在Provider组件中
static contextType = createContext render() {
return (
<div>
<button onClick={this.setCount.bind(this)}>自增数据</button>
</div>
)
}
setCount() {
this.context.setCount()
}
}

兄弟Cmp1

<Consumer>
{
value => <h3>{value.count}</h3>
}
</Consumer>

react之组建通信的更多相关文章

  1. React 组件间通信介绍

    React 组件间通信方式简介 React 组件间通信主要分为以下四种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面对这四种情况分别进行介绍:   父组件向子 ...

  2. vue 和 react 组件间通信方法对比

    vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...

  3. React 组件之间通信 All in One

    React 组件之间通信 All in One 组件间通信 1. 父子组件之间通信 props 2. 兄弟组件之间通信 3. 跨多层级的组件之间通信 Context API https://react ...

  4. React之组件通信

    组件通信无外乎,下面这三种父子组件,子父组件,平行组件(也叫兄弟组件)间的数据传输.下面我们来分别说一下: 父子组件: var Demo=React.createClass({ getInitialS ...

  5. angular,vue,react的父子通信

    父子通信 父传子 vue: 父组件:<child :msg="datamsg" ></child> //子组件的msg属性上加数据,datamsg是数据 子 ...

  6. React组件间通信

    众所周知,ReactJS组件与组件之间的通信是一个难点.在React实际开发中,父子组件之间的传值是比较常见的,刚入门的小伙伴很容易被组件之间的通信绕懵. 今天花了点时间总结了一下React父子组件之 ...

  7. 【React Native】在原生和React Native间通信(RN调用原生)

    一.从React Native中调用原生方法(原生模块) 原生模块是JS中也可以使用的Objective-C类.一般来说这样的每一个模块的实例都是在每一次通过JS bridge通信时创建的.他们可以导 ...

  8. React中组件通信的几种方式

    https://segmentfault.com/a/1190000012361461 需要组件之进行通信的几种情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 ...

  9. React组件间通信-sub/pub机制

    React生命周期第二个demo演示了兄弟组件的通信,需要通过父组件,比较麻烦:下面介绍sub/pub机制来事项组件间通信. 1.导包 npm i pubsub-js 2.UserSearch.jsx ...

  10. 5.React中组件通信问题

    1.父组件传递值给子组件 想必这种大家都是知道的吧!都想到了用我们react中的props,那么我在这简单的写了小demo,请看父组件 class Parent extends Component{ ...

随机推荐

  1. android性能优化练习:过度绘制

    练习:https://github.com/zhangbz/AndroidUIPorblems 查看过度绘制 在开发者选项中开启"调试GPU过度绘制" 判断标准 无色:没有过度绘制 ...

  2. div四个边框分别设置阴影样式

    对于div边框的阴影一直没有很好地理解,也一直不明白怎么给四个边框分别设置阴影.昨天项目中碰到了这个问题,就认真想了一下,在此总结一二. 首先,还是从官方解释说起. 网上的解释通常都是什么水平阴影长度 ...

  3. FMDB 多线程使用

    在App中保持一个FMDatabaseQueue的实例,并在所有的线程中都只使用这一个实例. [FMDatabaseQueue databaseQueueWithPath:path]; FMDatab ...

  4. Mac下Nginx环境配置

    环境信息: Mac OS X 10.11.1 Homebrew  0.9.5 正文 一.安装 Nginx 终端执行: brew search nginx brew install nginx 当前版本 ...

  5. javascript的模块化解读

    AMD是RequireJS在推广过程中对模块定义的规范化产出. 异步加载模块,依赖前置,提前执行. Define定义模块 define(['require','foo'],function(){ret ...

  6. BZOJ1211: [HNOI2004]树的计数

    1211: [HNOI2004]树的计数 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1245  Solved: 383[Submit][Statu ...

  7. Three Swaps DFS

    E. Three Swaps time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  8. H5编辑器核心算法和思想-遁地龙卷风

    代码和特性在chrome49下测试有效. 文本渲染的本质是对文本节点的渲染,通过浏览器内置的对象Range可以获得选择的起始点.与终止点   var range = getRangeObject(); ...

  9. mysql的基础知识

    一.存储引擎 mysql> show engines; +--------------------+---------+------------------------------------- ...

  10. 【转】Caffe的solver文件配置

    http://blog.csdn.net/czp0322/article/details/52161759 solver.prototxt 今天在做FCN实验的时候,发现solver.prototxt ...