react中context傳值和生命周期詳解
假設：
項目中存在復雜組件樹：
context傳值用途
數據是通過 props 屬性自上而下（由父及子）進行傳遞的，但這種做法對於某些類型的屬性而言是極其繁瑣的（例如：地區偏好，UI 主題），這些屬性是應用程序中許多組件都需要的。
Context傳值優點
Context 提供瞭一種在組件之間共享此類值的方式，而不必顯式地通過組件樹的逐層傳遞 props。
何時使用 Context
Context 設計目的是為瞭共享那些對於一個組件樹而言是“全局”的數據，例如當前認證的用戶、主題或首選語言。
ContextAPI
1.React.createContext API
功能：
創建一個 Context 對象。
//代碼
//創建context對象的
import React from 'react'
let context=React.createContext();
export default context;
2.Context.Provider API
功能：
Provider 是context對象提供的內置組件 限定在某個作用域中使用context傳值。
限定作用域傳值。
3.Context.Consumer
context對象的內置組件
<MyContext.Consumer>
{value => /* 基於 context 值進行渲染*/}
</MyContext.Consumer>
作用：監聽訂閱的context變更，
這個函數接收當前的 context 值，返回一個 React 節點。
項目案例：主題色切換。
1.創建context.js文件 創建context對象 用來做context傳值。 //創建context對象的 import React from 'react' export default React.createContext();
2。使用context找到限定范圍使用內置組件Provider
{/* 使用Provider 內置組件限定context范圍 */}
{/* value 必填 context傳遞的值 */}
<ThemeContext.Provider>
<div className="Admin">
<div className="LeftMenu">
<LeftMenu></LeftMenu>
</div>
<div className="RightContent">
<div className="RightContent-top">
<TopHeader></TopHeader>
</div>
<div className="RightContent-bottom">
<Dashborder></Dashborder>
</div>
</div>
</ThemeContext.Provider>
瀏覽器報錯：
3.在使用context的組件中進行訂閱
左側菜單組件
import React, { Component } from "react";
console.log(Component);
//引入context對象
import ThemeContext from "../components/context";
class LeftMenu extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<>
<div>左側菜單</div>
</>
);
}
}
//class類組件存在contextType 綁定context對象
LeftMenu.contextType = ThemeContext;
組件中綁定context之後使用：
意味著訂閱context組件的內部使用this.context獲取。
render() {
//獲取context
let theme = this.context;
return (
<>
<div className={theme}>左側菜單</div>
</>
);
}
固定主體修改為動態主體
修改瞭context文件代碼
//定義默認主體色
export const themes = {
dark: {
backgroundColor: "#000",
color: "#fff",
},
light: {
backgroundColor: "#fff",
color: "#000",
},
};
//創建context對象的
import React from "react";
export const ThemeContext = React.createContext();
app.js文件中獲取主題，動態切換主題。使用主題變量
constructor(props) {
super(props);
this.state = {
//將固定的主體設置為state狀態
themeType: "dark",//控制主體切換
nowTheme: themes["dark"],//獲取當前默認主體
};
}
render() {
//解構獲取
let { nowTheme } = this.state;
return (
<>
{/* 使用Provider 內置組件限定context范圍 */}
{/* value 必填 context傳遞的值 */}
<ThemeContext.Provider value={nowTheme}>
訂閱組件中使用this.context獲取訂閱
render() {
//獲取context
let { backgroundColor, color } = this.context;
return (
<>
//直接綁定行內css
<div style={{ backgroundColor: backgroundColor, color: color }}>
左側菜單
</div>
</>
);
}
用戶點擊其他組件修改主題的按鈕來變更主題
註意：不能直接使用this.context修改變量值
//可以在provider組件上 value中攜帶修改函數傳遞。在訂閱組件中獲取修改方法，執行反向傳遞值。
//修改主題變量方法
changeTheme(type) {
console.log("測試", type);
this.setState({ themeType: type, nowTheme: themes[type] });
}
render() {
//解構獲取
let { nowTheme } = this.state;
return (
<>
{/* 使用Provider 內置組件限定context范圍 */}
{/* value 必填 context傳遞的值 */}
<ThemeContext.Provider
value={{ ...nowTheme, handler: this.changeTheme.bind(this) }}
>
<div className="Admin">
<div className="LeftMenu">
<LeftMenu></LeftMenu>
</div>
<div className="RightContent">
<div className="RightContent-top">
<TopHeader></TopHeader>
</div>
<div className="RightContent-bottom">
<Dashborder></Dashborder>
</div>
</div>
</div>
</ThemeContext.Provider>
</>
);
//在訂閱組件中直接使用
//修改主題的方法
change(themeType) {
console.log(themeType);
//獲取provider傳遞方法
let { handler } = this.context;
handler(themeType);
}
render() {
let { themeButton } = this.state;
return (
<>
<div>
<span>主題色：</span>
<div>
{/* 控制左側菜單和上header背景色 */}
{themeButton.map((item, index) => {
return (
<button key={index} onClick={this.change.bind(this, item.type)}>
{item.name}
</button>
);
})}
</div>
</div>
</>
);
添加自定義顏色
{/* 顏色選擇器 */}
背景色：
<input
type="color"
name="selectbgColor"
value={selectbgColor}
onChange={this.changeColor.bind(this)}
/>
字體色：
<input
type="color"
name="selectColor"
value={selectColor}
onChange={this.changeColor.bind(this)}
/>
<button onClick={this.yesHandler.bind(this)}>確認</button>
//代碼區域操作事件向父級傳遞參數
//確認修改
yesHandler() {
let { myhandler } = this.context;
let { selectbgColor, selectColor } = this.state;
console.log(selectbgColor, selectColor);
myhandler(selectbgColor, selectColor);
}
添加監聽context變化
{/*監聽context value值*/}
<ThemeContext.Consumer>
{(value) => {
let { backgroundColor, color } = value;
return (
<>
<span>背景色：{backgroundColor}</span>
<span>文字色：{color}</span>
</>
);
}}
</ThemeContext.Consumer>
類組件的生命周期
組件生命周期解釋：組件初始化到銷毀整個過程。
生命周期三類：
- Mounting(掛載)：已插入真實 DOM
- Updating(更新)：正在被重新渲染
- Unmounting(卸載)：已移出真實 DOM
第一個階段：
代碼演示第一個階段初始化掛載階段
import React, { Component } from "react";
class App extends Component {
constructor(props) {
super(props);
this.state = {};
console.log("初始化");
}
componentDidMount() {
console.log("掛載完成");
}
render() {
console.log("渲染");
return (
<>
<div>測試</div>
</>
);
}
}
export default App;
添加瞭掛載之前周期
UNSAFE_componentWillMount() {
console.log("掛載之前");
}
//18.x 版本中UNSAFE_ 前綴
第二個階段：更新階段 能觸發類組件更新 props state
添加瞭更新之前周期
componentWillUpdate() {
console.log("更新之前");
}
第三階段卸載：
//卸載周期
componentWillUnmount() {
console.log("組件卸載");
}
常用周期：
測試完成之後：18版本直接使用周期以上三個。
react推薦網絡請求在componentDidMount 卸載清除副作用 componentWillUnmount
確認當前組件是否更新周期
//確認是否更新周期
//必須帶返回值 true false
//提升性能
shouldComponentUpdate(nextProps, nextState, nextContext) {
console.log(nextProps);
if (nextProps.name == this.props.name) return false;
else return true;
}
不寫該周期默認是執行更新
1.componentWillMount() - 在染之前執行，在客戶端和服務器端都會執行. 2.componentDidMount() - 是掛在完成之後執行一次 3.componentWillReceiveProps() - 當從父類接收到 props 並且在調用另一個渲染器器之前調用。4.shouldComponentUpdatel) -根據特定條件返回 true 或 false如果你希望更新組件，請返回true 否則返它返回 false。 5.componentWillUpdate() - 是當前組件state和props發生變化之前執行 6.componentDidUpdate()-是當前組件state和props發生變化執行 7.componentWillUnmount0) - 從 DOM 卸載組件後調用。用於清理內存空間
到此這篇關於react中context傳值和生命周期的文章就介紹到這瞭,更多相關react context傳值和生命周期內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！
推薦閱讀：
- React高級特性Context萬字詳細解讀
- React組件間通信的三種方法（簡單易用）
- React高階組件的使用淺析
- 代碼解析React中setState同步和異步問題
- 使用react-color實現前端取色器的方法