資訊專欄INFORMATION COLUMN
摘要：子組件中通過(guò)就可以拿到上的數(shù)據(jù)了，實(shí)現(xiàn)了從父組件子組件的數(shù)據(jù)傳遞。當(dāng)前狀態(tài)改變時(shí)要發(fā)生的副作用。通過(guò)裝飾器調(diào)用的函數(shù)進(jìn)行使用。理想情況下，大部分組件都應(yīng)該是無(wú)狀態(tài)組件，僅通過(guò)獲得數(shù)據(jù)。通過(guò)調(diào)用中的改變狀態(tài)。
Todo-list
這是一個(gè)用來(lái)初步了解如何通過(guò) React + Mobx 構(gòu)建應(yīng)用的 DEMO，通過(guò) Webpack 進(jìn)行打包。
技術(shù)棧： React + Mobx + React-Mobx + SCSS。
由于剛接觸 React 不久，寫的不好或者有誤還請(qǐng)指出，萬(wàn)分感謝。
React 是一個(gè)用于構(gòu)建用戶界面的 JavaScript 框架，也就是說(shuō) React 是一個(gè) UI 框架，他把重點(diǎn)放在了 MVC 中的 V(View) 層上。
聲明組件React 可以通過(guò) ES6 的 class 來(lái)聲明一個(gè)自定義組件，該組件繼承基類 React.Component 的所有屬性和方法。
class MyComponent extends React.Component {
render () {
return (
// jsx
)
}
}
這里有幾點(diǎn)要強(qiáng)調(diào)的地方：
1.原生 HTML 標(biāo)簽以小寫開頭，自定義 React 組件的首字母要大寫。
2.JSX 語(yǔ)法很類似 XML，它不是必須的，但我覺得用它來(lái)編程很方便。
3.組件內(nèi)的 render 函數(shù)是必須的，它返回一顆組件樹，最終會(huì)被渲染成 HTML。
掛載虛擬 DOM實(shí)例化根組件，啟動(dòng)框架，將虛擬的 DOM 節(jié)點(diǎn)掛載到真實(shí)的 DOM 節(jié)點(diǎn)。
ReactDOM.render(jsx, DOM)React 組件的狀態(tài)
class MyComponent extends React.Component {
constructor (...arg) {
super(...arg)
// 定義組件的初始狀態(tài)
this.state = {
//...
name: "Couzin"
}
}
handlerClick () {
// 調(diào)用后觸發(fā)重新渲染
this.setState = {
name: "HUnter"
}
}
render () {
return (
)
}
}
class Child extends React.Component {
render () {
return (
{this.props.author}
)
}
}
子組件中通過(guò) this.props 就可以拿到 props 上的數(shù)據(jù)了，實(shí)現(xiàn)了從 父組件 ------> 子組件的數(shù)據(jù)傳遞。
另外再提及一下 this.props.children：
class Father extends React.Component {
render () {
return (
{/* ... */}
hello world
)
}
}
class Child extends React.Component {
render () {
return (
{this.props.author}
{this.props.children}
{/* 相當(dāng)于hello world
*/}
)
}
}
也就是說(shuō) this.props.children 就是組件內(nèi)嵌套的元素。
了解了上面的這些使用方法，差不多就可以開始簡(jiǎn)單的使用 React 了。
MobxMobx 是一個(gè)狀態(tài)管理工具，它可以把你的應(yīng)用變?yōu)轫憫?yīng)式。
Mobx 提供狀態(tài)給 React 使用，下面有一些概念
Mobx 為現(xiàn)有數(shù)據(jù)結(jié)構(gòu)添加了可觀察的功能，只需要通過(guò) @observable 這個(gè)裝飾器就可以使你的屬性變?yōu)榭捎^察的。
class MyStore {
@observable myName = "hunter"
}
derivation （衍生）
任何源自 state 并且不會(huì)再有進(jìn)一步相互作用的東西就是衍生。Mobx 有兩種類型的衍生：
computed values 從當(dāng)前可觀察狀態(tài)中衍生出的值。
reactions 當(dāng)前狀態(tài)改變時(shí)要發(fā)生的副作用。
computed values當(dāng)相關(guān)數(shù)據(jù)變化時(shí)會(huì)自動(dòng)更新。通過(guò) @computed 裝飾器調(diào)用的 setter／getter 函數(shù)進(jìn)行使用。
class MyStore {
@observable myName = "HUnter"
@computed get getNameLength () {
return this.myName.length
}
}
reactions
reactions 與 computed values 相比起來(lái)使用較少，它是當(dāng)前狀態(tài)改變所觸發(fā)的副作用。
actions （動(dòng)作）只有在 actions 中，才可以修改 Mobx 中 state 的值。注意當(dāng)你使用裝飾器模式時(shí)，@action 中的 this 沒(méi)有綁定在當(dāng)前這個(gè)實(shí)例上，要用過(guò) @action.bound 來(lái)綁定 使得 this 綁定在實(shí)例對(duì)象上。
@action.bound setName () {
this.myName = "HUnter"
}
actions ------> state ------> view
Mobx-React上面簡(jiǎn)單介紹了 Mobx 的使用，我們知道當(dāng) React 組件中 state 變化后，要通過(guò) setState 來(lái)觸發(fā)視圖的更新，Mobx 中定義了 React 組件中的 state 以及如何修改 state，那么怎么在 state 改變后觸發(fā)視圖的更新呢？Mobx-React 提供了 observer 將 React 組件的轉(zhuǎn)變?yōu)轫憫?yīng)式組件，確保 state 改變時(shí)可以強(qiáng)制刷新組件。做法很簡(jiǎn)單：
@observer
class MyComponent extends React.Component {
// ...
}
React + Mobx 使用的步驟
1.定義 observable state
class Store {
@observable data = []
// @computed ...
// @action ...
}
2.創(chuàng)建視圖
通過(guò) React 創(chuàng)建視圖時(shí)，推薦創(chuàng)建無(wú)狀態(tài)組件，即組件內(nèi)沒(méi)有內(nèi)部的 state 和 生命周期函數(shù)。理想情況下，大部分組件都應(yīng)該是無(wú)狀態(tài)組件，僅通過(guò) props 獲得數(shù)據(jù)。
@observer
class MyComponent extends React.Component {
}
3.通過(guò)調(diào)用 Mobx 中的 actions 改變狀態(tài)。
@observer
class MyComponent extends React.Component {
render () {
let store = { this.props }
return (
)
}
}
上面大致講了如何簡(jiǎn)單使用 React + Mobx 來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的應(yīng)用，描述的比較淺顯。具體源碼請(qǐng)見 github。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/83166.html
摘要：用于簡(jiǎn)單可擴(kuò)展的狀態(tài)管理，相比有更高的靈活性，文檔參考中文文檔，本文作為入門，介紹一個(gè)簡(jiǎn)單的項(xiàng)目。任務(wù)已完成下一個(gè)任務(wù)修復(fù)谷歌瀏覽器頁(yè)面顯示問(wèn)題提交意見反饋代碼創(chuàng)建在中引入主入口文件設(shè)置參考入門學(xué)習(xí)總結(jié) MobX用于簡(jiǎn)單、可擴(kuò)展的React狀態(tài)管理，相比Redux有更高的靈活性，文檔參考：MobX中文文檔，本文作為入門，介紹一個(gè)簡(jiǎn)單的TodoList項(xiàng)目。 1. 預(yù)期效果 showIm...
摘要：通過(guò)裝飾器或者利用時(shí)調(diào)用的函數(shù)來(lái)進(jìn)行使用下面代碼中當(dāng)或者發(fā)生變化時(shí)，會(huì)監(jiān)聽數(shù)據(jù)變化確保通過(guò)觸發(fā)方法自動(dòng)更新。只能影響正在運(yùn)行的函數(shù)，而無(wú)法影響當(dāng)前函數(shù)調(diào)用的異步操作參考官方文檔用法裝飾器函數(shù)遵循中標(biāo)準(zhǔn)的綁定規(guī)則。 前言: 本文基于React+TypeScript+Mobx+AntDesignMobile技術(shù)棧,使用Create-React-App腳手架進(jìn)行一個(gè)移動(dòng)端項(xiàng)目搭建，主要介紹項(xiàng)...
摘要：新的項(xiàng)目目錄設(shè)計(jì)如下放置靜態(tài)文件業(yè)務(wù)組件入口文件數(shù)據(jù)模型定義數(shù)據(jù)定義工具函數(shù)其中數(shù)據(jù)流實(shí)踐的核心概念就是數(shù)據(jù)模型和數(shù)據(jù)儲(chǔ)存。最后再吃我一發(fā)安利是阿里云業(yè)務(wù)運(yùn)營(yíng)事業(yè)部前端團(tuán)隊(duì)開源的前端構(gòu)建和工程化工具。 本文首發(fā)于阿里云前端dawn團(tuán)隊(duì)專欄。 項(xiàng)目在最初應(yīng)用 MobX 時(shí)，對(duì)較為復(fù)雜的多人協(xié)作項(xiàng)目的數(shù)據(jù)流管理方案沒(méi)有一個(gè)優(yōu)雅的解決方案，通過(guò)對(duì)MobX官方文檔中針對(duì)大型可維護(hù)項(xiàng)目最佳實(shí)踐的...
摘要：安裝等相關(guān)依賴。通過(guò)啟動(dòng)項(xiàng)目，進(jìn)行后續(xù)操作。自定義執(zhí)行狀態(tài)的改變。任何不在使用狀態(tài)的計(jì)算值將不會(huì)更新，直到需要它進(jìn)行副作用操作時(shí)。強(qiáng)烈建議始終拋出錯(cuò)誤，以便保留原始堆棧跟蹤。 2018-08-14 learning about work begin：2018-08-13 step 1 熟悉react 寫法 step 2 mobx 了解&使用 step 3 thrift接口調(diào)用過(guò)程 Re...
摘要：環(huán)境搭建從零開始搭建開發(fā)環(huán)境引入安裝依賴新建修改引入并支持安裝依賴打包時(shí)將樣式模塊化，我們可以通過(guò)或引入樣式，并且相互不沖突。修改，引入創(chuàng)建使用語(yǔ)法報(bào)錯(cuò)修改引入狀態(tài)管理使用裝飾器語(yǔ)法修改修改源碼 環(huán)境搭建 1.從零開始搭建webpack+react開發(fā)環(huán)境 2.引入Typescript 安裝依賴 npm i -S @types/react @types/react-domnpm i -...
閱讀 3095·2021-10-13 09:40
閱讀 3945·2021-09-22 15:51
閱讀 1493·2021-09-22 15:48
閱讀 1060·2021-09-06 15:00
閱讀 1790·2019-08-30 15:43
閱讀 2356·2019-08-29 18:35
閱讀 1667·2019-08-29 16:18
閱讀 3612·2019-08-29 12:49
