React组件的通讯

组件通讯的介绍

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

组件props

组件是封闭的，要接收外部数据应该通过props来实现
props作用：接收传递给组件的数据
传递数据：给组件标签添加属性
接收数据：行数组件通过参数props接收数据，类组件通过this.props接收数据
特点一：可以传递任意类型（默认是字符串，如需传递别的类型需要加上 {}）
特点二：props是只读的对象，只能读取，无法改变
注意：使用类组件时，如果写了构造函数，应该将props传递给super()否则，无法在构造函数中获取到props

// 在父组件传的值
<InfoClass name="张三"></InfoClass>
<InfoFunction name="李四"></InfoFunction>
// 类组件
class Info_Class extends React.Component {
	// 推荐使用props作为constructor的参数！！
    constructor(props) {
        super(props)
    }
    render () {
        return (
            <div>
                {this.props.name}
            </div>
        )
    }
}
// 函数组件
function Info_Class (props) {
    return (
        <div>
            {props.name}
        </div>
    )
}

组件通讯的三种方式

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

子组件传递数据给父组件
思路：利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数
1.父组件提供一个回调函数（用于接收数据）
2.将该函数作为属性的值，传递给子组件
3.子组件通过props调用回调函数
4.将子组件的数据作为参数传递给回调函数

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

Context

作用：跨组件传递数据
注意 想要传递必须是同一个createContext不然不能传递，传递必须在标签上加一个value

class Context extends React.Component {
    render () {
        return (
            <themeContext.Provider value={theme}>
                <div>
                    <Context1></Context1>
                </div>
            </themeContext.Provider>
        )
    }
}

接收的方式

<themeContext.Consumer>{data => console.log(data)}</themeContext.Consumer>

props深入

children 属性
表示组件标签的子节点。当组件标签有子节点时，props就会有该属性。
children属性与普通的props一样，值可以是任意值（文本、React元素、组件，甚至是函数）

// 父组件
class Context extends React.Component {
    render () {
        return (
             <div>
                    <Context1>
                        <p>123</p>
                    </Context1>
                </div>
        )
    }
}
// 组件就能获取到 <p>123</p> 子标签
class Context extends React.Component {
    constructor(props) {
        super(props)
        console.log(props.children )
    }
    render () {
        console.log(this.props.children )
        return (
            <div>
                <Context2>
                </Context2>
            </div>
        )
    }
}

props 校验
作用：捕获使用组件时因为props导致的错误，给出明确的错误提示，增加组件的健壮性
操作：
1、安装prop-types（yarn add prop-types）
2、导入prop-types包
3、使用
4、约束规则
（array、bool、func、number、object、string）约束类型
更多类型校验： https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html

// 2、导入prop-types
import PropTypes from "prop-types"
function Child (props) {
    return (
        <div>

        </div>
    )
}
3、使用
Child.propTypes = {
    list: PropTypes.array
}

props默认值

function Child (props) {
    console.log(props)
    return (
        <div>

        </div>
    )
}

Child.defaultProps = {
    page: 10
}