React组件通讯

最新推荐文章于 2022-11-16 18:23:54 发布
最新推荐文章于 2022-11-16 18:23:54 发布
阅读量65 收藏
点赞数
文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44768794/article/details/118149151
版权

组件通讯介绍

组件是一个独立且封闭的单元，默认情况下，组件只能进行内部的数据传递。在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通，这就叫组件通讯

组件的props

组件是封闭的，要接收外部数据需要通过props
props的作用：接收传递给组件的数据
传递数据：给组件标签添加属性
接收数据：函数组件通过参数props接收数据，类组件通过this.props接收数据

2.1 函数组件的组件通讯

通过参数props接收数据

// 2.接收数据
const Hello = props => {
  console.log(props);
  return (
    <div>
      <h1>props: {props.name} {props.age} </h1>
    </div>
  )
}
// 1.传递数据
// 将要传递的数据当做属性来写
ReactDOM.render(<Hello name='jack' age={19}/>, document.getElementById('root'))

在这里插入图片描述

2.2 类组件的组件通讯

通过this.props接收数据

// 类组件的组件通讯
class Hello extends React.Component {
  render() {
    console.log(this.props);
    return (
      <div>
        <h1>props: {this.props.name} {this.props.age} </h1>
      </div>
    )
  }

}
// 1.传递数据
ReactDOM.render(<Hello name='rose' age={19} />, document.getElementById('root'))

2.3 props的特点

可以传递任意类型的数据

函数对象，JSX都可以传递

// 2.接收数据
const Hello = props => {
  props.fn()
  return (
    <div>
      <h1>props: {props.name} {props.age}  </h1><br/>
      <h2>{props.colors}</h2><br/>
      <h2>{props.tag}</h2>
    </div>
  )
}

// }
// 1.传递数据
ReactDOM.render(
  <Hello
    name='rose'
    age={19}
    fn={() => console.log('这是一个函数对象')}
    colors={['red','pink','blue']}
    tag={<p>这是一个标签</p>}
  />,
  document.getElementById('root'))

在这里插入图片描述

props是只读的对象，只能读取属性的值，不能进行修改

给props.name赋值

  props.name = 'tom'

报错
在这里插入图片描述

使用类组件时，如果写了构造函数，应该将props传给super()

否则，将无法在构造函数中获取到props！！！

未传递props

class Hello extends React.Component {
  constructor() {
    super() 
    console.log(this.props);
  }
  render() {
    // console.log(this.props);
    return (
      <div>
        <h1>props: {this.props.name} {this.props.age} </h1>
      </div>
    )
  }
}

ReactDOM.render( <Hello name='rose' age={19} />, document.getElementById('root'))

在这里插入图片描述
传递props 推荐使用

class Hello extends React.Component {
  constructor(props) {
    super(props) 
    console.log(props);
  }
  render() {
    // console.log(this.props);
    return (
      <div>
        <h1>props: {this.props.name} {this.props.age} </h1>
      </div>
    )
  }
}

ReactDOM.render( <Hello name='rose' age={19} />, document.getElementById('root'))

在这里插入图片描述

组件通讯的三种方式

3.1 父组件传子组件

步骤
1.父组件提供要传递的state数据
2.给子组件标签添加属性，值为state中的数据
3.子组件中通过props接收父组件中传递来的数据

class Parent extends React.Component {
  state = {
    lastName: '王'
  }

  render() {
    return (
      <div className='parent'>
        父组件：
        <Child name={this.state.lastName}></Child>
      </div>
    )
  }
}

// 子组件
const Child = props => {
  console.log('子组件：',props);
  return (
    <div className="child">
      <p>子组件,接收到父组件的数据: {props.name}</p>
    </div>
  )
}
ReactDOM.render(<Parent />, document.getElementById('root'))

在这里插入图片描述

3.2 子组件传父组件

利用回调函数，父组件提供回调函数，子组件调用，将要传递的数据作为回调函数的参数

1.父组件提供函数getChildMsg来接收数据
2.子组件调用getChildMsg传递函数
3.调用父组件中的方法getMsg 将参数传递进去
4 父组件接收数据

// 子组件传父组件
class Parent extends React.Component {
  state = {
    parentMsg: ''
  }
  getChildMsg = msg => {
    console.log('接收到子组件的数据', msg);
    this.setState({
      parentMsg: msg
    })
  }
  render() {
    return (
      <div>
        父组件： {this.state.parentMsg}
        <Child getMsg={this.getChildMsg}/>
      </div>
    )
  }
}

