React---新扩展RenderProps和ErrorBoundary

一、render props

1.如何向组件内部动态传入带内容的结构(标签)?

 

    Vue中: 

        使用slot技术, 也就是通过组件标签体传入结构  <AA><BB/></AA>

    React中:

        使用children props: 通过组件标签体传入结构

        使用render props: 通过组件标签属性传入结构, 一般用render函数属性

 

2.children props

    <A>

      <B>xxxx</B>

    </A>

    {this.props.children}

    问题: 如果B组件需要A组件内的数据, ==> 做不到 

3.render props

    <A render={(data) => <C data={data}></C>}></A>

    A组件: {this.props.render(内部state数据)}

    C组件: 读取A组件传入的数据显示 {this.props.data} 

4.代码

import React, { Component } from 'react'
import './index.css'
import C from '../1_setState'

export default class Parent extends Component {
    render() {
        return (
            <div className="parent">
                <h3>我是Parent组件</h3>
                <A render={(name)=><C name={name}/>}/>
            </div>
        )
    }
}

class A extends Component {
    state = {name:'tom'}
    render() {
        console.log(this.props);
        const {name} = this.state
        return (
            <div className="a">
                <h3>我是A组件</h3>
                {this.props.render(name)}
            </div>
        )
    }
}

class B extends Component {
    render() {
        console.log('B--render');
        return (
            <div className="b">
                <h3>我是B组件,{this.props.name}</h3>
            </div>
        )
    }
}

二、ErrorBoundary错误边界

1. 理解:


  错误边界:用来捕获后代组件错误,渲染出备用页面


2. 特点:


  只能捕获后代组件生命周期产生的错误,不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误


3. 使用方式:


  getDerivedStateFromError配合componentDidCatch

 

  // 生命周期函数,一旦后台组件报错,就会触发

  static getDerivedStateFromError(error) {

      console.log(error);

      // 在render之前触发

      // 返回新的state

      return {

          hasError: true,

      };

  }


  componentDidCatch(error, info) {

      // 统计页面的错误。发送请求发送到后台去

      console.log(error, info);

  }

4. 代码

(1)child.jsx

import React, { Component } from 'react'

export default class Child extends Component {
    state = {
        users:[
            {id:'001',name:'tom',age:18},
            {id:'002',name:'jack',age:19},
            {id:'003',name:'peiqi',age:20},
        ]
        // users:'abc'
    }

    render() {
        return (
            <div>
                <h2>我是Child组件</h2>
                {
                    this.state.users.map((userObj)=>{
                        return <h4 key={userObj.id}>{userObj.name}----{userObj.age}</h4>
                    })
                }
            </div>
        )
    }
}

(2)parent.jsx

import React, { Component } from 'react'
import Child from './Child'

export default class Parent extends Component {

    state = {
        hasError:'' //用于标识子组件是否产生错误
    }

    //当Parent的子组件出现报错时候,会触发getDerivedStateFromError调用,并携带错误信息
    static getDerivedStateFromError(error){
        console.log('@@@',error);
        return {hasError:error}
    }

    componentDidCatch(){
        console.log('此处统计错误,反馈给服务器,用于通知编码人员进行bug的解决');
    }

    render() {
        return (
            <div>
                <h2>我是Parent组件</h2>
                {this.state.hasError ? <h2>当前网络不稳定,稍后再试</h2> : <Child/>}
            </div>
        )
    }
}
上一篇:hibernate+spring mvc, 解决hibernate 对象懒加载 json序列化问题


下一篇:Flutter Duration详细概述