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.代碼

 1 import React, { Component } from 'react'
 2 import './index.css'
 3 import C from '../1_setState'
 4 
 5 export default class Parent extends Component {
 6     render() {
 7         return (
 8             <div className="parent">
 9                 <h3>我是Parent組件</h3>
10                 <A render={(name)=><C name={name}/>}/>
11             </div>
12         )
13     }
14 }
15 
16 class A extends Component {
17     state = {name:'tom'}
18     render() {
19         console.log(this.props);
20         const {name} = this.state
21         return (
22             <div className="a">
23                 <h3>我是A組件</h3>
24                 {this.props.render(name)}
25             </div>
26         )
27     }
28 }
29 
30 class B extends Component {
31     render() {
32         console.log('B--render');
33         return (
34             <div className="b">
35                 <h3>我是B組件,{this.props.name}</h3>
36             </div>
37         )
38     }
39 }

二、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

 1 import React, { Component } from 'react'
 2 
 3 export default class Child extends Component {
 4     state = {
 5         users:[
 6             {id:'001',name:'tom',age:18},
 7             {id:'002',name:'jack',age:19},
 8             {id:'003',name:'peiqi',age:20},
 9         ]
10         // users:'abc'
11     }
12 
13     render() {
14         return (
15             <div>
16                 <h2>我是Child組件</h2>
17                 {
18                     this.state.users.map((userObj)=>{
19                         return <h4 key={userObj.id}>{userObj.name}----{userObj.age}</h4>
20                     })
21                 }
22             </div>
23         )
24     }
25 }

(2)parent.jsx

 1 import React, { Component } from 'react'
 2 import Child from './Child'
 3 
 4 export default class Parent extends Component {
 5 
 6     state = {
 7         hasError:'' //用於標識子組件是否產生錯誤
 8     }
 9 
10     //當Parent的子組件出現報錯時候，會觸發getDerivedStateFromError調用，並攜帶錯誤信息
11     static getDerivedStateFromError(error){
12         console.log('@@@',error);
13         return {hasError:error}
14     }
15 
16     componentDidCatch(){
17         console.log('此處統計錯誤，反饋給服務器，用於通知編碼人員進行bug的解決');
18     }
19 
20     render() {
21         return (
22             <div>
23                 <h2>我是Parent組件</h2>
24                 {this.state.hasError ? <h2>當前網絡不穩定，稍後再試</h2> : <Child/>}
25             </div>
26         )
27     }
28 }