第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

mobx 可觀察數(shù)據(jù)通過(guò) mobx-react 提供

@observable?title
@observable?finished

mobx Array 的 remove 方法提供了根據(jù)元素直接刪除的能力，不需要再使用 id 過(guò)濾

//?this.todos?=?this.todos.filter(item?=>?item.id?!==?id)
this.todos.remove(todo)

計(jì)算值放在 mobx 中作為 get 方法調(diào)用比在組件中計(jì)算更好

@computed?get?remaining()?{
??return?this.todos.filter(item?=>?item.finished).length
}

需要判斷的 className 的拼接方式

className={['class1',?bool?&&?'class2'].join('?')}

Item 組件拆分邏輯：

不以 HTML 元素結(jié)構(gòu)來(lái)拆分，以業(yè)務(wù)邏輯拆分，與 Item 透明無(wú)感知的操作最好放在父級(jí)中；

Item 沒(méi)有包裹元素可以使用 React.Fragment

//?list
<li?key={item.id}?className={[item.finished?&&?'finished']}>
??<Item?todo={item}?/>
??<a?href="javascript:;"?onClick={()?=>?list.removeTodo(item)}>delete</a>
</li>
//?item
<Fragment>
??{todo.title}
??<span
????className='check'
????onClick={()?=>?this.handleToggle(todo)}></span>
</Fragment>

npm install babel-preset-react -D

npm i react react-dom prop-types mobx-react -S

npm i mobx -S

npm install babel-plugin-transform-decorators-legacy -D

npm i babel-plugin-transform-class-properties -D

npm i webpack webpack-cli babel-core babel-preset-env babel-loader -D

常用的工具函數(shù)

“computed”計(jì)算值，將其他可觀察數(shù)據(jù)與你想要的方式組合起來(lái)變成一個(gè)新的可觀察數(shù)據(jù)，

“autorun”自動(dòng)運(yùn)行，自動(dòng)運(yùn)行傳入autorun的參數(shù)，在可觀察數(shù)據(jù)被修改之后，自動(dòng)去執(zhí)行依賴可觀察數(shù)據(jù) 的行為（傳入的函數(shù)）

“when函數(shù)”接收兩個(gè)函數(shù)參數(shù)，第一個(gè)函數(shù)必須根據(jù)一個(gè)可觀察數(shù)據(jù)返回一個(gè)布爾值（不能根據(jù)普通變量），當(dāng)該布爾值為true的時(shí)候，就去執(zhí)行第二個(gè)函數(shù)，并且保證最多只會(huì)執(zhí)行一次

" reaction"??第一個(gè)函數(shù)引用可觀察數(shù)據(jù)并返回一個(gè)值，這個(gè)值回作為第二個(gè)函數(shù)的參數(shù)，第一個(gè)函數(shù)會(huì)被先執(zhí)行一次，這樣mobx就知道有哪些數(shù)據(jù)被引用了，并在這些數(shù)據(jù)被修改后執(zhí)行第二個(gè)函數(shù)，

被用到的場(chǎng)景：在沒(méi)有數(shù)據(jù)之前，我們不想也沒(méi)有必要去調(diào)用寫(xiě)緩存的邏輯，可以用reaction來(lái)實(shí)現(xiàn)在數(shù)據(jù)第一次被填充后才啟用寫(xiě)緩存邏輯

觀察數(shù)據(jù)變化的方式

可被觀察的數(shù)據(jù)類型

observable

decorator

mobx學(xué)習(xí)目標(biāo)

? 應(yīng)用邏輯只需要修改狀態(tài)數(shù)據(jù)，mobx會(huì)自動(dòng)觸發(fā)渲染UI等副作用；副作用依賴的數(shù)據(jù)是被自動(dòng)收集的，比如副作用依賴狀態(tài)a和b，狀態(tài)c的變化是不會(huì)觸發(fā)副作用的。