React 组件( 父子组件通信, 子父通信, 跨组件通信, 非父子组件通信,高阶组件 )

生命周期第四个阶段 – 错误处理

案例代码

    import React from 'react'

    class Error extends React.Component {   
      constructor(props) {     
        super(props);     
        this.state = { error: false };
      }
      componentDidCatch(error, info) {    
        console.log('错误处理-componentDidCatch') 
        this.setState({ error, info });
      }

      errorHandle = () => {
        this.setState({
          error: true
        })
      }

      render() {
        if (this.state.error) {
          return (
            <div>
              <p> 报错了 </p>
              {
                console.log(new Error("YOLO"))
              }
            </div>
          )
        }
        return (
          <div>
            <button onClick = { this.errorHandle }>
              抛出错误
            </button>
          </div>
        );   
      } 
    }

    export default Error

组件通信

1. 父子通信

   1. 父组件将一个数据传递给子组件，但是这个数据只有父组件有权利更改，子组件不可以
   2. ref链绑定
      1. ref = “son”
      2. ref = { el => this.el = el} 如果是一个函数，这里的el指的就是当前组件 【推荐】

          import React, { Component,Fragment } from 'react';
      
          class Father extends Component {
      
              
      
              changeSonName = () =>{
                  this.son.setState({
                      name :"小红"
                  })
              }
      
              render () {
                  return (
                      <Fragment>
                          <button
                          onClick = { this.changeSonName }
                          >
                              改变儿子名字
                          </button>
                          <Son
                          ref = { el => this.son = el }
                          ></Son>
                      </Fragment>
                  )
              }
          }
      
      
          class Son extends Component {
      
              constructor () {
                  super()
                  this.state = {
                      name :"小明"
                  }
              }
      
              render () {
                  let { name } = this.state
                  return (
                      <Fragment>
                          <p>
                              我给儿子取了个名字叫:{ name }
                          </p>
                        
                      </Fragment>
                  )
              }
          }
      
          export default Father
      

2. 子父通信
   父组件传递一个方法给子组件

      import React, { Component,Fragment } from 'react';
   
      class Father extends Component {
   
          constructor () {
              super()
              this.state = {
                  sonName : "小明"
              }
          }
   
          changeSonName = () =>{
              this.setState({
                  sonName : "小红"
              })
          }
   
          render () {
              let { sonName } = this.state
              return (
                  <Fragment>
                      {/* <button
                      onClick = { this.changeSonName }
                      >
                          改变儿子名字
                      </button> */}
                      <Son
                      sonName = { sonName }
                      changeSonName = { this.changeSonName }
                      ></Son>
                  </Fragment>
              )
          }
      }
   
   
      class Son extends Component {
          render () {
              let { sonName,changeSonName } = this.props
              return (
                  <Fragment>
                      <p>
                          我给儿子取了个名字叫:{ sonName }
                      </p>
                      <button
                      onClick = { changeSonName }
                      >
                          改变儿子名字
                      </button>
                  </Fragment>
              )
          }
      }
   
      export default Father
   

3. 跨组件通信
   context

   原先的跨组件传递要一级一级的传递数据，这种形式很是低效，context的出现解决了这个低效的方案

   context 使用步骤：

   1. 创建context
      const MoneyContext = React.crateContext(默认值)

   2. 使用 创建的Context包裹目标组件的父组件

     <MoneyContext.Provider value = "20000">
       <Father></Father>
     </MoneyContext.Provider>
   

   3. 在目标组件中定义一个类属性 , 这个类属性叫做 contextType

   4. 直接在目标组件中 通过 this.context 就可以获得数据了

     
       class Son extends Component {
   
         static contextType = MoneyContext
   
         render () {
   
           return (
             <Fragment>
               <h3> son 组件  </h3>
               <p> 爷爷给了我： { this.context } </p>
             </Fragment>
           )
   
         }
   
       }
   
   

4. 非父子组件通信（ 多组件状态共享 ）

   • react-router (react路由版本3)/ react-router-dom（react路由版本4）
   • flux
   • redux
   • mobx

HOC ( Higher Order Component) 高阶组件

1. 什么是高阶组件？
   高阶组件就是一个函数， 这个函数接收一个参数， 这个参数是一个组件

2. 格式

    
    const Hoc = ( Comp ) => {
      return class 类名称 extends React.Component {
        render () {
          return <Comp></Comp>
        }
      }
    }
   
    //这里的Hoc就是一个高阶组件
   

3. 为什么要用高阶组件？ （ 高阶组件的好处 / 功能）
   组件复用

   接下来以一个案例的形式，来说明一个高阶组件

     import React, { Component } from 'react';
   
     // 高阶组件
   
     const Hoc = ( Comp ) => {
       return class Banner extends Component{
         banner () {
           //假设我定义个方法，这个方法就是实现一个轮播图
           return 'banner'
         }
         render () {
           return <Comp banner = { this.banner }></Comp>
         }
       }
     }
   
   
     class A extends Component {
       render () {
         return (
           <div>
             <h3> A组件 </h3>
             { this.props.banner() }
           </div>
         )
       }
     }
     class B extends Component {
   
       render () {
         return (
           <div>
             <h3> b组件 </h3>
             { this.props.banner() }
           </div>
         )
       }
     }
   
   
     const HocA = Hoc( A )
     const HocB = Hoc( B )
   
   
     class C extends Component {
   
       render () {
         return (
           <div>
             <h3> C组件 </h3>
           <HocA></HocA>
           <hr/>
           <HocB></HocB>
           </div>
         )
       }
     }
   
   
     export default C