React学习笔记(三)——React 组件通讯

1. 组件通讯-概念

了解组件通讯的意义

大致步骤:

  • 知道组件的特点
  • 知道组件通讯意义

具体内容:

  1. 组件的特点
    • 组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据
    • 在组件化过程中,通常会将一个完整的功能拆分成多个组件,以更好的完成整个应用的功能
  2. 知道组件通讯意义
    • 而在这个过程中,多个组件之间不可避免的要共享某些数据
    • 为了实现这些功能,就需要打破组件的独立封闭性,让其与外界沟通
    • 这个过程就是组件通讯

总结:

  • 组件状态是独立的,组件化之后涉及状态同步,需要进行组件通讯

2. 组件通讯-props 基本使用

能够通过 props 传递数据和接收数据

大致步骤:

  • 传递数据和接收数据的过程
  • 函数组件使用 props
  • 类组件使用 props

具体内容:

① 传递数据和接收数据的过程

  • 使用组件的时候通过属性绑定数据,在组件内部通过 props 获取即可。

② 函数组件使用 props

// 使用组件
<Hello name="jack" age="20" />
// 定义组件 props包含{name:'jack',age:'20'}
function Hello(props) {return <div>接收到数据:{props.name}</div>;
}

③ 类组件使用 props

// 使用组件
<Hello name="jack" age="20" />
// 定义组件 props包含{name:'jack',age:'20'}
class Hello extends Component {render() {return <div>接收到的数据:{this.props.age}</div>;}
}

总结:

  • props 是实现组件通讯的关键,它通过使用组件绑定属性,组件内部使用 props 来传值。

3. 组件通讯-props 注意事项

知道 props 是单项数据流只读,但是可以传递任意数据。

大致步骤:

  • 知道什么是单向数据流
  • 知道 props 可以传递什么数据

具体内容:

  1. 知道什么是单向数据流
    • 单向数据流,是从上到下的,自顶而下,数据流。
    • 好比:河流,瀑布,只能从上往下流动,上游污染下游受影响,但是下游不能影响上游。
    • 父组件传递数据给子组件,父组件更新数据子组件自动接收更新后数据,当是子组件是不能修改数据的。
  2. props 可以传递什么数据?任意
    • 字符串
    • 数字
    • 布尔
    • 数组
    • 对象
    • 函数
    • JSX (插槽)

总结:

  • props 传递数据是单向的,可以传递任意格式的数据。

4. 组件通讯-父传子方式

通过 props 将父组件的数据传递给子组件

大致步骤:

  • 父组件提供要传递的 state 数据
  • 给子组件标签添加属性,值为 state 中的数据
  • 子组件中通过 props 接收父组件中传递的数据

具体代码:

① 父组件提供要传递的 state 数据

class Parent extends React.Component {state = {money: 10000,};render() {return (<div><h1>父组件:{this.state.money}</h1></div>);}
}

② 给子组件标签添加属性,值为 state 中的数据

class Parent extends React.Component {state = {money: 10000}render() {return (<div><h1>父组件:{this.state.money}</h1>
+        <Child money={this.state.money} /></div>)}
}

③ 子组件中通过 props 接收父组件中传递的数据

function Child(props) {return (<div><h3>子组件:{props.money}</h3></div>);
}

总结:

  • 父组件声明state,在子组件标签通过属性绑定,在子组件中通过props使用。

5. 组件通讯-子传父方式

通过 props 将子组件的数据传递给父组件

大致步骤:

  • 父组件提供回调函数,通过 props 传递给子组件
  • 子组件调用 props 中的回调函数,函数可传参
  • 父组件函数的参数就是子组件传递的数据

具体代码:

① 父组件

class Parent extends React.Component {state = {money: 10000,};// 回调函数buyPhone = (price) => {this.setState({money: this.state.money - price,});};render() {const { money } = this.state;return (<div><h1>父组件:{money}</h1><Child money={money} buyPhone={this.buyPhone} /></div>);}
}

② 子组件

