本文详细介绍了React组件间的通讯方式，包括props的基本使用、父传子、子传父、兄弟组件间以及跨级组件通讯。同时，文章探讨了props的注意事项，如props的只读性和单向数据流原则。此外，还讲解了props的校验和默认值的设定，以确保组件使用的正确性。
目录
定义，并默认导出组件
import React, { Component } from 'react'
export default class Com extends Component {
render() {
return <div>$2</div>
}
}导入组件
import Com from './Com.js'
render(<Com></Com>)注意:
组件名采用大驼峰命名法 , 组件文件名与组件名一致
组件通讯介绍
为什么需要组件通讯?
组件中的状态是私有的，也就是说，组件的状态只能在组件内部使用，无法直接在组件外使用,
为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通讯。
组件通讯三种方式
父子组件之间
兄弟组件之间
跨组件层级
props基本使用
父传子步骤:
-
父组件使用子组件时，传入自定义属性
-
子组件内部接收属性
格式:
父组件-传入数据
<子组件 自定义属性1={值1} 自定义属性2={值2} .... />
子组件-函数式组件-接收数据
// 接收数据： 函数组件需要通过补充形参来获取
function 子组件(props) {
console.log('从父组件中传入的自定义属性被收集在对象:', props)
return (<div>子组件的内容</div>)
} 子组件-类组件-接收数据
// 接收数据： class 组件需要通过 this.props 来获取
class 子组件 extends Component {
console.log('从父组件中传入的自定义属性被收集在对象:', this.props)
render() { return (<div>子组件的内容</div>) }
} props的三个注意事项
可以传递任意数据
只读的
单向数据流
可以传递任意数据
props可以传递：数字 字符串 布尔类型 数组 对象 函数 jsx
props 是只读对象
只能读取对象中的属性，无法修改
this.props.age =20 // 错误
单项数据流
也叫做：自上而下的数据流
-
父组件中的数据可以通过 props 传递给子组件，并且，当父组件中的数据更新时，子组件就会自动接收到最新的数据
-
父组件的数据更新会流动到子组件，不能反过来，子组件直接去修改父组件的数据
-
类比：就像瀑布的水一样只能从上往下流动，并且，当上游的水变浑浊，下游的水也会受到影响
props的children属性
children属性：表示该组件的子节点，只要组件有子节点，props就有该属性
children 属性与普通的props一样，值可以是任意值（文本、React元素、组件，甚至是函数）
组件通讯-子传父
利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数。
步骤
-
父组件
-
定义一个回调函数 fn（将会用于接收数据）
-
将该函数 fn 作为属性的值，传递给子组件
-
-
子组件
-
通过 props 获取 fn
-
调用 fn，并传入将子组件的数据
-
核心代码
父组件提供函数并且传递给子组件
class Parent extends React.Component {
state: {
num: 100
}
f = (num) => {
console.log('接收到子组件数据', num)
}
render() {
return (
<div>
子组件：<Child f={this.f} />
</div>
)
}
}
子组件接收函数并且调用
class Child extends React.Component {
handleClick = () => {
// 调用父组件传入的props，并传入参数
this.props.f(100)
}
return (
<button onClick={this.handleClick}>点我，给父组件传递数据</button>
)
}子传父：在子组件中调用从父组件中定义的方法，并根据需要传入参数
组件通讯-兄弟组件
思路
-
将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态
-
思想：状态提升
-
公共父组件职责：
-
提供共享状态
-
提供操作共享状态的方法
-
-
要通讯的子组件只需通过 props 接收状态或操作状态的方法
核心代码
parent.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Jack from './Jack'
import Rose from './Rose'
class App extends Component {
// 1. 状态提升到父组件
state = {
msg: '',
}
render() {
return (
<div>
<h1>我是App组件</h1>
<Jack say={this.changeMsg}></Jack>
{/* 2. 把状态给子组件显示 */}
<Rose msg={this.state.msg}></Rose>
</div>
)
}
changeMsg = (msg) => {
this.setState({
msg,
})
}
}
// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))Son1.js
import React, { Component } from 'react'
export default class Jack extends Component {
render() {
return (
<div>
<h3>我是Jack组件</h3>
<button onClick={this.say}>说</button>
</div>
)
}
say = () => {
this.props.say('you jump i look')
}
}
Son2.js
import React, { Component } from 'react'
export default class Rose extends Component {
render() {
return (
<div>
<h3>我是Rose组件-{this.props.msg}</h3>
</div>
)
}
}
组件通讯 -跨级组件通讯
使用Context的步骤
共四步：
1. 导入并调用createContext方法，从结果中解构出 Provider, Consumer 组件
import { createContext } from 'react'
const { Provider, Consumer } = createContext()
2. 使用 Provider 组件包裹根组件，并通过 value 属性提供要共享的数据
return (
<Provider value={ 这里放要传递的数据 }>
<根组件的内容/>
</Provider>
)
3. 在任意后代组件中，使用第2步中导出的Consumer组件包裹整个组件
return (
<Consumer>
{
（data） => {
// 这里的形参data 就会自动接收Provider中传入的数据
// console.log(data)
return <组件的内容>
}
}
</Consumer>
)
落地代码
建立context.js文件
import { createContext } from 'react'
const { Provider, Consumer } = createContext()
export { Consumer, Provider }改造根组件
import { Provider } from './context'
render () {
return (
<Provider value={{ num: this.state.num }}>
<div>
根组件, num: {this.state.num}
<Parent />
<Uncle />
</div>
</Provider>
)
}改造后代组件 Uncle.js
import React from 'react'
import { Consumer } from './context'
export default class Uncle extends React.Component {
render () {
return (
<Consumer>
{(data) => {
return <div>我是Uncle组件, {data.num}</div>
}}
</Consumer>
)
}
}props校验-基本使用
步骤
导入
prop-types包 。这个包在脚手架创建项目时就自带了，无须额外安装
import ProtTypes from 'prop-types'使用
组件名.propTypes = {属性名1: 类型1, ...}来给组件的props添加校验规则
实例
import PropTypes from 'prop-types'
class App extends React.component {
return (
<h1>Hi, {props.colors}</h1>
)
}
App.propTypes = {
// 约定colors属性为array类型
// 如果类型不对，则报出明确错误，便于分析错误原因
colors: PropTypes.array
}
作用：规定接收的props的类型必须为数组，如果不是数组就会报错
props校验-常见规则
-
常见类型：array、bool、func、number、object、string
-
React元素类型：element
-
必填项：isRequired
-
特定结构的对象：shape({ })
核心代码
Com.propTypes = {
fn: PropTypes.func, // fn 是函数类型
isEdit: PropTypes.bool.isRequired // isEdit的类型是bool，且必须要传入
// 特定结构的对象
goodInfo: PropTypes.shape({ // goodInfo的格式一个对象，有 数值price属性 和 字符串name属性
price: PropTypes.number,
name: PropTypes.string
})
}props默认值
定义： 没有赋值的情况下，给属性赋一个值
好处：简化调用组件时要传入的属性，更方便用户使用
两种方式：
-
defaultProps -
解构赋值的默认值
方法1：defaultProps
通过defaultProps可以给组件的props设置默认值，在未传入props的时候生效
定义组件
class App extends React.Component{
return (
<div>
此处展示props的默认值：{ this.props.pageSize }
</div>
)
}
// 设置默认值
App.defaultProps = {
pageSize: 10
}
// 类型限制
App.propTypes = {
pageSize: PropTypes.number
}使用组件
// 不传入pageSize属性
<App />
方法2：解构赋值的默认值
class App extends React.Component{
return (
// 解构赋值的默认值
const { pageSize = 10} = this.props
<div>
此处展示props的默认值：{ this.props.pageSize }
</div>
)
}
// 类型限制
App.propTypes = {
pageSize: PropTypes.number
}解构赋值的默认值在未传入props的时候生效
props校验和默认值简化-类的静态成员-static
什么是静态成员
-
静态成员：通过类或者构造函数本身才能访问的属性或者方法
-
实例成员: 通过实例调用的属性或者方法
class Person {
constructor(name){
this.name = name // 实例成员
}
static n = 1 // 静态成员 有static修饰
}静态成员的定义和访问
定义
class Person {
constructor(name){
this.name = name // 实例成员
}
// 方法1：在class内部 通过static来定义
static n = 1 // 静态成员 有static修饰
}
// 方法2 在class外部 通过类型.属性名来定义
Person.m = function() { console.log()}访问
Person.n
Person.m()
简化props校验和默认值
把校验规则和默认值放入class内部
扫一扫
451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
