欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React Context詳解使用過程

 更新時間:2023年03月06日 09:25:27   作者:?QSω[*邱╭  
在Reactor中提供了Context來替代ThreadLocal,可以實現(xiàn)一個跨線程的共享變量的透明方式。本文主要為大家介紹了Context的用法的用法,感興趣的可以了解一下

1.Context是干嘛的

一種React組件間通信方式, 常用于【祖組件】與【后代組件】間通信

2.可以倒是可以實現(xiàn)的做法-props逐級傳遞

import React, { Component } from "react";
import "./index.css";
export default class A extends Component {
  state = { username: "tom", age: 18 };
  render() {
    const { username, age } = this.state;
    return (
      <div className="parent">
        <h3>我是A組件</h3>
        <h4>我的用戶名是:{username}</h4>
        <B username={username} age={age}></B>
      </div>
    );
  }
}
class B extends Component {
  render() {
    console.log(this.props);
    const { username, age } = this.props;
    return (
      <div className="child">
        <h3>我是B組件</h3>
        <C username={username} age={age} />
      </div>
    );
  }
}
function C(props) {
	const { username, age } = props;
  return (
    <div className="grand">
      <h3>我是C組件</h3>
      <h4>
        我從A組件接收到的用戶名:{username},年齡是{age}
      </h4>
    </div>
  );
}

這里C組件用了下函數(shù)式組件的寫法

但是這種寫法有很多的不太好的地方,如果層級再深一點呢,傳的值再多一點呢??隙〞泻芏嗟闹貜?fù)代碼出現(xiàn),而且我只想要祖組件和孫組件通信,這樣寫的話其實是每個組件都在通信了的

3.Context

Context的就可以挺好的適用于這種場景

創(chuàng)建Context容器對象:
const XxxContext = React.createContext()
2) 渲染子組時,外面包裹xxxContext.Provider, 通過value屬性給后代組件傳遞數(shù)據(jù):
<xxxContext.Provider value={數(shù)據(jù)}>
子組件
</xxxContext.Provider>
3) 后代組件讀取數(shù)據(jù):
//第一種方式:僅適用于類組件
static contextType = xxxContext // 聲明接收context
this.context // 讀取context中的value數(shù)據(jù)
//第二種方式: 函數(shù)組件與類組件都可以
<xxxContext.Consumer>
{
value => ( // value就是context中的value數(shù)據(jù)
要顯示的內(nèi)容
)
}
</xxxContext.Consumer>

上代碼

import React, { Component } from "react";
import "./index.css";
//創(chuàng)建Context對象
const MyContext = React.createContext();
const { Provider, Consumer } = MyContext;
export default class A extends Component {
  state = { username: "tom", age: 18 };
  render() {
    const { username, age } = this.state;
    return (
      <div className="parent">
        <h3>我是A組件</h3>
        <h4>我的用戶名是:{username}</h4>
        //如果傳的只有一個值例如username,應(yīng)該式value={username},后面就是直接獲取了,不需要再屬性名取值了
        <Provider value={{ username, age }}>
          <B />
        </Provider>
      </div>
    );
  }
}
class B extends Component {
  render() {
    return (
      <div className="child">
        <h3>我是B組件</h3>
        <C/>
      </div>
    );
  }
}
 class C extends Component {
	//聲明接收context
	static contextType = MyContext
	render() {
		const {username,age} = this.context
		return (
			<div className="grand">
				<h3>我是C組件</h3>
				<h4>我從A組件接收到的用戶名:{username},年齡是{age}</h4>
			</div>
		)
	}
} 
// function C() {
//   return (
//     <div className="grand">
//       <h3>我是C組件</h3>
//       <h4>
//         我從A組件接收到的用戶名:
//         {/* <Consumer>{(value) => `${value.username},年齡是${value.age}`}</Consumer> */}
//       </h4>
//     </div>
//   );
// }

到此這篇關(guān)于React Context詳解使用過程的文章就介紹到這了,更多相關(guān)React Context內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • React Native中NavigatorIOS組件的簡單使用詳解

    React Native中NavigatorIOS組件的簡單使用詳解

    這篇文章主要介紹了React Native中NavigatorIOS組件的簡單使用詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-01
  • React state狀態(tài)屬性詳細(xì)講解

    React state狀態(tài)屬性詳細(xì)講解

    React將組件(component)看成一個狀態(tài)機(State Machines),通過其內(nèi)部自定義的狀態(tài)(State)和生命周期(Lifecycle)實現(xiàn)并與用戶交互,維持組件的不同狀態(tài)
    2022-09-09
  • 詳解Jotai Immer如何實現(xiàn)undo redo功能示例詳解

    詳解Jotai Immer如何實現(xiàn)undo redo功能示例詳解

    這篇文章主要為大家介紹了詳解Jotai Immer如何實現(xiàn)undo redo功能示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-04-04
  • React獲取url后面參數(shù)的值示例代碼

    React獲取url后面參數(shù)的值示例代碼

    這篇文章主要介紹了React獲取url后面參數(shù)的值示例代碼,代碼簡單易懂,文末給大家補充介紹了react獲取URL中參數(shù)方法,需要的朋友可以參考下
    2022-12-12
  • 淺談react受控組件與非受控組件(小結(jié))

    淺談react受控組件與非受控組件(小結(jié))

    本篇文章主要介紹了淺談react受控組件與非受控組件(小結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-02-02
  • React之錯誤邊界 Error Boundaries示例詳解

    React之錯誤邊界 Error Boundaries示例詳解

    這篇文章主要為大家介紹了React之錯誤邊界Error Boundaries示例教程,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-10-10
  • 詳解升級react-router 4 踩坑指南

    詳解升級react-router 4 踩坑指南

    本篇文章主要介紹了詳解升級react-router 4 踩坑指南,主要是對react-router 4升級的踩坑總結(jié),有興趣的可以了解一下
    2017-08-08
  • react腳手架如何配置less和ant按需加載的方法步驟

    react腳手架如何配置less和ant按需加載的方法步驟

    這篇文章主要介紹了react腳手架如何配置less和ant按需加載的方法步驟,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • 詳解react、redux、react-redux之間的關(guān)系

    詳解react、redux、react-redux之間的關(guān)系

    這篇文章主要介紹了詳解react、redux、react-redux之間的關(guān)系,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • React中遍歷數(shù)組生成標(biāo)簽問題

    React中遍歷數(shù)組生成標(biāo)簽問題

    這篇文章主要介紹了React中遍歷數(shù)組生成標(biāo)簽問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01

最新評論