React中父子组件通信详解

目录
  • 父组件向子组件通信
  • 存在期

父组件向子组件通信

在父组件中,为子组件添加属性数据,即可实现父组件向子组件通信。传递的数据可以分成两类

子组件是作为属性来接收这些数据的

第一类就是数据:变量,对象,属性数据,状态数据等等

这些数据发生改变,子组件接收的属性数据就发生了改变。

第二类就是方法:父组件可以向子组件传递属性方法,子组件接收方法,并可以在组件内执行,有两种执行方式

注意:父组件传给子组件的方法是不能执行的,执行了相当于将方法的返回值传递给子组件。

第一种 作为事件回调函数执行

参数默认就是事件对象

this默认指向undefined,因此我们要改变this指向

如果在子组件中改变,

this指向子组件

bind方式传递的参数在事件对象之前

如果在父组件中改变(​​工作中常用​​)

this指向父组件了

此时子组件不论如何绑定,都指向父组件

bind方式传递的参数会在子组件传递的参数之前

参数顺序:父组件参数,子组件参数,事件对象

第二种 在子组件方法中执行

默认没有参数,使用什么可以传递什么

this默认指向子组件属性对象(this.props)

此时我们要在父组件中绑定this,就指向了父组件

我们既可以访问父组件实例化对象,也可以访问子组件实例化对象,

我们既可以在子组件中传递参数,也可以在父组件中传递参数

有一种简写方式(​​工作中常用​​)

直接在事件回调函数中,定义箭头函数,并执行父组件方法:

// 定义父组件slider
class Slider extends Component {
// 构造函数
constructor(props) {
super(props);
// 初始化状态
this.state = {
title: '返回顶部'
}
}
// 父组件方法
parentMethod() {
console.log(this, arguments)
}
render() {
return (
<div className="slider">
{/*字符串*/}
{/*<GoTop text="网址导航"></GoTop>*/}
{/*属性数据*/}
{/*<GoTop text={this.props.title}></GoTop>*/}
{/*状态数据*/}
{/*<GoTop text={this.state.title}></GoTop>*/}
{/*传递方法*/}
<GoTop text={this.state.title} method={this.parentMethod.bind(this, 200, 'parent')}></GoTop>
{/*<GoTop text={this.state.title} method={this.parentMethod}></GoTop>*/}
</div>
)
}
}
// 定义组件
class GoTop extends Component {
// 定义方法
childMethod(e) {
// 执行父组件方法
this.props.method(200, e);
}
// 4 渲染虚拟DOM
render() {
// console.log(this.props)
// 绑定事件
// return <span onClick={this.props.method.bind(this, 100, 'child')}>{this.props.text}</span>
// 在子组件方法中执行
// return <span onClick={this.childMethod.bind(this)}>{this.props.text}</span>
// 简便写法
return <span onClick={e => this.props.method(e)}>{this.props.text}</span>
}
}

存在期

组件创建完成,一旦属性数据或者状态数据发生改变,组件就会进入存在期,共分五个阶段

第一个阶段 组件即将接收新的属性数据

componnetWillReceiveProps方法

第一个参数表示​​新的​​属性数据

组件实例化对象上的是旧的属性数据

数据还没有更新,

​只有当属性数据发生改变,才会执行该方法,状态数据改变不会执行​​,直接进入第二个阶段

作用:用属性数据去更新状态数据,实现数据由外部流入内部

第二个阶段 组件是否应该更新

shouldComponentUpdate方法

第一个参数表示​​新的​​属性数据

第二个参数表示​​新的​​状态数据

组件实例化对象上的是旧的属性数据

组件实例化对象上的是旧的状态数据

必须有返回值,表示是否可以更新

true 可以更新

false 不能更新

工作中,我们常常比较

参数中的属性数据是否与组件实例化对象中属性数据是否不相等,或者

参数中的状态数据是否与组件实例化对象中状态数据是否不相等

