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

最新推荐文章于 2023-09-11 17:09:19 发布

lllllllwj

最新推荐文章于 2023-09-11 17:09:19 发布

阅读量753

点赞数 1

本文链接：https://blog.csdn.net/lllllllwj/article/details/90214451

版权

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

案例代码

    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

组件通信

父子通信

父组件将一个数据传递给子组件，但是这个数据只有父组件有权利更改，子组件不可以

ref链绑定

ref = “son”
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

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

   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

跨组件通信
context

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

context 使用步骤：

创建context
const MoneyContext = React.crateContext(默认值)
使用创建的Context包裹目标组件的父组件

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

在目标组件中定义一个类属性 , 这个类属性叫做 contextType
直接在目标组件中通过 this.context 就可以获得数据了

  
    class Son extends Component {

      static contextType = MoneyContext

      render () {

        return (
          <Fragment>
            <h3> son 组件  </h3>
            <p> 爷爷给了我： { this.context } </p>
          </Fragment>
        )

      }

    }

非父子组件通信（多组件状态共享）
- react-router (react路由版本3)/ react-router-dom（react路由版本4）
- flux
- redux
- mobx

HOC ( Higher Order Component) 高阶组件

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

格式

 
 const Hoc = ( Comp ) => {
   return class 类名称 extends React.Component {
     render () {
       return <Comp></Comp>
     }
   }
 }

 //这里的Hoc就是一个高阶组件

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

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

  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