// 子组件
class Child extends React.Component {
  state = { 
    msg: 'study'
   }
  handleClick = () => {
    this.props.getMsg(this.state.msg)
  }
  // 子组件通过props调用回调函数
  render() {
    return (
      <div className="child">
        子组件：<button onClick={this.handleClick}>点击，给子组件传递数据</button>
      </div>
    )
  }
}

ReactDOM.render(<Parent/>, document.getElementById('root'))

在这里插入图片描述

3.3 兄弟组件

1.将共享状态提升到最近的公共父组件中，有公共父组件管理这个状态
2.思想：状态提升
3.公共父组件职责：1.提供共享状态 2.提供操作共享状态的方法
4.要通讯的子组件只需通过props接收状态或操作状态的方法

// 父组件
class Counter extends React.Component {
  // super()
  state = {
    count: 0
  }
  onIncrement = () => {
    this.setState({
      count: this.state.count + 1
    })
  }
  render() {
    return (
    <div>
      {/* 父组件中的状态通过属性传递给子组件 */}
      <Child1 count={this.state.count}/>
      <Child2 onIncrement={this.onIncrement}/>
    </div>
    )
  }
}
// 子组件中通过props接收数据
const Child1 = (props) => {
  return <h1>计数器：{props.count}</h1>
}
const Child2 = (props) => {
  return <button onClick={() => props.onIncrement()}>+1</button>
}

ReactDOM.render(<Counter/>, document.getElementById('root'))

在这里插入图片描述

Context

如果两个组件嵌套多层，可以使用Context实现组件通讯
Context提供两个组件：Provider Consumer
Provider：提供数据
Consumer：消费数据


const {Provider, Consumer} = React.createContext()
class Counter extends React.Component {

  render() {
    return (
      <Provider value="rose">
        <div className='Counter'>
          <Child1 />
        </div>
      </Provider>
    )
  }
}
// 子组件中通过props接收数据
const Child1 = (props) => {
  return (
    <div className='Child1'>
      <Child2 />
    </div>
  )
}
const Child2 = (props) => {
  return (
    <div className='Child2'>
      <Child3 />
    </div>
  )
}
const Child3 = (props) => {
  return (
    <div className='Child3'>
      <Child4 />
    </div>
  )
}
const Child4 = (props) => {
  return (
    <Consumer>{data => <p>我是用Context拿来的值---{data}</p>}</Consumer>
  )
}
ReactDOM.render(<Counter />, document.getElementById('root'))

在这里插入图片描述

props深入

children属性

文本节点

const Parent = props => {
  console.log(props);
  return (
    <div>
      <h1>我是你的父组件 {props.children}</h1>
    </div>
  )
}

ReactDOM.render(<Parent>我是你的子组件--文本版本</Parent>, document.getElementById('root'))

在这里插入图片描述

JSX

const Parent = props => {
  console.log(props);
  return (
    <div>
      <h1>我是你的父组件 {props.children}</h1>
    </div>
  )
}

ReactDOM.render(<Parent><p>我是你的子组件--JSX版本</p></Parent>, document.getElementById('root'))

在这里插入图片描述

组件

const Parent = props => {
  console.log(props);
  return (
    <div>
      <h1>我是你的父组件 {props.children}</h1>
    </div>
  )
}
const Children = props => {
  return (
    <div className='Children'>
      <p>我是你的子组件--组件版本</p>
    </div>
  )
}
ReactDOM.render(<Parent>我是你的子组件--文本版本</Parent>, document.getElementById('root'))

在这里插入图片描述

props校验

对于组件来说，props是外来的，无法保证组件使用者传入什么格式的数据
==props校验：==允许在创建组件的时候，就指定props的类型、格式等
作用：捕获使用组件时因为props导致的错误，给出明确错误提示，增加代码的健壮性

步骤
1.安装prop-types （yarn add prop-types）
2.引入prop-types安装包 （import PropTypes from ‘prop-types’）
3.使用 组件名.propTypes={} 来给组件的props添加校验规则
4.校验规则通过propTypes指定

const App = props => {
  // 拿到子组件的属性
  const arr = props.colors
  const lis = arr.map((item, index) => <li key={index}>{item}</li>)

  return <ul>{lis}</ul>
}

App.propTypes = {
  colors: PropTypes.array
}

