React【Context_作用、函数组件订阅Context、Fragments 、错误边界_概念、错误边界_应用、Refs & DOM】(四)

小咪咪 2023-10-16 12:49 8阅读 0赞

### ![d10f44ecf5094ff29cc27ada861535dd.gif][] ###

**目录**

Context\_作用

函数组件订阅Context

Fragments

错误边界\_概念

错误边界\_应用

Refs & DOM

--------------------

### Context\_作用 ###

![33c56615a09a44dfbcb22d74ff0687da.png][]

React组件中数据是通过 props 属性自上而下（由父及子）进行传递的，但是有的时候中间的一些组件可能并不需要props的值。

//App.js
    return (
        <div>
          <ContextTest />
        </div>
     );

//ContextTest.js
    import React from 'react'
    import NavBar from './NavBar'
    export default class ContextTest extends
    React.Component{
        constructor(props){
            super(props)
            this.state={user:{name:'小童',account:'baizhan'}}
       }
        render(){
            return <div>
                <NavBar user={this.state.user}/>
            </div>
       }
    }

//NavBar.js
    import React, { Component } from 'react'
    import UserInfo from './UserInfo'
    export default class NabBar extends
    Component {
      render() {
        return (
          <div style= {
       {height:'50px',background:'#ccc',display:'flex',justifyContent:'space-around',alignItems:'center'}}>
           NabBar的内容
            <UserInfo user={this.props.user}/>
            </div>
       )
     }
    }

//UserInfo.js
    import React, { Component } from 'react'
    export default class UserInfo extends
    Component {
      render() {
        return (
          <div>你好，欢迎 {this.props.user.account}</div>
       )
     }
    }

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

**何时使用 Context**

如果我们要在组件树中去共享某些数据，并且要避免通过中间元素传递 props，则可以使用Context来实现。

**Context\_应用**

![605052a72995481bb52fd0270bd0d0d6.png][]

**1、创建Context对象**

> React.createContext(defaultValue)

const MyContext = React.createContext(defaultValue);

**2、 Context 的 Provider 组件**

Contenxt的Provider组件用来提供其它组件要共享的数据。  
设置 value 属性来设置要共享的数据。

<MyContext.Provider value={/* 某个值 */}>

**3、Context 的 Provider 组件**

Contenxt的Provider组件用来提供其它组件要共享的数据。  
设置 value 属性来设置要共享的数据。

<MyContext.Provider value={/* 某个值 */}>

> 提示：我们把要使用共享数据的组件称为 消费组件 。

**Class.contextType**

为组件类添加 contextType 属性，从而获取Context对象。

MyClass.contextType = MyContext;

> 提示：  
> 挂载在 **class**上的**contextType** 属性会被重赋值为一个由  
> **React.createContext()** 创建的 **Context** 对象。这能让你使用this.context 来消费最近 **Context** 上的那个值。  
> 你可以在任何生命周期中访问到它，包括 **render**函数中。

//MyContext.js
    import React from "react";
    
    
    export default
    React.createContext({name:'',account:'xxx'})

//ContextTest.js
    import React from 'react'
    import MyContext from './MyContext'
    import NavBar from './NavBar'
    export default class ContextTest extends
    React.Component {
        constructor(props) {
            super(props)
            this.state = { user: { name: '小童',account: 'xiaotong' } }
       }
        
        render() {
            return <div>
                 {/* 使用Provider组件提供数据 */}
                <MyContext.Provider value= {this.state.user }>
                    <NavBar />
                </MyContext.Provider>
            </div>
       }
    }

//NabBar.js
    import React, { Component } from 'react'
    import UserInfo from './UserInfo'
    export default class NabBar extends
    Component {
      render() {
        return (
          <div style= {
       {height:'50px',background:'#ccc',display:'flex',justifyContent:'space-around',alignItems:'center'}}>
            NabBar的内容
            <UserInfo />
            
            </div>
       )
     }
    }

//UserInfo.js
    import React, { Component } from 'react'
    import MyContext from './MyContext'
    
    export default class UserInfo extends
    Component {
      render() {
        console.log(this.context)
        return (
          <div>你好，欢迎 {this.context.account}</div>
       )
     }
    }
    //设置类的contentType属性，从而获取context对象
    UserInfo.contextType=MyContext

### 函数组件订阅Context ###

###     ###

![4d2e872524654984972b438e4513df83.png][]

**Context.Consumer**

<MyContext.Consumer>
     {value => /* 基于 context 值进行渲染*/}
    </MyContext.Consumer>

