class Parent extends React.Component {
  state = {
    number: '123456'
  }
  render() {
    return (
        <div>
          <Child number = {this.state.number}/>
        </div>
    )
  }
}

function Child(props) {
  return <div>接收number：{props.number}</div>
}

ReactDOM.render(<Parent/>, document.getElementById('root'))

（二）子传父

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

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: 'Hello React'
  }
  handleClick = () => {
    this.props.getMsg(this.state.childMsg)
  }
  render() {
    return (
        <button onClick={this.handleClick}>点击后父组件打印子组件传递数据</button>
    )
  }
}

ReactDOM.render(<Parent/>, document.getElementById('root'))

（三）兄弟组件间通讯

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

class Parent extends React.Component {
  state = {
    number: 0
  }
  addClick = () => {
    this.setState({
      number: this.state.number+1
    })
  }
  render() {
    return (
        <div>
          <Child1 number={this.state.number}/>
          <Child2 addClick={this.addClick}/>
        </div>
    )
  }
}

const Child1 = props => {
  return (
      <div>
        number：{props.number}
      </div>
  )
}
const Child2 = props => {
  return (
      <button onClick={() => props.addClick()}>+1</button>
  )
}
ReactDOM.render(<Parent/>, document.getElementById('root'))

（四）跨组件传递数据（Context）

作用：跨组件传递数据，比如主题、语言等；如果两个组件是远方亲戚（比如嵌套多层），则可以使用Context实现组件通讯

步骤：

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

例子：当APP是Child的父组件的父组件的父组件时，用props传值太过麻烦，因此用Context代替

// 1、创建context得到两个组件
const { Provider, Consumer} = React.createContext()

class App extends React.Component {
  render() {
    return (
        // 2、使用Provider组件作为父节点+3、设置value属性，表示要传递的数据
        <Provider value="pink">
          <div>
            <Node/>
          </div>
        </Provider>
    )
  }
}

const Node = props => {
  return (
      <div>
        <SubNode/>
      </div>
  )
}
const SubNode= props => {
  return (
      <div>
        <Child/>
      </div>
  )
}

const Child = props => {
  return(
      // 4、使用Consumer组件接收数据
      <div>
        <Consumer>
          {
            data => <span>我是子节点: {data}</span>
          }
        </Consumer>
      </div>
  )
}
ReactDOM.render(<App/>, document.getElementById('root'))

二、深入了解props

（一）children属性

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

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

const APP = props => {
  return (
      <div>
        <h1>组件标签的子节点：</h1>
        {props.children}
      </div>
  )
}
ReactDOM.render(<APP> 我是子节点 </APP>, document.getElementById('root'))

（二）props校验

为什么使用props校验：

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

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

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

使用步骤：

安装prop-types包（npm i prop-types）
导入prop-types包（import PropTypes from 'prop-types'）
使用组件名.propTypes={}来给组件的props添加校验规则
校验规则通过PropTypes对象来指定

import PropTypes from 'prop-types'
import App from "./App";
const APP = props => {
  const arr = props.colors
  const lis = arr.map((item, index) => <li key={index}>{item.name}</li> )
  return (
      <ul>
        {lis}
      </ul>
  )
}

// 添加props校验
App.propTypes = {
  colors: PropTypes.array
}
ReactDOM.render(<App colors={19}/>, document.getElementById('root'))

（三）props校验-约束规则

常见类型：array、bool、func、number、object、string
React元素类型：element
必填项：isRequired
特定结构的对象：shape（{}）

/**
 * 添加props校验
 * 属性 a 的类型：      数值（number）
 * 属性 fn 的类型：     函数（func）并且为必填项
 * 属性 tag 的类型：    React元素（element）
 * 属性 filter 的类型： 对象（{area：‘上海’， price：1999}）
 * */
App.propTypes = {
  a: PropTypes.number,
  fn: PropTypes.func.isRequired,
  tag: PropTypes.element,
  filter: PropTypes.shape({
    area: PropTypes.number
  })
}

