淺析React 對state的理解
如何定義復(fù)雜組件(類組件)與簡單組件(函數(shù)組件)?
- 是否具有狀態(tài)(state)
引出問題,什么是狀態(tài)?
舉個例子,今天考試,考砸了,因為我狀態(tài)不好,是狀態(tài)影響了我的行為。
組件中的狀態(tài),驅(qū)動了頁面更新,換句話說,組件狀態(tài)中存著數(shù)據(jù),數(shù)據(jù)的改變,驅(qū)動頁面的更新。
這里要了解,state狀態(tài)是誰身上的狀態(tài)?state狀態(tài)是組件實例對象身上的狀態(tài),不是組件類本身身上的,是由這個類締造的實例身上的。
(class)組件實例上三大屬性之一:state
顯示內(nèi)容
實現(xiàn)一個需求,通過點擊頁面,炎熱/涼爽切換
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>react</title> </head> <body> <div id="test"></div> <!-- 引入核心庫 --> <script src="../js/react.development.js"></script> <!-- 擴展庫 --> <script src="../js/react-dom.development.js"></script> <!-- 轉(zhuǎn)換jsx轉(zhuǎn)為js --> <script src="../js/babel.min.js"></script> <script type="text/babel"> // 1.創(chuàng)建組件 class Weather extends React.Component { /** * 構(gòu)造器中能收到什么數(shù)據(jù),取決于new的時候,傳的是什么數(shù)據(jù) * new Weather并不是我們操作的,而是react操作的 */ constructor(props) { // 還沒學(xué)到props,但得用著,模仿官網(wǎng)寫 // 類本身語法 super(props); // 構(gòu)造函數(shù)中this指向構(gòu)造函數(shù)實例對象 // 16.8之前,state是{},16.8及之后,是null this.state = { isHot: true, }; } render() { console.log("this:", this); return <h1>今天天氣很炎熱</h1>; } } // 2.渲染組件到頁面 ReactDOM.render(<Weather />, document.getElementById("test")); </script> </body> </html>
初始化數(shù)據(jù)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>react</title> </head> <body> <div id="test"></div> <!-- 引入核心庫 --> <script src="../js/react.development.js"></script> <!-- 擴展庫 --> <script src="../js/react-dom.development.js"></script> <!-- 轉(zhuǎn)換jsx轉(zhuǎn)為js --> <script src="../js/babel.min.js"></script> <script type="text/babel"> // 1.創(chuàng)建組件 class Weather extends React.Component { /** * 構(gòu)造器中能收到什么數(shù)據(jù),取決于new的時候,傳的是什么數(shù)據(jù) * new Weather并不是我們操作的,而是react操作的 */ constructor(props) { // 還沒學(xué)到props,但得用著,模仿官網(wǎng)寫,不然無法執(zhí)行下去 // 類本身語法 super(props); // 構(gòu)造函數(shù)中this指向構(gòu)造函數(shù)實例對象 // 16.8之前,state是{},16.8及之后,是null this.state = { isHot: true, }; } // state在Weather的實例對象身上 render() { console.log("this:", this); return <h1>今天天氣很{this.state.isHot ? "炎熱" : "涼爽"}</h1>; } } // 2.渲染組件到頁面 ReactDOM.render(<Weather />, document.getElementById("test")); </script> </body> </html>
接下來寫點擊事件,注意,先做一個錯誤示范
<script type="text/babel"> // 1.創(chuàng)建組件 class Weather extends React.Component { /** * 構(gòu)造器中能收到什么數(shù)據(jù),取決于new的時候,傳的是什么數(shù)據(jù) * new Weather并不是我們操作的,而是react操作的 */ constructor(props) { // 還沒學(xué)到props,但得用著,模仿官網(wǎng)寫 // 類本身語法 super(props); // 構(gòu)造函數(shù)中this指向構(gòu)造函數(shù)實例對象 // 16.8之前,state是{},16.8及之后,是null this.state = { isHot: true, }; } // state在Weather的實例對象身上 render() { console.log("this:", this); return ( <h1 onClick={demo()}> 今天天氣很{this.state.isHot ? "炎熱" : "涼爽"} </h1> ); } } function demo() { console.log("demo被調(diào)用"); } // 2.渲染組件到頁面 ReactDOM.render(<Weather />, document.getElementById("test")); </script>
我在調(diào)用點擊事件時,寫的是 onClick={demo()}
在控制臺會發(fā)現(xiàn),函數(shù)被立即執(zhí)行了
react在new Weather時,通過實例調(diào)用了render方法,想拿到return的值,就要執(zhí)行<h1 onClick={demo()}>今天天氣很{this.state.isHot ? “炎熱” : “涼爽”}</h1>,執(zhí)行到onClick賦值語句時,就要將demo()函數(shù)調(diào)用的返回值交給onClick作為回調(diào),demo()的返回值是undifend,也就是把undifend交給onClick作為回調(diào),**這是錯誤的做法,是因為在demo后加(),導(dǎo)致函數(shù)調(diào)用。**等到點擊時,就調(diào)用了undifend,react處理了這一過程,如果是undifend,就沒有多余動作。
常見錯誤寫法
render() { console.log("this:", this); return ( <h1 onClick='demo()'>今天天氣很{this.state.isHot ? "炎熱" : "涼爽"}</h1> ); }
render() { console.log("this:", this); return ( <h1 onclick='demo'>今天天氣很{this.state.isHot ? "炎熱" : "涼爽"}</h1> ); }
正確寫法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>react</title> </head> <body> <div id="test"></div> <!-- 引入核心庫 --> <script src="../js/react.development.js"></script> <!-- 擴展庫 --> <script src="../js/react-dom.development.js"></script> <!-- 轉(zhuǎn)換jsx轉(zhuǎn)為js --> <script src="../js/babel.min.js"></script> <script type="text/babel"> // 1.創(chuàng)建組件 class Weather extends React.Component { /** * 構(gòu)造器中能收到什么數(shù)據(jù),取決于new的時候,傳的是什么數(shù)據(jù) * new Weather并不是我們操作的,而是react操作的 */ constructor(props) { // 還沒學(xué)到props,但得用著,模仿官網(wǎng)寫 // 類本身語法 super(props); // 構(gòu)造函數(shù)中this指向構(gòu)造函數(shù)實例對象 // 16.8之前,state是{},16.8及之后,是null this.state = { isHot: true, }; } // state在Weather的實例對象身上 render() { console.log("this:", this); return ( <h1 onClick={demo}> 今天天氣很{this.state.isHot ? "炎熱" : "涼爽"} </h1> ); } } function demo() { console.log("demo被調(diào)用"); } // 2.渲染組件到頁面 ReactDOM.render(<Weather />, document.getElementById("test")); </script> </body> </html>
修改
上文已經(jīng)將數(shù)據(jù)渲染到頁面中,現(xiàn)在想要修改頁面的數(shù)據(jù)。想要修改數(shù)據(jù),首先要拿到state中的isHot,先看一段錯誤寫法:
function demo() { console.log("demo被調(diào)用"); // 錯誤示范 const { isHot } = this.state; console.log("isHot", isHot); }
提示xxx of undefined(reading ‘state'),也就是state of undefined,當(dāng)xxx為undefined時,undefined.state 就會報這個錯誤。這里的xxx指的就是this。
來打印一下this
function demo() { // 錯誤示范 console.log("this", this); const { isHot } = this.state; console.log("isHot", isHot); }
來看一下代碼結(jié)構(gòu)和注釋
通過打印發(fā)現(xiàn),將自定義函數(shù)放到類的外邊,數(shù)據(jù)雖然能夠正確顯示,但并不能拿到/修改state中的數(shù)據(jù)。
class Weather extends React.Component { /** * 構(gòu)造器中能收到什么數(shù)據(jù),取決于new的時候,傳的是什么數(shù)據(jù) * new Weather并不是我們操作的,而是react操作的 */ constructor(props) { // 還沒學(xué)到props,但得用著,模仿官網(wǎng)寫 // 類本身語法 super(props); /** * 構(gòu)造函數(shù)中this指向構(gòu)造函數(shù)實例對象 * 16.8之前,state是{},16.8及之后,是null * state在Weather的實例對象身上 */ this.state = { isHot: true, }; } // 切換天氣 demo() { console.log("this", this); const { isHot } = this.state; console.log("isHot", isHot); } // 渲染 render() { console.log("this:", this); return ( <h1 onClick={demo}> 今天天氣很{this.state.isHot ? "炎熱" : "涼爽"} </h1> ); } }
注意,類不是函數(shù)體,不需要寫function
到此這篇關(guān)于淺析React 對state的理解的文章就介紹到這了,更多相關(guān)React state理解內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Zustand介紹與使用 React狀態(tài)管理工具的解決方案
本文主要介紹了Zustand,一種基于React的狀態(tài)管理庫,Zustand以簡潔易用、靈活性高及最小化原則等特點脫穎而出,旨在提供簡單而強大的狀態(tài)管理功能2024-10-10React Fiber結(jié)構(gòu)的創(chuàng)建步驟
這篇文章主要介紹了React Fiber結(jié)構(gòu)的創(chuàng)建步驟,幫助大家更好的理解和學(xué)習(xí)使用React,感興趣的朋友可以了解下2021-04-04react-native android狀態(tài)欄的實現(xiàn)
這篇文章主要介紹了react-native android狀態(tài)欄的實現(xiàn),使?fàn)顟B(tài)欄顏色與App顏色一致,使用戶界面更加整體。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-06-06解決react中l(wèi)abel標(biāo)簽for報錯問題
這篇文章主要介紹了react中l(wèi)abel標(biāo)簽for報錯問題,解決辦法就是react中l(wèi)abel標(biāo)簽沒有for屬性,用htmlFor代替for屬性,感興趣的朋友跟隨小編一起看看吧2022-02-02使用react實現(xiàn)手機號的數(shù)據(jù)同步顯示功能的示例代碼
本篇文章主要介紹了使用react實現(xiàn)手機號的數(shù)據(jù)同步顯示功能的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04