沒有什麼是不可能的，只是需要找到正確的方法。 1. 什麼是狀態？ 狀態就是組件內部特有數據的載體（組件數據掛載方式），改變數據頁面就會刷新，由組件自己設置和更改，也就是說由組件自己產生、維護，使用狀態的目的就是為了在不同的狀態下使組件的顯示不同（自己管理），這在 React 中稱為：條件渲染。 為什 ...
沒有什麼是不可能的，只是需要找到正確的方法。
1. 什麼是狀態？
狀態就是組件內部特有數據的載體（組件數據掛載方式），改變數據頁面就會刷新，由組件自己設置和更改，也就是說由組件自己產生、維護，使用狀態的目的就是為了在不同的狀態下使組件的顯示不同（自己管理），這在 React 中稱為：條件渲染。
為什麼用狀態？
React 不能直接修改 DOM 來更新頁面。React 採用聲明式設計，需要通過狀態的改變來更新頁面。
2. 使用狀態 ：state 關鍵字
import React, { Component } from 'react'
export default class App extends Component {
// 組件狀態兩種寫法
// state = {
// isLove: false
// }
constructor() {
super()
this.state = {
isLove: false
}
}
isLoveFunc = ()=> {
this.setState({
isLove: !this.state.isLove
})
}
render() {
return (
<div>
<h1>喜歡就收藏吧！</h1>
<button onClick={ ()=>{ this.isLoveFunc() } }>{this.state.isLove?"取消收藏":"收藏"}</button>
</div>
)
}
}
3. 使用狀態 ：setState 關鍵字
this.state 是純 js 對象，在 vue 中，data 屬性是利用 object.defineproperty 處理過的，更改 data 的數據的時候會觸發數據的 getter 和 setter，但是 React 中沒有做這樣的處理，如果直接更改的話，React 是無法得知的，所以，需要使用特殊的更改狀態的方法 setState。
4. setState 同步非同步
setState 處在同步邏輯中，非同步更新狀態，更新真實 Dom。
setState 處在非同步邏輯中，V18：非同步更新狀態，更新真實 Dom，V17：同步更新狀態，更新真實 Dom。但是要在 V18 中使用 createRoot 這個新的 renderapi。如果在 V18 中使用的還是 ReactDOM.render()這種老的 api 那結果是和 V17一致的。
setState 接受第二個參數，第二個參數是回調函數，狀態和 Dom 更新完後就會被觸發。
5. 列表 key 值
React 的高效依賴於所謂的 Virtual-DOM，儘量不碰 DOM。對於列表元素來說會有一個問題：元素可能會在一個列表中改變位置。要實現這個操作，只需要交換一下 DOM 位置就行了，但是 React 並不知道其實我們只是改變了元素的位置，所以它會重新渲染後面兩個元素 （再執行 virtua-DOM），這樣會大大增加 DOM 操作。但如果給每個元素加上唯一的標識，React 就可以知道這兩個元素只是交換了位置，這個標識就是 key，這個 key 必須是每個元素唯一的標識。為了列表的復用和重排，設置 key 值提高性能。理想 key 值為 item.id。然而在不涉及到列表的增加刪除、重排設置成索引值也沒有問題。