（四）props的默认值

给props设置默认值，在数据未传入时使用

const App = props => {
  return (
      <div>
        <h1>此处展示props的默认值：{props.number}</h1>
      </div>
  )
}

// 添加props默认值
App.defaultProps = {
  number: 10
}
ReactDOM.render(<App />, document.getElementById('root'))

三、组件的生命周期

（一）创建时（挂载阶段）

执行时机：组件创建时（页面加载时）
执行顺序：

constructor → render → componentDidMount

钩子函数	触发时机	作用
constructor	创建组件时，最先执行	1、初始化state 2、为事件处理程序绑定this
render	每次组件渲染都会触发	渲染UI（注意：不能调用setState）
componentDidMount	组件挂载（完成DOM渲染）后	1、发送网络请求 2、DOM操作

钩子函数

触发时机

作用

constructor

创建组件时，最先执行

1、初始化state

2、为事件处理程序绑定this

render

每次组件渲染都会触发

渲染UI（注意：不能调用setState）

componentDidMount

组件挂载（完成DOM渲染）后

1、发送网络请求

2、DOM操作

（二）更新时（更新阶段）

执行时机：1、setState() 2、forceUpdate() 3、组件接收到新的props
说明：以上三者任意一种变化，组件就会重新渲染
执行顺序：

render → componentDidMount

钩子函数	触发时机	作用
render	每次组件渲染都会触发	渲染UI（与挂载阶段是同一个render）
componentDidUpdate	组件更新（完成DOM渲染）后	1、发送网络请求 2、DOM操作 3、注意：如果要setState()必须放在一个if条件中

钩子函数

触发时机

作用

render

每次组件渲染都会触发

渲染UI（与挂载阶段是同一个render）

componentDidUpdate

组件更新（完成DOM渲染）后

1、发送网络请求

2、DOM操作

3、注意：如果要setState()必须放在一个if条件中

（三）卸载时（卸载阶段）

执行时机：组件从页面中消失

钩子函数	触发时机	作用
componentWillUnmount	组件卸载（从页面中消失）	执行清理工作（比如：清理定时器等）

四、React组件复用

（一）概述

什么情况要复用：如果两个组件中的部分功能相似或相同，这是就需要组件复用
处理方式：复用相似的功能（联想函数封装）
复用什么：1、state 2、操作state的方法（组件状态逻辑）
两种方式：1、render props模式 2、高阶组件（HOC）
注意：这两种方式不是新的API，而是利用React自身特点的编码技巧，演化而成的固定模式（写法）

（二）render props模式

把prop是一个函数并且告诉组件要渲染什么内容的技术叫做：render props模式

1、使用步骤（以复用获取鼠标位置为例）

创建Mouse组件，在组件中提供复用的状态逻辑代码（1、代码 2、操作状态的方法）
将要复用的状态作为props.render(state)方法的参数，暴露到组件外部
使用props.render()的返回值作为要渲染的内容

// 1、创建Mouse组件，在组件中提供复用的状态逻辑代码（1、代码       2、操作状态的方法）
class Mouse extends React.Component {
  state = {
    x: 0,
    y: 0
  }
  // 鼠标移动事件
  handleMouseMove = e => {
    this.setState({
      x: e.clientX,
      y: e.clientY
    })
  }

  // 监听鼠标移动事件
  componentDidMount() {
    window.addEventListener('mousemove', this.handleMouseMove)
  }

  render() {
    // 2、将要复用的状态作为props.render(state)方法的参数，暴露到组件外部
    return this.props.render(this.state)
  }
}