//ContextTest.js
    render() {
            return <div>
               {/* 使用Provider组件提供数据 */}
                <MyContext.Provider value= {this.state.user }>
                    <NavBar />
                    <MyContext.Consumer>
                       {value=><div>
                            <h3>函数组件</h3>
                           获取到的账户：{value.account}
                            </div>}
                        
                    </MyContext.Consumer>
                  
                </MyContext.Provider>
                
            </div>
       }

**Context更新**  
当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染。

//ContextTest.js
    render() {
            return <div>
                <button onClick= {()=>this.setState({user:{name:"xiaotong",account:'xiaotong123'}})}>更新user</button>
               {/* 使用Provider组件提供数据 */}
                <MyContext.Provider value={this.state.user }>
                    <NavBar />
                    <MyContext.Consumer>
                       {value=><div>
                            <h3>函数组件</h3>
                           获取到的账户：{value.account}
                            </div>}
                        
                    </MyContext.Consumer>
                  
                </MyContext.Provider>
                
            </div>
       }

> 提示：消费组件是否重新渲染不受shouldComponentUpdate的控制。  
> 其父组件使用shouldComponentUpdate停止了渲染或者消费组件本身使用shouldComponentUpdate停止渲染，也不影响消费组件的继续更新。  
>

//NavBar.js
    export default class NabBar extends
    Component {
      shouldComponentUpdate(){
          //当前这个非消费组件会停止更新渲染，但是它的子组件UserInfo是Context的消费组件，还会继续更新
        return false
     }
      render() {
        console.log('navbar')
        return (
          <div style= {
       {height:'50px',background:'#ccc',display:'flex',justifyContent:'space-around',alignItems:'center'}}>
           NabBar的内容
            <UserInfo />
            
            </div>
       )
     }
    }

//UserInfo.js
    import React, { Component } from 'react'
    import MyContext from './MyContext'
    export default class UserInfo extends
    Component {
        shouldComponentUpdate() {
            //虽然返回了false，但是context的值发生变化了，我还是要重新渲染的
            return false
       }
        render() {
            return (
                <div>你好，欢迎{this.context.account}</div>
           )
       }
    }
    UserInfo.contextType = MyContext

### Fragments ###

![8ff1482980664e5d8c01dc79c919c285.png][]

**场景一：**

render() {
        return (
          <p></p>
          <p></p>
       )
     }

> 提示： react当中，组件的界面只能有一个根标签。

**场景二：**

render() {
        return (
            // 最外层的这个div可能根本不需要，不想让它渲染到页面上
            <div>
                 <p></p><p></p>
            </div>
        
       )
     }

**Fragments** 允许你将子元素包裹在一起，而无需向 DOM 添加额外节点。

render() {
        return (
       <React.Fragment>
          <p></p>
          <p></p>
       </React.Fragment>
       )
     }

最终页面渲染结果：  
![ffd8cf9b8d444b4288964ee57a440fda.png][]

1、Fragments 短语法

使用 <></> 代替 <React.Fragment></React.Fragment>

render() {
        return (
       <>
          <p></p>
          <p></p>
       </>
       )
     }

> 提示：  
> 因为Fragments最终不会被渲染为DOM，所以不要在Framents上面绑定事件或者设置一些其它属性，目前只支持设置key属性。

### 错误边界\_概念 ###

![c0d80dd902ba497b986ebe3a56522f67.png][]

通常某一个组件中发生的错误会导致整个应用崩溃，页面一片空白。

//App.js
    render() {
        return (
          <>
            <ContextTest />
            <SomethingWrong />
          </>
       )
     }

//SomethingWrong.js
    export default class SomethingWrong extends
    Component {
      constructor(){
         // 未调用super，则会抛出错误
     }  
      render() {
        return (
          <div>
            <Child/>
          </div>
       )
     }
    }

> 如果我们想让未出现错误的组件还能继续渲染，则可以使用 错误边界 。  
> 错误边界 是一种 React 组件。  
> 错误边界 可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且，它可以渲染出备用 UI。  
> 错误边界 在渲染期间、生命周期方法和整个子组件树的构造函数中捕获错误。

> 提示： 错误边界无法捕获以下场景中产生的错误：  
> 1、事件处理  
> 2、异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）
> 
> 3、它自身抛出来的错误（并非它的子组件）

### 错误边界\_应用 ###

![de0980020ca54a86869cb3bfdbec479f.png][]

> 1、 定义一个错误边界的组件  
> class 组件中定义了 **static getDerivedStateFromError()** 或 **componentDidCatch()** 这两个生命周期方法中的任意一个（或两个）时，那么这个组件就变成一个错误边界的组件。

