react组件通信

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

    <Hello name="jack" age={19} />
    function Hello(props) {
        console.log(props)
        return (
        <div>接收到数据：{props.name}</div>
        )
    }

    class Hello extends React.Component {
        render() {
        return (
        <div>接收到的数据：{this.props.age}</div>
        )
        }
        }
    <Hello name="jack" age={19} />  //''是字符串形式,{19}传递的是number型

特点:

1. 可以给组件传递任意类型的数据 //数组,对象,函数,jsx组件等都可以
2. props 是只读的对象，只能读取属性的值，无法修改对象
3. 注意：使用类组件时，如果写了构造函数，应该将 props 传递给 super()，否则，无法在构造函数中获取到 props！

    class Hello extends React.Component {
        constructor(props) {
        // 推荐将props传递给父类构造函数
        super(props)
        }
        render() {
        return <div>接收到的数据：{this.props.age}</div>
        }
    }

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

    class Parent extends React.Component {
        state = { lastName: '王' }
        render() {
        return (
        <div>
        传递数据给子组件：<Child name={this.state.lastName} />
        </div>
        )
        }
    }
    function Child(props) {
        return <div>子组件接收到数据：{props.name}</div>
    }

思路：利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数。

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

    class Parent extends React.Component {
        getChildMsg = (msg) => {
        console.log('接收到子组件数据', msg)
        }
        render() {
        return (
        <div>
        子组件：<Child getMsg={this.getChildMsg} />
        </div>
        )
        }
    }

    class Child extends React.Component {
        state = { childMsg: 'React' }
        handleClick = () => {
        this.props.getMsg(this.state.childMsg)
        }
        return (
        <button onClick={this.handleClick}>点我，给父组件传递数据</button>
        )
    }

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

    // 父组件
    class Counter extends React.Component {
      // 提供共享状态
      state = {
        count: 0
      }
      // 提供修改状态的方法
      onIncrement = () => {
        this.setState({
          count: this.state.count + 1
        })
      }
      render() {
        return (
          <div>
            <Child1 count={this.state.count} />
            <Child2 onIncrement={this.onIncrement} />
          </div>
        )
      }
    }
    const Child1 = props => {
      return <h1>计数器：{props.count}</h1>
    }
    const Child2 = props => {
      return <button onClick={() => props.onIncrement()}>+1</button>
    }
    ReactDOM.render(<Counter />, document.getElementById('root'))

作用：跨组件传递数据（比如：主题、语言等） //相隔多个组件之间传递数据

1. 调用 React. createContext() 创建 Provider（提供数据） 和 Consumer（消费数据） 两个组件。
2. 使用 Provider 组件作为父节点。
3. 设置 value 属性，表示要传递的数据。
4. 调用 Consumer 组件接收数据。

    // 创建context得到两个组件
    const { Provider, Consumer } = React.createContext()
    class App extends React.Component {
      render() {
        return (
          <Provider value="pink">
            <div className="app">
                <SubNode />
            </div>
          </Provider>
        )
      }
    }
    const SubNode = props => {
      return (
        <div className="subnode">
          <Child />
        </div>
      )
    }
    const Child = props => {
      return (
        <div className="child">
          <Consumer>{data => <span>我是子节点 -- {data}</span>}</Consumer>  //>data参数表示接收到的数据
        </div>
      )
    }
    ReactDOM.render(<App />, document.getElementById('root'))

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

    function Hello(props) {
        return (
        <div>
        组件的子节点：{props.children}
        </div>
        )
    }
    <Hello>我是子节点</Hello>

2 props 校验
对于组件来说，props 是外来的，无法保证组件使用者传入什么格式的数据
 如果传入的数据格式不对，可能会导致组件内部报错
 关键问题：组件的使用者不知道明确的错误原因

props 校验：允许在创建组件的时候，就指定 props 的类型、格式等
 作用：捕获使用组件时因为props导致的错误，给出明确的错误提示，增加组件的健壮性

1. 安装包 prop-types （yarn add prop-types / npm i props-types）
2. 导入 prop-types 包
3. 使用组件名.propTypes = {} 来给组件的props添加校验规则
4. 校验规则通过 PropTypes 对象来指定
    import PropTypes from 'prop-types'
    function App(props) {
    return (
    <h1>Hi, {props.colors}</h1>
    )
    }
    App.propTypes = {
    // 约定colors属性为array类型
    // 如果类型不对，则报出明确错误，便于分析错误原因
    colors: PropTypes.array
    }

约束规则
    1. 常见类型：array、bool、func、number、object、string
    2. React元素类型：element
    3. 必填项：isRequired
    4. 特定结构的对象：shape({ })

// 常见类型
    optionalFunc: PropTypes.func,
    // 必选
    requiredFunc: PropTypes.func.isRequired,
    // 特定结构的对象
    optionalObjectWithShape: PropTypes.shape({
        color: PropTypes.string,
        fontSize: PropTypes.number
    })

3 props 的默认值
场景：分页组件  每页显示条数
 作用：给 props 设置默认值，在未传入 props 时生效
    function App(props) {
        return (
        <div>
        此处展示props的默认值：{props.pageSize}
        </div>
        )
    }
    // 设置默认值
    App.defaultProps = {
        pageSize: 10
    }
    // 不传入pageSize属性
    <App />