react 入坑筆記（二） State

大致思想：在 react 中，每個元件都是乙個狀態機，通過與使用者的互動，實現不同狀態，然後渲染 ui，讓使用者介面和資料保持一致。react 裡，只需更新元件的 state，然後根據新的 state 重新渲染使用者介面（不要操作 dom）。

class clock extends react.component ;
} render() } 
reactdom.render(
,  document.getelementbyid('example')
);

以上**，實現了載入頁面時獲取並顯示時間的功能。

class clock extends react.component ;  // state 狀態
} // 生命週期鉤子函式
componentdidmount() 
// 生命週期鉤子函式
componentwillunmount() 
// tick 方法，在這裡可以改變 state
tick() );
} // 元件渲染函式， jsx
render() } 
reactdom.render(
,  document.getelementbyid('example')
);

以上**，實現了每秒更新頁面上時間的功能。

執行順序如下：

1.當被傳遞給 reactdom.render() 時，react 呼叫 clock 元件的建構函式。由於 clock 需要顯示當前時間，所以使用包含當前時間的物件來初始化 this.state 。我們稍後會更新此狀態。

2.react 然後呼叫 clock 元件的 render() 方法。這是 react 了解螢幕上應該顯示什麼內容，然後 react 更新 dom 以匹配 clock 的渲染輸出。

3.當 clock 的輸出插入到 dom 中時，react 呼叫 componentdidmount() 生命週期鉤子。在其中，clock 元件要求瀏覽器設定乙個定時器，每秒鐘呼叫一次 tick()。

4.瀏覽器每秒鐘呼叫 tick() 方法。在其中，clock 元件通過使用包含當前時間的物件呼叫 setstate() 來排程ui更新。通過呼叫 setstate() ，react 知道狀態已經改變，並再次呼叫 render() 方法來確定螢幕上應當顯示什麼。這一次，render() 方法中的 this.state.date 將不同，所以渲染輸出將包含更新的時間，並相應地更新 dom。

5. 一旦 clock 元件被從 dom 中移除，react 會呼叫 componentwillunmount() 這個鉤子函式，定時器也就會被清除。

元件中 state 屬性只能由擁有和設定它的元件來訪問，因此，狀態通常被稱之為區域性或者封裝。

function formatteddate(props) 
class clock extends react.component ;
} componentdidmount() 
componentwillunmount() 
tick() );
} render()  />
);}}
reactdom.render(
,  document.getelementbyid('example')
);

以上**中，將 state 中的資料傳遞給子元件 formatteddate 中，而子元件不需要知道資料是**于父元件的 state 狀態還是屬性亦或是手動輸入的。

這通常被稱為自頂向下或單向資料流。任何狀態始終由某些特定元件所有，並且從該狀態匯出的任何資料或 ui 只能影響樹中下方的元件。

function formatteddate(props) 
class clock extends react.component ;
} componentdidmount() 
componentwillunmount() 
tick() );
} render()  />
);}}
return (
);}

以上例項中每個 clock 元件都建立了自己的定時器並且獨立更新。

總結：1.元件是有狀態還是無狀態被認為是可能隨時間而變化的元件的實現細節。

2.可以在有狀態元件中使用無狀態元件，也可以在無狀態元件中使用有狀態元件。

react 入坑筆記（二） State

SignalR入坑筆記

React生命週期全解和state避坑

樹莓派入坑筆記

react 入坑筆記（二） State

SignalR入坑筆記

React生命週期全解和state避坑

樹莓派入坑筆記

相關推薦