class App extends React.Component {
  render() {
    return (
        <div>
          <h1>render props 模式</h1>
          {/* 3、使用props.render()的返回值作为要渲染的内容，显示鼠标当前坐标*/}
          <Mouse render={mouse => {
            return (
                <p>鼠标位置：{mouse.x} {mouse.y}</p>
            )
          }}/>
          {/* 3、使用props.render()的返回值作为要渲染的内容，添加一张随坐标移动的图片*/}
          <Mouse render={mouse => {
            return (
                <img src={img} alt="React" style={{
                  position: 'absolute',
                  top: mouse.y,
                  left: mouse.x
                }}/>
            )
          }}/>
        </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

2、使用children代替render属性（推荐）

// 1、创建Mouse组件，在组件中提供复用的状态逻辑代码（1、代码       2、操作状态的方法）
class Mouse extends React.Component {
  state = {
    x: 0,
    y: 0
  }
  // 鼠标移动事件
  handleMouseMove = e => {
    this.setState({
      x: e.clientX,
      y: e.clientY
    })
  }

  // 监听鼠标移动事件
  componentDidMount() {
    window.addEventListener('mousemove', this.handleMouseMove)
  }

  render() {
    // 2、将要复用的状态作为props.render(state)方法的参数，暴露到组件外部
    return this.props.children(this.state)
  }
}

class App extends React.Component {
  render() {
    return (
        <div>
          <h1>render props 模式</h1>
          {/* 3、使用props.render()的返回值作为要渲染的内容，显示鼠标当前坐标*/}
          <Mouse>
            {mouse => {
              return (
                  <p>鼠标位置：{mouse.x} {mouse.y}</p>
              )
            }}
          </Mouse>
          {/* 3、使用props.render()的返回值作为要渲染的内容，添加一张随坐标移动的图片*/}
          <Mouse>
            {mouse => {
              return (
                  <img src={img} alt="React" style={{
                    position: 'absolute',
                    top: mouse.y,
                    left: mouse.x
                  }}/>
              )
            }}
          </Mouse>
        </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

3、代码优化

给render props模式添加props校验（推荐）
应该在组件卸载时解除mousemove事件绑定

（三）高阶组件

1、使用步骤

创建一个函数，名称约定以with开头
指定函数参数，参数应该以大写字母开头（作为要渲染的组件）
在函数内部创建一个类组件，提供复用的状态逻辑代码，并返回
在该组件中，渲染参数组件，同时将状态通过prop传递给参数组件
调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面中

// 1、创建高阶组件（函数）withMouse+2、指定函数参数wrappedComponent
function withMouse(WrappedComponent) {
  // 3、创建一个类组件，提供复用的状态逻辑代码
  class Mouse extends React.Component {
    state = {
      x: 0,
      y: 0
    }
    handleMouseMove = e => {
    this.setState({
      x: e.clientX,
      y: e.clientY
    })
  }
    // 该组件提供复用的状态逻辑
    componentDidMount() {
      window.addEventListener('mousemove', this.handleMouseMove)
    }
    componentWillUnmount() {
      window.removeEventListener('mousemove', this.handleMouseMove)
    }
    render() {
      // 4、渲染参数组件，同时将状态通过prop传递给参数组件
      return <WrappedComponent {...this.state}></WrappedComponent>
    }
  }
  return Mouse
}

const Position = props => (
    <p>
      鼠标当前位置：(x: {props.x}, y: {props.y})
    </p>
)

const Reactimg = props => (
    <img src={img} alt="React" style={{
      position: 'absolute',
      top: props.y,
      left: props.x
    }}/>
)

// 5、获取增强后的组件
const MousePosition = withMouse(Position)
const MouseImg = withMouse(Reactimg)

class App extends React.Component {
  render() {
    return (
        <div>
          <h1>高阶组件</h1>
          {/*6、渲染增强后的组件*/}
          <MousePosition/>
          <MouseImg/>
        </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

2、设置displayName

问题：当使用高阶组件时会存在一个问题：通过同一个高阶组件包装的两个组件名称相同
原因：默认情况下，React使用组件名称作为displayName
解决：因此在使用时需要通过为高阶组件设置不同的displayName来区分各组件，便于调试时区分不同的组件
displayName作用：用于设置调试信息（React Reveloper Tools信息）
设置方式：

Mouse.displayName = 'WithMouse${getDisplayName(WrappedComponent)}'

function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}

码农公寓

一、组件通讯

（一）父传子