React Native狀態機和應用設計思路

React Native狀態機和應用設計思路

 

　　在原生Android開發中：當用戶點擊「登陸」按鈕時，從用戶名輸入框中讀取用戶輸入的用戶名，從密碼輸入框中讀取用戶輸入的密碼，而後交給註冊模塊去處理。可是，React Native不是這樣的思惟。

1、狀態機

1.1 狀態機思惟

　　React框架將全部的UI視爲一個簡單的狀態機，那麼任意一個UI場景就是狀態機的一種狀態。根據決定狀態的狀態機變量的值，React框架渲染狀態機的當前狀態——對於開發者來講，單個UI場景就被渲染出來了。隨着狀態機變量值的改變，UI狀態機也在不停地改變狀態，UI場景也隨之不停地被從新渲染。這樣一個過程能夠很輕鬆地作到數據與UI保持一致。

　　每個經過React.createClass（這是ES5的語法，也能夠用ES6的語法）創建的組件均可以有一個名爲setInitialState的函數。當組件被初始化時，該函數被執行。一般在這個函數中聲明須要用到的狀態機變量。

 

 

　　在上圖中，聲明瞭三個狀態機變量。

1.2 狀態機變量

　　在React Native代碼中，咱們能夠經過「this.state.狀態機變量名」來訪問狀態機變量。訪問意味着能夠讀取變量的值，也能夠改變變量的值。

　　在React Native開發中，開發者須要將狀態機變量視爲「不可變的變量」。在開發者的代碼中，永遠不要出現「this.state.某狀態機變量名 = 某值;」這樣的語句。當開發者須要改變狀態機變量的值時，必定要而且只能用this.setState函數。

　　狀態機變量的改變會致使React Native組件的從新渲染。提升React Native應用程序的性能的一種方法就是努力減小狀態機變量的數目。

　　React Native應用程序工做時，React Native組件接收各類事件，對所接收到的事件的處理可能致使處理結果中的某些數據須要顯示在UI界面上。這些數據能夠成爲該React Native組件的狀態機變量。咱們把他們稱做狀態機變量備選名單。

　　開發者須要對這份名單上的數據作進一步分析，找出重複的數據。重複的數據是指：（1）該數據能夠由備選名單上的其餘數據經過某種規則計算得出；（2）該數據能夠由組件中的數據經過某種規則計算得出；（3）該數據能夠由備選名單上的其餘數據再加上屬性上的某些數據按某種規則計算得出。

　　把這些重複的數據踢出備選名單，就獲得了一個狀態機變量的最小集。

　　不要把一個React Native組件放在狀態機變量中，應該把它放在render函數中，讓它成爲本組件的子組件。

2、React Native設計思路

　　一個好的React Native設計思路是：建立多個只負責渲染數據的無狀態React Native組件，將它們封裝在一個有狀態的React Native組件中，並把這個有狀態的React Native組件的狀態機變量的值經過props傳給無狀態的React Native組件（這時這些無狀態的React Native組件是有狀態的React Native組件的子組件）。