沒(méi)有什么是不可能的，只是需要找到正確的方法。
1. 什么是狀態(tài)？
狀態(tài)就是組件內(nèi)部特有數(shù)據(jù)的載體（組件數(shù)據(jù)掛載方式），改變數(shù)據(jù)頁(yè)面就會(huì)刷新，由組件自己設(shè)置和更改，也就是說(shuō)由組件自己產(chǎn)生、維護(hù)，使用狀態(tài)的目的就是為了在不同的狀態(tài)下使組件的顯示不同（自己管理），這在 React 中稱(chēng)為：條件渲染。
為什么用狀態(tài)？
React 不能直接修改 DOM 來(lái)更新頁(yè)面。React 采用聲明式設(shè)計(jì)，需要通過(guò)狀態(tài)的改變來(lái)更新頁(yè)面。
2. 使用狀態(tài) ：state 關(guān)鍵字
import React, { Component } from 'react'
export default class App extends Component {
// 組件狀態(tài)兩種寫(xiě)法
// 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. 使用狀態(tài) ：setState 關(guān)鍵字
this.state 是純 js 對(duì)象，在 vue 中，data 屬性是利用 object.defineproperty 處理過(guò)的，更改 data 的數(shù)據(jù)的時(shí)候會(huì)觸發(fā)數(shù)據(jù)的 getter 和 setter，但是 React 中沒(méi)有做這樣的處理，如果直接更改的話，React 是無(wú)法得知的，所以，需要使用特殊的更改狀態(tài)的方法 setState。
4. setState 同步異步
setState 處在同步邏輯中，異步更新?tīng)顟B(tài)，更新真實(shí) Dom。
setState 處在異步邏輯中，V18：異步更新?tīng)顟B(tài)，更新真實(shí) Dom，V17：同步更新?tīng)顟B(tài)，更新真實(shí) Dom。但是要在 V18 中使用 createRoot 這個(gè)新的 renderapi。如果在 V18 中使用的還是 ReactDOM.render()這種老的 api 那結(jié)果是和 V17一致的。
setState 接受第二個(gè)參數(shù)，第二個(gè)參數(shù)是回調(diào)函數(shù)，狀態(tài)和 Dom 更新完后就會(huì)被觸發(fā)。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-747007.html
5. 列表 key 值
React 的高效依賴(lài)于所謂的 Virtual-DOM，盡量不碰 DOM。對(duì)于列表元素來(lái)說(shuō)會(huì)有一個(gè)問(wèn)題：元素可能會(huì)在一個(gè)列表中改變位置。要實(shí)現(xiàn)這個(gè)操作，只需要交換一下 DOM 位置就行了，但是 React 并不知道其實(shí)我們只是改變了元素的位置，所以它會(huì)重新渲染后面兩個(gè)元素 （再執(zhí)行 virtua-DOM），這樣會(huì)大大增加 DOM 操作。但如果給每個(gè)元素加上唯一的標(biāo)識(shí)，React 就可以知道這兩個(gè)元素只是交換了位置，這個(gè)標(biāo)識(shí)就是 key，這個(gè) key 必須是每個(gè)元素唯一的標(biāo)識(shí)。為了列表的復(fù)用和重排，設(shè)置 key 值提高性能。理想 key 值為 item.id。然而在不涉及到列表的增加刪除、重排設(shè)置成索引值也沒(méi)有問(wèn)題。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-747007.html
到了這里，關(guān)于React 組件之狀態(tài)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
