淺析React 對state的理解
如何定義復雜組件(類組件)與簡單組件(函數組件)?
- 是否具有狀態(tài)(state)
引出問題,什么是狀態(tài)?
舉個例子,今天考試,考砸了,因為我狀態(tài)不好,是狀態(tài)影響了我的行為。
組件中的狀態(tài),驅動了頁面更新,換句話說,組件狀態(tài)中存著數據,數據的改變,驅動頁面的更新。
這里要了解,state狀態(tài)是誰身上的狀態(tài)?state狀態(tài)是組件實例對象身上的狀態(tài),不是組件類本身身上的,是由這個類締造的實例身上的。
(class)組件實例上三大屬性之一:state
顯示內容
實現一個需求,通過點擊頁面,炎熱/涼爽切換
<!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> <!-- 轉換jsx轉為js --> <script src="../js/babel.min.js"></script> <script type="text/babel"> // 1.創(chuàng)建組件 class Weather extends React.Component { /** * 構造器中能收到什么數據,取決于new的時候,傳的是什么數據 * new Weather并不是我們操作的,而是react操作的 */ constructor(props) { // 還沒學到props,但得用著,模仿官網寫 // 類本身語法 super(props); // 構造函數中this指向構造函數實例對象 // 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>
初始化數據
<!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> <!-- 轉換jsx轉為js --> <script src="../js/babel.min.js"></script> <script type="text/babel"> // 1.創(chuàng)建組件 class Weather extends React.Component { /** * 構造器中能收到什么數據,取決于new的時候,傳的是什么數據 * new Weather并不是我們操作的,而是react操作的 */ constructor(props) { // 還沒學到props,但得用著,模仿官網寫,不然無法執(zhí)行下去 // 類本身語法 super(props); // 構造函數中this指向構造函數實例對象 // 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 { /** * 構造器中能收到什么數據,取決于new的時候,傳的是什么數據 * new Weather并不是我們操作的,而是react操作的 */ constructor(props) { // 還沒學到props,但得用著,模仿官網寫 // 類本身語法 super(props); // 構造函數中this指向構造函數實例對象 // 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被調用"); } // 2.渲染組件到頁面 ReactDOM.render(<Weather />, document.getElementById("test")); </script>
我在調用點擊事件時,寫的是 onClick={demo()}
在控制臺會發(fā)現,函數被立即執(zhí)行了
react在new Weather時,通過實例調用了render方法,想拿到return的值,就要執(zhí)行<h1 onClick={demo()}>今天天氣很{this.state.isHot ? “炎熱” : “涼爽”}</h1>,執(zhí)行到onClick賦值語句時,就要將demo()函數調用的返回值交給onClick作為回調,demo()的返回值是undifend,也就是把undifend交給onClick作為回調,**這是錯誤的做法,是因為在demo后加(),導致函數調用。**等到點擊時,就調用了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> <!-- 轉換jsx轉為js --> <script src="../js/babel.min.js"></script> <script type="text/babel"> // 1.創(chuàng)建組件 class Weather extends React.Component { /** * 構造器中能收到什么數據,取決于new的時候,傳的是什么數據 * new Weather并不是我們操作的,而是react操作的 */ constructor(props) { // 還沒學到props,但得用著,模仿官網寫 // 類本身語法 super(props); // 構造函數中this指向構造函數實例對象 // 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被調用"); } // 2.渲染組件到頁面 ReactDOM.render(<Weather />, document.getElementById("test")); </script> </body> </html>
修改
上文已經將數據渲染到頁面中,現在想要修改頁面的數據。想要修改數據,首先要拿到state中的isHot,先看一段錯誤寫法:
function demo() { console.log("demo被調用"); // 錯誤示范 const { isHot } = this.state; console.log("isHot", isHot); }
提示xxx of undefined(reading ‘state'),也就是state of undefined,當xxx為undefined時,undefined.state 就會報這個錯誤。這里的xxx指的就是this。
來打印一下this
function demo() { // 錯誤示范 console.log("this", this); const { isHot } = this.state; console.log("isHot", isHot); }
來看一下代碼結構和注釋
通過打印發(fā)現,將自定義函數放到類的外邊,數據雖然能夠正確顯示,但并不能拿到/修改state中的數據。
class Weather extends React.Component { /** * 構造器中能收到什么數據,取決于new的時候,傳的是什么數據 * new Weather并不是我們操作的,而是react操作的 */ constructor(props) { // 還沒學到props,但得用著,模仿官網寫 // 類本身語法 super(props); /** * 構造函數中this指向構造函數實例對象 * 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> ); } }
注意,類不是函數體,不需要寫function
到此這篇關于淺析React 對state的理解的文章就介紹到這了,更多相關React state理解內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Zustand介紹與使用 React狀態(tài)管理工具的解決方案
本文主要介紹了Zustand,一種基于React的狀態(tài)管理庫,Zustand以簡潔易用、靈活性高及最小化原則等特點脫穎而出,旨在提供簡單而強大的狀態(tài)管理功能2024-10-10react-native android狀態(tài)欄的實現
這篇文章主要介紹了react-native android狀態(tài)欄的實現,使狀態(tài)欄顏色與App顏色一致,使用戶界面更加整體。小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-06-06