React学习笔记（4）React组件进阶

本文链接：https://blog.csdn.net/mx_is_bang/article/details/119736793

组件通讯介绍

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

组件的props

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

const Context = props=>{
    console.log(props)
    return (
        <div>
            <h1>props:{props.name}</h1>
        </div>
    )
}

类组件传递数据

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

props使用注意：
可以给组件传递任意类型的数据，数组，数值，字符串…
props是只读的对象，只能读取属性的值，无法修改对象
注意，使用类组件时，构造函数中应该将props传递给super(),否则构造函数中无法获取props

组件通讯三种方式

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

import React, { Component } from 'react'
export default class Parent extends Component {
    state = {
       lastname:"Mary",
    }
    render() {
        return (
            <div className = "parent">
                <Child1 name = {this.state.lastname} /> 
            </div>
        )
    }
}

import React, { Component } from 'react'
export default class Child1 extends Component {
    render() {
        return (
            <div className = "child">
                 <p>子组件，接收父组件的数据为：{this.props.name}</p>
            </div>
        )
    }
}

子组件传递数据到父组件

思路：利用回调函数，父组件提供一个回调函数，子组件调用回调函数，并将要传递的数据作为回调函数的参数传递给父组件
1、父组件提供一个回调函数（用于接收数据）
2、将该函数作为属性的值传递给子组件
3、子组件通过props调用回调函数
4、将子组件的数据作为参数传递给回调函数
注意回调函数中this指向问题。
回调函数

 getChildMsg = msg=>{
        console.log("接收子组件数据",msg)
        this.setState({
            parentMsg:msg
        })
    }

传递到子组件

  <Child1 name = {this.state.lastname} getMsg = {this.getChildMsg}/>

子组件调用

 state = {
        childMsg:"hahaha"
    }
    handleClick = ()=>{
        //子组件调用父组件传递的函数
        this.props.getMsg(this.state.childMsg)
    }

兄弟组件传递数据

状态提升：将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态
公共父组件：1、提供共享状态2、提供操作共享状态的方法
要通讯的子组件只需要通过props接收状态或者操作状态的方法。
父组件提供状态与操作状态的方法

 state = {
       // lastname:"Mary",
        //parentMsg:'',
        count:0//父组件提供共享状态

    }
    onIncrement=()=>{
        this.setState({
            count:this.state.count+1
        })
    }

子组件获取状态与修改状态

 <Child1 count = {this.state.count}/>
 <Child2 add = {this.onIncrement}/>

子组件1展示数据

<h1>计数器：{this.props.count}</h1>

子组件2修改数据的方法

 <button onClick={()=>{this.props.add()}}>+1</button>

Context多层组件之间数据传递
组件层层嵌套，使用props一层层向下传递数据
使用Context可以跨组件传递数据
使用步骤

1、调用React.createContext()创建Provider（提供数据）, Consumer（消费数据）两个组件

const { Provider, Consumer } = React.createContext();

2、使用Provider作为父节点

<Provider value = "pinkkkk!!">
    <div className="app">
        <Node />
        app
    </div>
</Provider>

3、设置value属性，表示要传递的数据

 <Provider value = "pinkkkk!!">

4、调用Consumer组件接收数据

<Consumer>{data=><p>subnode--{data}</p>}</Consumer>

props深入
1、children属性

children属性：表示组件标签的子节点。当组件有子节点时，props就会有该属性

children属性与普通的props一样，值可以是任意值（文本、React元素，组件，或是函数）

2、props校验

对于组件来说，props是外来的，无法保证组件使用者传入什么格式的数据

如果传入数据格式不对，导致组件内部报错

关键问题：组件使用者不知明确的错误原因

props校验：允许创建组件的时候，就指定props的类型、格式

作用：捕获使用组件时因为props导致的错误，给出明确的提示，增加组件的健壮性。

使用步骤：

安装包：prop-type(npm i prop-types)
导入prop-types包
使用组件名.propTypes={}给组件的props添加校验规则
具体规则由

约束规则

1、常见类型：array、bool、func、number、object、string
2、React元素类型：element
3、必填项：isRequired
4、特定结构的对象shape({ })
3、组件的默认值

给组件设置默认值，未传入props时生效

App.defaultProps = { pageSize : 10}