import React, { Component } from 'react'
    export default class ErrorBoundary extends
    Component {
        constructor() {
            super()
            this.state = { }
       }
        componentDidCatch(error, errorInfo) {
            // 捕获到子组件树当中发生的错误时调用
            this.setState({
              error: error,
              errorInfo: errorInfo
           })
            
         }
        render() {
            return (
               this.state.errorInfo ? <div>奥，糟糕！！发生了一些错误：
                   错误信息如下：<br />
                   {this.state.error && this.state.error.toString()}
                <br />
               {this.state.errorInfo.componentStack}
                  
                </div> : this.props.children
           )
       }
    }

错误边界的使用

//App.js
    render() {
        return (
          <>
            <ContextTest />
             {/* 使用错误边界组件包裹的组件树，发生的错误都会被这个错误边界捕获 */}
            <ErrorBoundary>
              <SomethingWrong />
            </ErrorBoundary>
          </>
       )
     }

**错误边界无法捕获的错误**

![0f248ac4133147a29d2fef2ed7e6c3aa.png][]

错误边界无法捕获的错误，比如事件处理，异步操作。可以使用原生js支持的一些方法去捕获。

**try/catch**

onClick=()=>{
        try{
            //使用一个未定义的变量a,会报错
           console.log(a)
       }catch(e){
            console.log(e)
            this.setState({hasError:true})
       }
        
     }
      render() {
        return (
          <div>
            <button onClick={this.onClick}>点击</button>
           {this.state.hasError?<div>出现错误了</div>:null}
          </div>
       )
     }

**window.onerror**

window.onerror可以捕捉语法错误，也可以捕捉运行时错误，只要在当前window执行的Js脚本出错都会捕捉到。

window.onerror=function(err){
      console.log(err)
    }

### Refs & DOM ###

![721d1ac2a98b4251b96fec30dccadb42.png][]

Refs 提供了一种方式，允许我们访问DOM 元素。

**创建 Refs**  
使用 React.createRef() 创建的。  
通常将 Refs 分配给实例属性，以便可以在整个组件中引用它们。

constructor(props) {
        super(props);
        this.myRef = React.createRef();
     }

使用Refs  
给对应的React 元素设置 **ref** 属性，则相当于使用 **ref** 去存储DOM 节点的引用。

render() {
        return <input ref={this.myRef} />;
     }

访问Refs  
当 **ref**被传递给**render** 中的元素时，对该节点的引用可以在**ref**的 **current**属性中被访问。

componentDidMount(){
        const node = this.myRef.current;
        node.focus()
     }

> 提示：  
> React 会在组件挂载时给 current 属性传入 DOM 元素，并在组件卸载时传入 null 值。
> 
> **ref** 会在 **componentDidMount** 或 **componentDidUpdate**  
> 生命周期钩子触发前更新。

[d10f44ecf5094ff29cc27ada861535dd.gif]: https://img-blog.csdnimg.cn/d10f44ecf5094ff29cc27ada861535dd.gif
[33c56615a09a44dfbcb22d74ff0687da.png]: https://img-blog.csdnimg.cn/33c56615a09a44dfbcb22d74ff0687da.png
[605052a72995481bb52fd0270bd0d0d6.png]: https://img-blog.csdnimg.cn/605052a72995481bb52fd0270bd0d0d6.png
[4d2e872524654984972b438e4513df83.png]: https://img-blog.csdnimg.cn/4d2e872524654984972b438e4513df83.png
[8ff1482980664e5d8c01dc79c919c285.png]: https://img-blog.csdnimg.cn/8ff1482980664e5d8c01dc79c919c285.png
[ffd8cf9b8d444b4288964ee57a440fda.png]: https://img-blog.csdnimg.cn/ffd8cf9b8d444b4288964ee57a440fda.png
[c0d80dd902ba497b986ebe3a56522f67.png]: https://img-blog.csdnimg.cn/c0d80dd902ba497b986ebe3a56522f67.png
[de0980020ca54a86869cb3bfdbec479f.png]: https://img-blog.csdnimg.cn/de0980020ca54a86869cb3bfdbec479f.png
[0f248ac4133147a29d2fef2ed7e6c3aa.png]: https://img-blog.csdnimg.cn/0f248ac4133147a29d2fef2ed7e6c3aa.png
[721d1ac2a98b4251b96fec30dccadb42.png]: https://img-blog.csdnimg.cn/721d1ac2a98b4251b96fec30dccadb42.png