const Child = (props) => {const handleClick = () => {// 子组件调用父组件传递过来的回调函数props.buyPhone(5000);};return (<div><h3>子组件:{props.money}</h3><button onClick={handleClick}>买手机</button></div>);
};

总结:

  • 子组件如何传递数据给父组件?
    • 触发父组件传递的回调函数传入数据
  • 父组件如何接收子组件的数据?
    • 回调函数的参数是子组件传递的数据
  • 父组件数据更新后,传递给子组件的数据是否更新?
    • 自动更新

6. 组件通讯-兄弟组件通讯

通过状态提升思想完成兄弟组件数据通讯

大致步骤:

  • 状态提升思想是什么?
  • 演示通过状态提升完成兄弟组件通讯。

具体内容:

① 状态提升思想是什么?

  • 将共享状态提升到最近的公共父组件中,由公共父组件管理这个状态和修改状态的方法
  • 需要通讯的组件通过 props 接收状态和函数即可

② 参考代码

  • index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';// 导入两个子组件
import Jack from './Jack';
import Rose from './Rose';// App 是父组件
class App extends Component {// 1. 状态提升到父组件state = {msg: '',};changeMsg = (msg) => {this.setState({ msg });};render() {return (<div><h1>我是App组件</h1>{/* 兄弟组件 1 */}<Jack changeMsg={this.changeMsg}></Jack>{/* 兄弟组件 2 */}<Rose msg={this.state.msg}></Rose></div>);}
}// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'));
  • Jack.js
import React, { Component } from 'react';export default class Jack extends Component {say = () => {// 修改数据this.props.changeMsg('you jump i look');};render() {return (<div><h3>我是Jack组件</h3><button onClick={this.say}>说</button></div>);}
}
  • Rose.jsx
import React, { Component } from 'react';export default class Rose extends Component {render() {return (<div><h3>我是Rose组件-{this.props.msg}</h3></div>);}
}

7. 组件通讯-context 跨级组件通讯

掌握使用 context 实现跨级组件通讯

大致步骤:

  • 什么是跨级组件通讯?
  • context 怎么去理解?
  • 演示使用 context 完成跨级组件通讯。

具体内容:

什么是跨级组件通讯?

① 组件间相隔多层,理解成叔侄,甚至更远的亲戚。

② context 怎么去理解

  • 术语:上下文
  • 理解:一个范围,只要在这个范围内,就可以跨级组件通讯。(不需要 props 层层传递)

③ context使用方法

  • 创建上下文
import { createContext } from 'react' // 引入创建上下文的方法
export default createContext(初始值) // 初始值会在找不到Provider提供者时生效
  • 使用上下文的Provider组件作为提供者
import Context from './context'function Parent () {return <Context.Provider value={context共享的值}>....子孙组件</Context.Provider>}
  • 使上下文的Consumer作为消费者
import Context from './context'
function Child () {return <Context.Consumer>{value => JSX}</Context.Consumer>
}

创建上下文对象,上下文对象存在提供者和消费者,提供者提供数据,消费者消费数据

总结:

  • 使用creatContext()创建一个上下文对象,包含:Provider Consumer 组件。
  • 使用 Provider 包裹组件,value 属性注入状态函数,被包裹组件下的任何组件可以使用。
  • 使用 Consumer 消费 Provider 提供的数据和函数,语法{value=>使用数据和函数}

8. props-children 属性

掌握 props 中 children 属性的用法

大致步骤:

  • props 中 children 属性代表什么?
  • props 中 children 属性的使用
  • 使用 props 中 children 属性 封装 NavBar 组件

具体内容:

① props 中 children 属性代表什么?

  • 组件标签的子节点(标签之间的内容),可以是任意值(文本,React 元素,组件,函数)

② props 中 children 属性的使用

// 定义组件
const Hello = (props) => {return <div>该组件的子节点:{props.children}</div>;
};
// 使用组件
<Hello>我是子节点</Hello>;

③ 使用 props 中 children 属性 封装 NavBar 组件

import React, { Component } from 'react';const NavBar = (props) => {return <h3>&lt;&nbsp;{props.children}</h3>;
};export default class App extends Component {render() {return (<><NavBar>文章详情</NavBar><NavBar>文章列表</NavBar><NavBar>我的<span style={{ color: 'red' }}>点赞</span></NavBar></>);}
}

9. props-类型校验

校验接收的props的数据类型,增加组件的稳健性

大致步骤:

  • 理解props都是外来的,在使用的时候如果数据类型不对,很容易造成组件内部逻辑出错
  • 通过 prop-types 可以在创建组件的时候进行类型检查,更合理的使用组件避免错误

具体内容:

① 理解props都是外来的,在使用的时候如果数据类型不对,很容易造成组件内部逻辑出错

// 开发者A创建的组件
const List = props => {const arr = props.colorsconst list = arr.map((item, index) => <li key={index}>{item.name}</li>)return (<ul>{list}</ul>)
}// 开发者B去使用组件
<List colors={19} />

报错:

  • TypeError: arr.map is not a function

② 通过 prop-types 可以在创建组件的时候进行类型检查,更合理的使用组件避免错误

  • 安装 yarn add prop-types(脚手架创建自带这个包)
  • 导入 import PropTypes from 'prop-types'
  • 使用 组件名.propTypes = { 'props属性':'props校验规则' } 进行类型约定,PropTypes 包含各种规则
import PropTypes from 'prop-types'const List = props => {const arr = props.colorsconst lis = arr.map((item, index) => <li key={index}>{item.name}</li>)return <ul>{lis}</ul>
}List.propTypes = {// props属性:校验规则colors: PropTypes.array
}

总结:

  • 在提供组件的时候,props校验可以让组件使用更加准确。

10. props-类型校验常见类型

了解react组件props校验的常见规则

大致步骤:

  • 了解常见的校验规则
  • 演示校验规则的使用

具体内容:

  • 了解常见的校验规则

    1. 常见类型:array、bool、func、number、object、string
    2. React元素类型:element
    3. 必填项:isRequired
    4. 特定结构的对象:shape({})
  • 演示校验规则的使用

const Demo = (props) => {return <div>Demo组件</div>
}
Demo.propTypes = {// 常见类型optionalFunc: PropTypes.func,// 常见类型+必填requiredFunc: PropTypes.func.isRequired,// 特定结构的对象optionalObjectWithShape: PropTypes.shape({color: PropTypes.string,fontSize: PropTypes.number})
}

总结:

  • 通过PropTypes可以得到常见的校验规则

11. props-默认值

给组件的props提供默认值

大致步骤:

  • 知道 defaultProps 的作用?
  • 演示如何设置props的默认值
  • 新版react推荐使用参数默认值来实现

具体内容:

① 知道 defaultProps 的作用

  • 给组件的props设置默认值,在未传入props的时候生效

② 如何设置props的默认值参考代码

// 分页组件
const Pagination = (props) => {return <div> pageSize的默认值:{props.pageSize}</div>
}
// 设置默认值
Pagination.defaultProps = {pageSize: 10
}
// 使用组件
<Pagination />

③ 新版react推荐使用参数默认值来实现

// 分页组件
const Pagination = ({pageSize = 10}) => {return <div> pageSize的默认值:{pageSize}</div>
}
// 使用组件
<Pagination />

总结:

  • 组件名称.defaultProps 可以设置props属性默认值,未传的时候使用
  • 新版 react 更推荐 参数默认值 来实现

12. props-静态属性写法

知道在类组件中如何设置 类型校验 和 默认值

大致步骤:

  • 类的静态属性写法和如何访问它
  • 类组件中 propTypes defaultProps 的使用代码参考

具体内容:

① 类的静态属性写法和如何访问它

  • 实例属性需要实例化后,通过实例访问
  • 静态属性,可以通过类直接访问
class Person {// 实例成员constructor (name, age) {this.name = namethis.age = age}// 实例方法sayHi () {console.log('Hi')}// static 关键字: 静态成员static aa = 'bb'
}// 实例成员: 通过实例调用的属性或者方法,叫做实例成员(属性或者方法)
const p = new Person('刘建超', 20)
console.log(p.age)
p.sayHi()// 静态成员: 通过类或者构造函数本身才能访问的属性或者方法
Person.username = '人'
console.log(p.username) //undefined
console.log(Person.username) //人
console.log(Person.aa) // bb

② 类组件中 propTypes defaultProps 的使用代码参考

class Demo extends Component {// 校验static propTypes = {colors: PropTypes.array,gender: PropTypes.oneOf(['男', '女']).isRequired}// 默认值static defaultProps = {gender: '男'}render() {return <div>Demo组件</div>}
}

总结:

  • 在类组件中通过 static propTypes = {} 定义props校验规则 static defaultProps = {} 定义props默认值

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/428252.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

影刀RPA实战:网页爬虫之苦瓜书籍数据

书籍常常被视为心灵的慰藉&#xff0c;因为它们能够在不同的层面上为人们提供支持和安慰。 1. 书籍对我们的重要性 书籍是人类知识的载体&#xff0c;也是智慧的结晶。它们不仅是学习的工具&#xff0c;更是人类心灵的慰藉。在忙碌的生活中&#xff0c;书籍能够提供知识、启发…

缓存穿透 问题(缓存空对象)

文章目录 1、缓存穿透2、缓存空对象3、AlbumInfoApiController --》getAlbumInfo()4、AlbumInfoServiceImpl --》getAlbumInfo()5、RedisConstant6、请求缓存不存在的数据 1、缓存穿透 缓存穿透带有恶意性&#xff0c;强调不存在的数据。 2、缓存空对象 3、AlbumInfoApiCont…

【PHP源码】匿名来信系统H5版本V1.0免费开源源码(含搭建教程)

你的匿名来信H5一封你的来信源码/表白祝福短信程序/往来信/传话短信源码支持邮件发信与手机短信发信“你的匿名来信”是最近某音上爆火的一个活动话题&#xff0c;可以通过H5网站&#xff0c;编辑自己想要对某人说的话或者祝福&#xff0c;网站会把您想说的发给您预留的号码&am…

云计算课程作业1

作业1 Xmanager连接 rhel连接 作业2 首先确认你的虚拟机设置的是NAT 1-3 然后打开这篇blog&#xff0c;并完成第一步和第二步 因为我们是NAT&#xff0c;所以不需要连接网桥&#xff0c;即跳过第三步&#xff0c;但是这里ping一下测试网络连接 2- 如果到这里你发现提示yum…

uniapp中使用echarts 完整步骤,包括报错以及解决方案

在我们日常可能会有小程序中要使用echarts&#xff0c;我今天总结了一下整个引入的步骤 首先echarts - DCloud 插件市场在插件市场里面导入进项目&#xff0c;我这边用的是vue3的以及主要开发小程序&#xff0c;就直接放我的案例了 按照上面的步骤&#xff0c;在样式部分这样…

详读西瓜书+南瓜书第3章——线性回归

在这里&#xff0c;我们来深入探讨线性模型的相关内容&#xff0c;这章涵盖了从基础线性回归到更复杂的分类任务模型。我们会逐步分析其数学公式和实际应用场景。 3.1 基本形式 线性模型的核心是通过属性的线性组合来预测结果。具体形式为&#xff1a; 其中&#xff0c;w 是…

JVM基础篇学习笔记

【注&#xff1a;本文章为自学笔记&#xff0c;仅供学习使用。】 一、JVM简介 JVM是Java虚拟机的缩写&#xff0c;本质上是运行在计算机上面的程序&#xff0c;作用是运行Java字节码文件。 1.1 JVM的功能 Java如果不做优化&#xff0c;则性能不如C/C&#xff0c;因为后者会…

上手一个RGBD深度相机:从原理到实践--ROS noetic+Astra S(中):RGB相机的标定和使用

前言 本教程涉及基础相机的原理&#xff0c;使用&#xff0c;标定&#xff0c;和读取。(注&#xff1a;本教程默认大家有ROS1基础&#xff0c;故不对程序进行详细解释) 上一期&#xff1a;[csdn博客]上手一个RGBD深度相机&#xff1a;从原理到实践–ROS noeticAstra S&#xf…

vue无法通过页面路径访问提示404,通过nginx配置处理

部署vue项目时&#xff0c;可以通过IP的方式访问主页&#xff0c;当进入特定页面在刷新时&#xff0c;因为浏览器通过URL地址进行请求&#xff0c;就提示404错误。 每次都需要重新从主页进入&#xff0c;这里是因为nginx配置的问题&#xff0c;在nginx里增加一行重定向的设置 …

mac命令行分卷压缩与合并

对当前目录内的文件压缩的同时分卷 //语法:zip -r -s 1m 压缩文件名.zip 当前路径 zip -r -s 1m split.zip . //解压 zip -s 0 split.zip --out unsplit.zip unzip unsplit.zip 将一个zip文件进行分卷 一个900k的压缩包名为hello.zip,将其分割为每500K一个zip zip - hello.…

usemeno和usecallback区别及使用场景

1. useMemo 用途: useMemo 用于缓存计算结果。它接受一个函数和依赖项数组&#xff0c;只有当依赖项发生变化时&#xff0c;才会重新计算该函数的返回值。否则&#xff0c;它会返回缓存的值。 返回值: useMemo 返回的是函数执行后的结果。 使用场景: 当一个计算量大的函数在每…

dev c++输出中文乱码解决 printf乱码解决

把编码换成utf8就行 打开eiditor options

SpringBoot实现OAuth客户端

背景 5 月份的时候&#xff0c;我实践并整理了一篇博客&#xff1a;SpringBoot搭建OAuth2&#xff0c;该博客完成之后&#xff0c;本以为能对OAuth2的认证机制更加清晰&#xff0c;但我却觉得自己更“迷惘”了。 抛开我在项目中积累的浅薄经验不谈&#xff0c;单从在网…

生信初学者教程(八):数据收集

文章目录 数据分布表达谱数据最终数据分布自动下载GSE14520下载GSE149614下载其它数据在确定研究疾病为肝细胞癌**(Liver Hepatocellular Carcinoma: HCC)**后,系统地进行了文献回顾,专注于搜索与HCC相关的荟萃分析文章,以获取该领域的研究动态和已有成果。为了支持的研究…

【专题】2024新能源企业“出海”系列之驶向中东、东南亚报告合集PDF分享(附原数据表)

原文链接&#xff1a; https://tecdat.cn/?p37698 在“双碳”目标引领下&#xff0c;中国新能源产业近年迅猛发展&#xff0c;新能源企业凭借技术革新、政策支持与市场驱动实现快速增长&#xff0c;在产业链完备、技术领先、生产效能及成本控制等方面优势显著。面对国内外环境…

2024年“华为杯”研赛第二十一届中国研究生数学建模竞赛解题思路|完整代码论文集合

我是Tina表姐&#xff0c;毕业于中国人民大学&#xff0c;对数学建模的热爱让我在这一领域深耕多年。我的建模思路已经帮助了百余位学习者和参赛者在数学建模的道路上取得了显著的进步和成就。现在&#xff0c;我将这份宝贵的经验和知识凝练成一份全面的解题思路与代码论文集合…

PowerBI-l5-CALENDAR创建日期表

CALENDAR创建日期表 方法1 Table CALENDARAUTO() 方法2 自定义日期 Table CALENDAR&#xff08;date(2021,6.20),date(2021,6.24&#xff09;)

工作中遇到的问题总结(1)

文章目录 第一题问题描述解决思路 第二题问题描述解决思路核心大表如何优化数据迁移过程是怎么样的如何将流量从旧系统迁移到新系统上 第三题问题描述解决思路 第四题问题描述解决思路方案一&#xff1a;双写机制方案二&#xff1a;基于时间戳的分流机制方案三&#xff1a;灰度…

再次理解UDP协议

一、再谈端口号 在 TCP / IP 协议中&#xff0c;用 "源 IP", "源端口号", "目的 IP", "目的端口号", "协议号" 这样一个五元组来标识一个通信(可以通过 netstat -n 查看) 我们需要端口号到进程的唯一性&#xff0c;所以一个…

李沐 过拟合和欠拟合【动手学深度学习v2】

模型容量 模型容量的影响 估计模型容量 难以在不同的种类算法之间比较&#xff0c;例如树模型和神经网络 给定一个模型种类&#xff0c;将有两个主要因素&#xff1a; 参数的个数参数值的选择范围 VC维 线性分类器的VC维 VC维的用处 数据复杂度 多个重要因素&#xff1a; 样…