作用:启动更新优化的作用,常常在高频事件中使用。(类似节流作用)

第三个阶段 组件即将更新

componentWillUpdate方法:

  • 第一个参数表示​​新的​​属性数据
  • 第二个参数表示​​新的​​状态数据

组件实例化对象上的是旧的属性数据

组件实例化对象上的是旧的状态数据

说明此时数据仍然没有更新,当该方法执行完毕,数据才会更新

作用:更新插件,预处理数据等等,

注意:不要在第二个阶段和第三个阶段去更新属性数据以及装填数据

第四个阶段 组件渲染视图

render 方法

没有参数,但是此时数据已经更新了

  • 组件实例化对象上的是​​新的​​属性数据
  • 组件实例化对象上的是​​新的​​状态数据

所以我们在渲染虚拟DOM的时候,可以使用这些新的数据了

此时虚拟DOM还没有更新,方法执行完毕,虚拟DOM才更新

第五个阶段 组件更新完成

componentDidUpdate方法:

  • 第一个参数是旧的属性数据
  • 第二个参数是旧的状态数据

组件实例化对象上的是​​新的​​属性数据

组件实例化对象上的是​​新的​​状态数据

此时虚拟DOM也已经更新完成了

组件更新完成了,我们可以在这个阶段发送请求,处理事件等等,该方法执行完毕,并没有说明存在期的结束,存在期仍然继续,只是一次更新的结束,所有组件生命周期方法this都指向组件实例化对象

// 定义组件
class GoTop extends Component {
// 构造函数
constructor(props) {
super(props);
this.state = {
text: props.text
}
}
// 存在期五个阶段
// 1 组件即将接收新的属性数据
componentWillReceiveProps(newProps) {
console.log(111, 'componentWillRecieveProps', newProps, this.props)
// 将属性数据,存储到状态中
this.setState({ text: newProps.text })
}
// 2 组件是否更新
shouldComponentUpdate(newProps, newState) {
console.log(222, 'shouldComponentUpdate', newProps, this.props, 'state', newState, this.state)
// 是否可以更新
// return true;
// 根据属性或者状态的改变来优化
return newProps.text !== this.props.text || newState.text !== this.state.text
}
// 3 组件即将更新
componentWillUpdate(newProps, newState) {
console.log(333, 'componentWillUpdate', newProps, this.props, 'state', newState, this.state, findDOMNode(this).innerHTML)
}
// 4 渲染虚拟DOM
render() {
console.log(444, 'render', this.props, 'state', this.state)
// return <span>{this.props.text}</span>
return <span>{this.state.text}</span>
}
// 5 组件更新完成
componentDidUpdate(oldProps, oldState) {
console.log(555, 'componentDidUpdate', oldProps, this.props, 'state', oldState, this.state, findDOMNode(this).innerHTML)
}
// 组件创建完成
componentDidMount() {
window.onscroll = () => {
// 移动超过300显示返回顶部
if (window.scrollY > 300) {
this.setState({
text: '返回顶部'
})
} else {
// 显示头条新闻
this.setState({
text: '头条新闻'
})
}
// console.log(window.scrollY)
}
}
}