ReactDOM.render(<App colors = {['red','yello','pink']}></App>, document.getElementById('root'))

在这里插入图片描述

在这里插入图片描述

组件的生命周期

声明周期的三个阶段

创建时（挂载阶段）

执行时机：组件创建时（页面加载时）
执行顺序：constructor() -> render() -> componentDidMount

钩子函数触发时机作用
constructor创建组件时，最先执行1.初始化state 2.为事件处理程序绑定this
render每次组件调用时都会触发渲染UI（不能调用setState()）
componentDidMount组件挂载（完成渲染）后1.发送网络请求 2.DOM操作

在这里插入图片描述

更新阶段

执行时机：1.New props 组件接收到新的属性 2.setState() 3.forceUpdate()
以上任意一种变化，都会导致组件重新渲染
执行顺序： render() -> componentDidUpdate() 先渲染完成，再去渲染构造函数

钩子函数触发时机作用
render每次组件调用时都会触发渲染UI（不能调用setState()）
componentDidMount组件挂载（完成渲染）后1.发送网络请求 2.DOM操作 3.要用setSate 和 Ajax请求要放在if中

卸载阶段

执行时机：组件从页面中消失时

钩子函数触发时机作用
componentWillUMount组件卸载（从页面中消失）执行清理工作(清理定时器等)
cb++
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react回调函数_react源码个人笔记-版本17.0.0（笔记02修改）
weixin_36086032的博客
01-19 500
React 初始化的函数函数为ReactDom.render()， 进行更新有三种方式 ReactDom.render(), setState, forceUpdate 等。// render 定义（1）// ReactDom 执行render 的方法 // 代码位置： src/react/packages/react-dom/src/client/ReactDOMLegacy.js // 目的：...
手把手教你从零到有学会React组件通讯
CSDN凉宸
05-25 526
组件通讯介绍 组件是独立且封闭的单元，默认只能使用组件自己的数据，在组件化过程中，我们将一个完整的功能拆分为多个组件，以便于更好的完成整个应用的功能。在这个过程中，多个组件之间不可避免的要使用共享一些数据，实现这些功能，我们就需要打破组件的独立封闭性，让其与外界进行沟通，这个过程就算组件通讯 组件的props 组件是封闭性的，要接收外部传来的数据就要通过props实现 props作用：接收传递给组件的数据 传递数据：给组件标签添加自定义属性 <Title name="Tom" age={19}
[译] React 组件中绑定回调
weixin_34284188的博客
08-01 123
原文：Binding callbacks in React components 在组件中给事件绑定处理函数是很常见的，比如说每当用户点击一个button的时候使用console.log打印一些东西。 class DankButton extends React.Component { render() { return &l...
React事件回调总结
白开水的博客
12-26 588
React 事件使用onXxxx的方式进行事件绑定 SyntheticEvent 合成事件，.nativeEvent才是真实的dom事件对象 如果直接使用组件中定义的成员方法作为事件回调，此时回调中的this是undefined 可以使用以下方法解决这个问题 在组件的构造函数中bind this 事件回调使用组件的实例方法，同时实例方法要使用箭头函数定义，这样就捆绑了this 在事件回调处使用箭头函数调用，用以添加事件回调参数 ...
【React】组件进阶（5）
weixin_49174517的博客
11-16 1444
组件的生命周期有利于理解组件的运行方式，完成复杂的组件功能、分析组件错误的原因等组件从创建到挂载到页面中运行，再到组件不用时卸载的过程生命周期的每个阶段都有对应的方法调用，这些方法就是生命周期的钩子函数让开发人员可以在不同阶段操作组件只有 类组件 才有生命周期当组件之间有共同的 state 时，但展示的 UI 不同时，可以使用该模式，为了实现状态逻辑复用并不是该模式叫 render props 就必须使用名为 render 的 prop，可以使用任意名称的 prop。
详解react组件通讯方式(多种)
10-15
主要介绍了详解react组件通讯方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
react 父子组件之间通讯props
10-18
主要介绍了react 父子组件之间通讯props，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react开发教程之React 组件之间的通信方式
12-10
父子组件通讯 通讯手段 这是最常见的通信方式，父组件只需要将子组件需要的props传给子组件，子组件直接通过this.props来使用。 通讯内容 更多要提的是如何合理的设置子组件的props，要想将子组件设计成一个复用...
React回调函数两种常用方式
Hiroshi's
09-20 2919
1. 回调是高阶函数，需要返回一个函数 2. 匿名函数，不用高阶
react将函数作为参数传递然后回调
yuyeqianhen的博客
06-01 2053
父组件 import React, { Component } from 'react'; import DailyTrainyLeft from './DailyTrainLeft'; import DailyTrainRight from './DailyTrainRight'; /** * 日常训练模块 */ export default class DailyTrain extends Component { constructor(props) { super(props
callbackfunc:React回调函数
05-06
<<<<<<< HEAD 回调函数 React回调函数 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 而是将所有配置文件和
react回调函数_React系列五 组件化开发（一）
weixin_28738397的博客
01-24 610
现在可以说整个的大前端开发都是组件化的天下，无论从三大框架(Vue、React、Angular)，还是跨平台方案的Flutter，甚至是移动端都在转向组件化开发。所以，学习组件化最重要的是它的思想，每个框架或者平台可能实现方法不同，但是思想都是一样的。一. 认识组件化开发 1.1. 什么是组件化？人面对复杂问题的处理方式：任何一个人处理信息的逻辑能力都是有限的所以，当面对一个非常复杂的问...
react中什么是回调函数_在React中使用去抖动的回调
weixin_26735933的博客
09-05 401
react中什么是回调函数Debouncing is a really useful tool that software engineers should be familiar with. Today, I will be creating a React hook that should hopefully solve most of your debouncing needs. 防弹跳是软...
vb.net的事件触发机制_过一遍react事件机制源码
weixin_39631350的博客
11-21 184
react有一套复杂的事件机制，一句话总结react在web环境下的事件机制就是运用事件代理让document担当事件监听的职务, 当事件触发时找到react组件中绑定的所有事件回调函数并依次执行。那么，react是怎么在document上设置对应的事件监听函数，是怎么在事件触发时执行绑定的各种回调函数的呢？这篇文章就是带大家把react在web上的事件机制的代码细细捋一遍。（本文章以react　...
react回调函数_不要过度使用React.useCallback()
weixin_29243279的博客
01-30 1137
我博客的一位读者联系到我，提出了一个有趣的问题。他说，他的队友不管在什么情况下，都会把每一个回调函数封装在 useCallback() 里面。import React, { useCallback } from 'react';function MyComponent() { const handleClick = useCallback(() => { // handle the ...
react useCallback的用法
热门推荐
秋来九月八
11-23 3万+
useCallback是react中比较重要的一个hook，用来返回一个函数，在父子组件传参或者通用函数封装中,起到举足轻重的作用。useCallback 还可以用于优化函数的性能。它的主要作用是缓存一个回调函数，以确保在组件重新渲染时不会创建新的回调函数，从而减少不必要的性能开销。useCallback 通常与 React.memo 或 shouldComponentUpdate 一起使用，以避免不必要的组件重新渲染。
react 子传参父_react 子组件回调父组件函数怎么传递参数啊？
weixin_42523104的博客
01-14 718
下面是一个简单的demo:版本一：import React from 'react';class GroupItem extends React.Component{constructor(props) {super(props);this.state = {groupListData : props.groupListData,delGroup : props.delGroup,editGrou...
详解React中setState回调函数
weixin_34217711的博客
11-20 3007
使用React过程中，中可以使用this.state来访问需要的某些状态，但是需要更新或者修改state时，一般而言，我们都会使用setState()函数，从而达到更新state的目的，setState()函数执行会触发页面重新渲染UI。但是呢，setState是异步的！这就难受。 1. 语法： setState(updater[, callback]) // 复制代码updater是要改变...
react-native回调函数的写法
halo1416的博客
08-24 5486
react-native中使用回调函数的频率是比较高的，特别在子组件传值给父组件时显得极其重要而且也是比较好用的一个方式！（父组件传值给子组件时使用props）。 这里记录下回调函数的写法：函数方式和变量方式 函数方式： 传递回调的函数和回调函数本身是两个不一样的（分别写着两个函数里面） 步骤： 1. 父组件中定义回调函数 this.forceUpdate() ：强制刷新界面，在p...
react 组件之间的通讯
最新发布
05-11
React 组件之间的通讯可以通过以下几种方式实现： 1. Props: 父组件可以通过 props 把数据传递给子组件，子组件通过 this.props 访问父组件传递的数据。 2. Context: 父组件可以通过 Context 把数据传递给子组件，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值