这篇文章将还是通过实例的方式记录一下 react 中组件之间的通信方式,在 React 中,需要组件通信的情况一般有以下几种:
React 中采用数据单向流动的方式,父组件向子组件传递数据也是很常见的情况,父组件通过 props 向子组件传递数据
// 父组件
class App extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<Child name='tadpole' />
)
}
}
// 子组件
function Child(props) {
return (
<div>{props.name}</div>
)
}
利用自定义事件,触发回调
// 父组件
class App extends React.Component {
constructor(props) {
super(props)
this.state = {data: ''}
}
// 自定义的回调事件
childValue = data => {
this.setState({data})
}
render() {
return (
<div>
子组件传递过来的值:{this.state.data}
<Child transferValue={this.childValue}/>
</div>
)
}
}
// 子组件
class Child extends React.Component {
constructor(props) {
super(props)
this.state = {data: ''}
}
valueChange = data => {
// 保证子组件中的值和传递过去的值一致
this.setState({
data: data.target.value
})
// 触发回调 传递给父组件
this.props.transferValue(data.target.value)
}
render() {
return (
<div>
子组件: <input vlaue={this.state.data} onChange={this.valueChange} />
</div>
)
}
}
React 中遵循数据单向流动(自上而下)的规则,其实我们完全可以通过每级组件传递 props 的方式来实现跨级通信的目的。但是,在这个过程中,有些组件是不需要使用上级传递过来的 props 的,这种操作无疑是显得多余的,这个时候就引入了 Context
Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法,它设计目的就是为了共享那些对于一个组件树而言是“全局”的数据
// 创建一个Context对象
const InitContext = React.createContext()
class App extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
// 使用一个 Provider 来将当前的 context 传递给以下的组件树
<InitContext.Provider value='tadpole'>
<Child />
</InitContext.Provider>
)
}
}
function Child(props) {
return (
<LastComponent />
)
}
class LastComponent extends React.Component {
// 指定 contextType 读取当前的 context
static contextType = InitContext
render() {
return (
<div>name: {this.context}</div>
)
}
}
使用 Context 的注意点:
更多参考 Context API
非嵌套组件通信的思路一般有以下几种:
一般情况下,第一种方式找到共同的父组件可能存在很多级的情况,不是很友好,第二种方式对于后期维护或者说对于组件的可复用性不是很友好,所以,我们试一下自定义事件这种方式
首先,我们需要一个 events 这个包
npm install events -S
通过注册、触发事件来实现组件通信
import { EventEmitter } from 'events'
const emitter = new EventEmitter()
// 组件A
class ComponentA extends React.Component {
constructor(props) {
super(props)
this.state = {msg: ''}
}
componentDidMount() {
// 组件挂载完毕的时候注册事件
this.eventEmitter = emitter.addListener('outputValue', msg => {
this.setState({msg})
})
}
componentWillUnMount() {
// 组件销毁之前移除事件
emitter.removeListener(this.eventEmitter)
}
render() {
return (
<div>
这是组件A
<div>组件B传递过来的数据:{ this.state.msg }</div>
</div>
)
}
}
// 组件B
class ComponentB extends React.Component {
constructor(props) {
super(props)
this.state = {value: ''}
}
valueChange = data => {
this.setState({
value: data.target.value
})
}
btnClick = () => {
// 触发自定义事件
emitter.emit('outputValue', this.state.value)
}
render() {
return (
<div>
这是组件B
<input value={this.state.value} onChange={this.valueChange}></input>
<button onClick={this.btnClick}>点击我传递信息</button>
</div>
)
}
}
以上就是 React 组件之间通信的常用方式,其实在我们实践的过程中肯定也发现了有些方式可以用于多种组件关系的通信,关键在于使用最合适的方式。当然,对于一些比较复杂的组件通信来说,我们也可以选择使用状态管理工具,比如 flux 、redux 等,使我们的组件通信更加容易、更好管理
每个 Vue 实例都实现了事件接口vm.$emit( event, arg ) 触发当前实例上的事件;vm.$on( event, fn )监听event事件后运行。实例说明:Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信,Vuejs 用$emit与$on来进行跨页面之间的数据传输通信
两个浏览器窗口间通信:一个窗口更新localStorage,另一个窗口监听window对象的storage事件来实现通信;所有的WebSocket都监听同一个服务器地址,利用send发送消息,利用onmessage获取消息的变化;借助iframe 或 window.open;HTML5 中的 Web Worker 可以分为两种不同线程类型
在浏览器中,我们可以同时打开多个Tab页,每个Tab页可以粗略理解为一个“独立”的运行环境,即使是全局对象也不会在多个Tab间共享。然而有些时候,我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。
使用Vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下。父子组件之间的通信props和$emit 父组件通过props将数据下发给props
前端开发过程中,总是避免不了要进行前端标签页之间的通信,最经典的例子莫过于音乐播放网站中,当第一次点击播放列表中的歌曲时,它会打开一个新的标签页进行播放,而当在列表中再次点击歌曲播放时
我们的项目是基于 ThinkJS + Vue 开发的,最近实现了一个多端实时同步数据的功能,所以想写一篇文章来介绍下如何在 ThinkJS 的项目中利用 WebSocket 实现多端的实时通信。ThinkJS 是基于 Koa 2 开发的企业级 Node.js 服务端框架
其实服务器的处理和客户端大同小异,分三个逻辑分支:检索成功,用检索到的Socket来处理接收报文;检索失败,服务器侦听(listen)目的端口,创建全新的Socket服务客户;检索失败,服务器没有侦听目的端口,丢弃处理
如何实现两个组件之间的双向传递呢?即,在父组件中修改了值,子组件会立即更新。在子组件中修改了值,父组件中立即更新。vue中有一个很神奇的东西叫v-model,它可以完成我们的需求。
vue项目的一大亮点就是组件化。使用组件可以极大地提高项目中代码的复用率,减少代码量。但是使用组件最大的难点就是父子组件之间的通信。父组件通过$refs调用子组件的方法。 以上就是父子组件通信的方式
在微服务架构的世界中,我们通过一系列服务构建应用。集合中的每项服务都符合以下标准:松散耦合、可维护和可测试、可以独立部署,微服务架构中的每个服务都解决了应用中的业务问题
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!