到此这篇关于React中父子组件通信详解的文章就介绍到这了,更多相关React组件通信内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 详解React hooks组件通信方法

    目录 一.前言 二.父子组件通信 1)父组件传值给子组件 2)子组件传值给父组件 3)跨组件传值(父传孙子组件) 一.前言 组件通信是React中的一个重要的知识点,下面列举一下 react hooks中常用的父子.跨组件通信的方法 二.父子组件通信 1)父组件传值给子组件 子组件代码: //子组件 const Child = ({ param1, param2 }) => { return <>父组件传递的参数:{param1},{param2}</> } param1.p

  • React 实现爷孙组件间相互通信

    目录 前言 爷孙组件间通信 前言 最近在学习React,给大家总结下跨组件通信中,爷孙组件之间怎么相互通信.简单明了上代码直接一把梭,不多解释. 爷孙组件间通信 案例如下: 代码: //跨组件通信 import React, { Component } from 'react' //创建context 给初始值 const UserMessage = React.createContext({ nickName: 'yyy', level: 1 }) export default class T

  • React组件间通信的三种方法(简单易用)

    目录 一.父子组件通信 二.跨级组件通信 1.逐层传值 2.跨级传值 三.兄弟(无嵌套)组件通信 四.路由传值 五.Redux React知识中一个主要内容便是组件之间的通信,以下列举几种常用的组件通信方式,结合实例,通俗易懂,建议收藏. 一.父子组件通信 原理:父组件通过props(与vue中的props区分开)向子组件通信,子组件通过回调事件与父组件通信. 首先,先创建一个父组件Parent.js跟子组件Children.js,二者的关系为直接父子关系. Parent.js父组件如下,给父组

  • 详解React中组件之间通信的方式

    一.是什么 我们将组件间通信可以拆分为两个词: 组件 通信 回顾Vue系列的文章,组件是vue中最强大的功能之一,同样组件化是React的核心思想 相比vue,React的组件更加灵活和多样,按照不同的方式可以分成很多类型的组件 而通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的,广义上,任何信息的交通都是通信 组件间通信即指组件通过某种方式来传递信息以达到某个目的 二.如何通信 组件传递的方式有很多种,根据传送者和接收者可以分为如下: 父组件向子组件传递 子组件向父组件传

  • React组件通信之路由传参(react-router-dom)

    目录 最近在学习react,现在的工作中使用的是vue,在学习的过程中对两者进行比较,加深理解. 以下是react中的一小部分知识点,我个人觉得也是比较常用的知识点,react组件通信的其中一种方式--路由传参(react组件通信的方式有多种,如props.事件回调.context.router.redux.缓存等等).现在单页面SPA应用的比较广泛,在不刷新整个页面进行部分页面的跳转,使用路由跳转便在所难免,那么react路由除了进行页面之间的跳转,还有很大一个作用就是进行页面或者组件切换时传

  • React父子组件传值(组件通信)的实现方法

    目录 1.父组件传值子组件 2.子组件传值父组件 3.兄弟组件传值 1.父组件传值子组件 在引用子组件的时候传递,相当于一个属性,例如:在子组件内通过porps.param获取到这个param的值. 父组件向子组件传值,通过props,将父组件的state传递给了子组件. 父组件代码片段: constructor(props){ super(props) this.state={ message:"i am from parent" } } render(){ return( <

  • React中父子组件通信详解

    目录 父组件向子组件通信 存在期 父组件向子组件通信 在父组件中,为子组件添加属性数据,即可实现父组件向子组件通信.传递的数据可以分成两类 子组件是作为属性来接收这些数据的 第一类就是数据:变量,对象,属性数据,状态数据等等 这些数据发生改变,子组件接收的属性数据就发生了改变. 第二类就是方法:父组件可以向子组件传递属性方法,子组件接收方法,并可以在组件内执行,有两种执行方式 注意:父组件传给子组件的方法是不能执行的,执行了相当于将方法的返回值传递给子组件. 第一种 作为事件回调函数执行 参数默

  • Vue非父子组件通信详解

    组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有下面的几句 具体如何去实现却没有很详细的说明,于是自己试着进行了实现.先看下简单的通信效果: 就是点击了一个组件,另一个组件的数字递加. html如下: <div id="app"> <component-a></component-a> <com

  • vue2利用Bus.js如何实现非父子组件通信详解

    前言 大家应该都知道,vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用props和$emit().如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,然后通过分别调用Bus事件触发和监听来实现通信和参数传递.下面话不多说了,来一起看看详细的介绍吧. Bus.js可以是这样 import Vue from 'vue' export default new Vue() 在需要通信的组件都引入Bus

  • vue3 非父子组件通信详解

    目录 第一种方法 App.vue Home.vue HomeContent.vue 数据的响应式 修改响应式Property 总结 业务场景是,不是父子组件实现通信 文件目录 第一种方法 App.vue <template> <div> <Home></Home> <button @click="addName">增加名字</button> </div> </template> <sc

  • angular父子组件通信详解

    目录 用到的api 简单的例子 person.ts 父组件 子组件 效果 总结 用到的api Input - 子组件中定义可接受的属性,可以用来父组件给子组件传递数据 Output - 子组件中定义输出的属性,该属性需要是 EventEmitter 的事件类型,用来通知父组件做出相应的操作 EventEmitter - 用在带有 @Output 指令的组件中,以同步或异步方式发出自定义事件,并通过订阅实例来为这些事件注册处理器. 简单的例子 列表渲染子组件,点击子组件通知父组件进行操作 pers

  • vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)

    vue中我们常常用到组件. 那么组件总体可以分为如下的几种关系. 父子组件, 爷孙组件, 兄弟组件. 这几种组件之间是如何通信的呢? 父子组件通信 根据vue中的文档可知, 组件的props属性用于接收父组件传递的信息. 而子组件想要向父组件传递信息, 可以使用$emit事件. 我们定义两个组件, 一个为父组件名为father, 另外一个为子组件child. 子组件通过props属性接收父组件传递的值, 这个值为fname, 是父组件的名字. 点击子组件的按钮, 触发toFather事件, 向父

  • js中自定义react数据验证组件实例详解

    我们在做前端表单提交时,经常会遇到要对表单中的数据进行校验的问题.如果用户提交的数据不合法,例如格式不正确.非数字类型.超过最大长度.是否必填项.最大值和最小值等等,我们需要在相应的地方给出提示信息.如果用户修正了数据,我们还要将提示信息隐藏起来. 有一些现成的插件可以让你非常方便地实现这一功能,如果你使用的是knockout框架,那么你可以借助于Knockout-Validation这一插件.使用起来很简单,例如我下面的这一段代码: ko.validation.locale('zh-CN');

  • React中react-redux和路由详解

    目录 观察者模式解决组件间通信问题 react-redux connect方法 Provider组件 路由 使用路由 默认路由 路由重定向 获取路由参数 路由导航 观察者模式解决组件间通信问题 使用观察者解决组件间通信,分成两步 在一个组件中,订阅消息 在另一个组件中,发布消息 发布消息之后,订阅的消息回调函数会执行,在函数中,我们修改状态,这样就可以实现组件间通信了.这就是reflux框架的实现. react-redux redux早期被设计成可以在各个框架中使用,因此在不同的框架中使用的时候

  • React中编写CSS实例详解

    目录 正文 内联样式 普通的CSS css modules css in js 样式组件 引入外部变量 默认值 引入全局样式 provider 样式继承 动态添加class 正文 目前,前端最流行的开发方式是组件化,而CSS的设计本身就不是为组件化而生的,所以在目前组件化的框架中都在需要一种合适的CSS解决方案 在组件化开发环境下的CSS,应该满足如下需求: 可以编写局部css: css具备自己的具备作用域,不会随意污染其他组件内的元素 可以编写动态的css: 可以获取当前组件的一些状态,根据状

  • React中的生命周期详解

    目录 react生命周期 常用的生命周期 不常用的生命周 完整的生命周期图 react生命周期 函数组件无生命周期,生命周期只有类组件才拥有 生命周期函数指在某一时刻组件会自动调用并执行的函数. React每个类组件都包含生命周期方法,以便于在运行过程中特定的阶段执行这些方法. 例如:我们希望在第一次将其呈现到DOM时设置一个计时器Clock.这在React中称为“安装”.我们也想在删除由产生 的DOM时清除该计时器Clock.这在React中称为“卸载”. 一般分为:挂载.更新.卸载 常用的生

随机推荐