淺析React 對state的理解
阿新 • • 發佈：2021-09-09
如何定義複雜元件（類元件）與簡單元件（函式元件）？
- 是否具有狀態（state）
引出問題，什麼是狀態？
舉個例子，今天考試，考砸了，因為我狀態不好，是狀態影響了我的行為。
元件中的狀態，驅動了頁面更新，換句話說，元件狀態中存著資料，資料的改變，驅動頁面的更新。
這裡要了解，state狀態是誰身上的狀態？state狀態是元件例項物件身上的狀態，不是元件類本身身上的，是由這個類締造的例項身上的。
（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="..//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.建立元件
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 tyLjEAZf 
接下來寫點選事件，注意，先做一個錯誤示範
<script type="text/babel">
// 1.建立元件
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()}
在控制檯會發現，函式被立即執行了
react在new Weather時，通過例項呼叫了render方法，想拿到return的值，就要執行<h1 onClick={demo()}>今天天氣很{this.state.isHot ? “炎熱” : “涼爽”}</h1>，執行到onClick賦值語句時，就要將demo()函式呼叫的返回值交給onClick作為回撥，demo()的返回值是undifendhttp://www.cppcns.com,也就是把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.建立元件
class Weather extends React.Component {
/**
* 構造器中能收到什麼資料，取決於new的時候，傳的是什麼資料
* new Weather並不是我們操作的，而是react操作的
*/
constructor(props) {
// 還沒學到props，但得用著，模仿官網寫
// 類本身語法
super(props);
// 建構函式中this指向建構函式例項物件
// 16.8之前，state是{}http://www.cppcns.com，16.8及之後，是null
this.state = {
isHot: true,this);
return (
<h1 onClick={demo}http://www.cppcns.com>
今天天氣很{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);
}
來看一下程式碼結構和註釋
通過打印發現，將自定義函式放到類的外邊，資料雖然能夠正確顯示，但並不能拿到/修改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 ? "炎熱" : "涼爽"}
<www.cppcns.com/h1>
);
}
}
注意，類不是函式體，不需要寫function
到此這篇關於淺析React 對state的理解的文章就介紹到這了,更多相關React state理解內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！