react-----组件通讯
1.组件通讯介绍
- * 组件是*独立且封闭*的单元(为了复用，避免冲突)，默认情况下，只能使用组件自己的数据
- * 在组件化过程中，通常会将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能
- * 而在这个过程中，多个组件之间不可避免的要共享某些数据
- * 为了实现这些功能，就需要**打破组件的独立封闭性**，让其与外界沟通。这个过程就是**组件通讯**。
总结：*组件中的状态是私有的*，也就是说，组件的状态只能在组件内部使用，无法直接在组件外使用
2.props基本使用
- 函数组件获取props
// 接收数据：
// props 的值就是：{ name: 'jack', age: 19 }
function Hello(props) {
return (
接收到数据:{props.name}
)
}
// 传递数据：
// 可以把传递数据理解为调用函数 Hello，即：Hello({ name: 'jack', age: 19 })
- 类组件获取props
// 接收数据：
// class 组件需要通过 this.props 来获取
// 注意：this.porps 属性名是固定的！！！
class Hello extends Component {
render() {
return (
接收到的数据:{this.props.age}
)
}
}
// 传递数据：
3.props注意点
1. **props 是只读对象**，也就是说：只能读取对象中的属性，无法修改
**单向数据流**，也叫做：自顶而下（自上而下）的数据流
表示：父组件中的数据可以通过 props 传递给子组件，并且，当父组件中的数据更新时，子组件就会自动接收到最新的数据
类比：就像瀑布的水一样只能从上往下流动，并且，当上游的水变浑浊，下游的水也会受到影响
2.可以传递任意数据（数字 字符串 布尔类型 数组 对象 函数 jsx）
4.组件通讯-----父传子
import React, { Component } from 'react'
// 函数子组件
const Fn=(props)=>{
console.log('函数组件接收到的值：',props);
return (
函数子组件
函数组件接收到的值：{props.money}
函数组件接收到的值：{props.changeMoney()}
)
}
// 类子组件
class Fn1 extends Component{
render(){
console.log("类子组件接收到的值：",this.props);
return (
类子组件
类组件接收到的值：{this.props.money}
{this.props.html}
)
}
}
// 父组件
class App extends Component {
// 传递灵活的变量
state={
money:10
}
// 传递一个函数
changeMoney=()=>{
console.log(this);
return 123
}
// 传递一个jsx
html=(123
)
render() {
return (
父组件
)
}
}
export default App
5.组件通讯--------子传父
*将父组件的方法传递给子组件，子组件传值、调用传递过来的方法
import React, { Component } from 'react'
// 函数子组件
const Fn=(props)=>{
console.log('函数组件接收到的值：',props);
const changeMoney=()=>{
props.changeMoney(1e8)
}
return (
函数子组件
函数组件接收到的值：{props.money}
)
}
// 父组件
class App extends Component {
// 传递灵活的变量
state={
money:10
}
// 传递一个函数
changeMoney=(chileData)=>{
this.setState({
money:chileData
})
}
render() {
return (
父组件
)
}
}
export default App6.组件通讯-----兄弟组件
将兄弟组件中需要的状态放置在父组件中，然后父传子，或子穿父。
import React, { Component } from 'react'
// 兄弟1
const Brother1=(props)=>{
return(
兄弟1
{props.count}
)
}
// 兄弟2
const Brother2=({count})=>{
return(
兄弟2
{count}
)
}
// 兄弟父组件
export default class App extends Component {
state={
count:0
}
changeCount=(data)=>{
this.setState({
count:data
})
}
render() {
return (
父
)
}
}
7.组件通讯-------跨多级组件（context）
实现方式：使用 Context 来实现跨组件传递数据
Context 上下文，可以理解一个范围，只要在这个范围内，就可以直接跨组件传递数据
核心代码
// 0 导入创建 context 的函数
import { createContext } from 'react'
// 1 创建 Context 对象
// createContext 的返回值是一个 对象
// 对象中包含了两个组件，分别是： Provider 状态的提供者组件（提供状态） Consumer 状态的消费者组件（使用状态）
const { Provider, Consumer } = createContext()
// 2 使用 Provider 组件包裹整个应用，并通过 value 属性提供要共享的数据
// 3 使用 Consumer 组件接收要共享的数据
{color => data参数表示接收到的数据 -- {color}}
案例：（将contex单独创建一个js文件，导出调用）
context.js
import { createContext } from "react";
// 创建跨多级组件通信的context对象
const { Provider, Consumer } = createContext();
export { Provider, Consumer };
跨多级.jsx
import React, { Component } from 'react'
import {Provider,Consumer} from './context/context-obj'
// 孙子组件
class SubChild extends Component{
getApp=(data)=>{
console.log('jieshou',data);
}
render(){
return (
孙子组件
{(data)=>
{data.name}:{data.age}
}
{this.getApp}
)
}
}
// 子组件
class Child extends Component{
render(){
return (
子组件
父组件
)
}
}