React 學習之路（四） state & 生命周期

羅志環發布于2019-08-26 12:16 / 3278人閱讀

摘要：如果需要交互，應該在生命周期中進行交互。生命周期過程中涉及三個主要的動作術語表示正在掛接虛擬到真實。每當組件第一次加載到中的時候，我們都想生成定時器，表示正在被重新渲染。組件是真正隔離的每一個都會建立自己的定時器，并獨立的更新。

state & 生命周期 state

我們之前實現的時鐘，實現方式是每個一秒進行一次渲染dom，但是這種方法并不合理。我們想要通過一種狀態來控制組件，實現更優的渲染。

state

React 把組件看成是一個狀態機（State Machines）。通過與用戶的交互，實現不同狀態，然后渲染 UI，讓用戶界面和數據保持一致。React 里，只需更新組件的 state，然后根據新的 state 重新渲染用戶界面（不要操作 DOM）。

原生方法




  
  
  
  Document

類




  
  
  
  Document

props與state的區別

props不能被其所在的組件修改，從父組件傳遞進來的屬性不會在組件內部更改；
state只能在所在組件內部更改，或在外部調用setState函數對狀態進行間接修改。

render成員函數

首先說render是一個函數，它對于組件來說，render成員函數是必需的。render函數的主要流程是檢測this.props和this.state,再返回一個單一組件實例。
render函數應該是純粹的，也就是說，在render函數內不應該修改組件state，不讀寫DOM信息，也不與瀏覽器交互。如果需要交互，應該在生命周期中進行交互。

生命周期

過程中涉及三個主要的動作術語：

mounting:表示正在掛接虛擬DOM到真實DOM。每當Clock組件第一次加載到DOM中的時候，我們都想生成定時器，
updating:表示正在被重新渲染。
unmounting:表示正在將虛擬DOM移除真實DOM。每當Clock生成的這個DOM被移除的時候，我們也會想要清除定時器，




  
  
  
  Document

再來一個例子




  
  
  
  Document

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 得知了組件 state(狀態)的變化, 隨即再次調用 render() 方法，獲取了當前應該顯示的內容。 這次，render() 方法中的 this.state.date 的值已經發生了改變， 從而，其輸出的內容也隨之改變。React 于是據此對 DOM 進行更新。
5. 如果通過其他操作將 Clock 組件從 DOM 中移除了, React 會調用 componentWillUnmount() 生命周期鉤子, 所以計時器也會被停止。

正確使用狀態State

1.不要直接更新狀態

this.state.comment = "hello";

應當使用setState()

this.setState({
  comment: "hello
})

構造函數是唯一初始化this.state的地方

2.狀態可能是異步的

this.state this.props可能是異步的，我們不能依靠她們的值來計算下一個狀態。

// 例如： 此代碼可能無法計算新的值
this.setState({
  counter: this.state.count + this.props.increament
})

為了解決這個問題，我們應該使用setState的第二種形式來處理。

this.setState(function(prevState, props) {
  return {
    counter: prevState.counter + props.insertment 
  }
})

// 使用箭頭函數
this.setState((prevState, props) => ({
  counter: prevState.counter + props.insertment
}))

3.狀態更新合并

// 例如： 你的狀態可能包含一些獨立的變量
constructor(props) {
  super(props);
  this.state = { 
    posts: [],
    comments: []
  };
}

// 我們可以獨立的更新

componentDidMount() {
  fetchPosts().then(response => {
    this.setState({
      posts: response.posts
    });
  });

  fetchComments().then(response => {
    this.setState({
      comments: response.comments
    });
  });
}

這里的合并是淺合并，也就是說this.setState({comments})完整保留了this.state.posts，但完全替換了this.state.comments。

3.數據自頂向下流動

父子組件都不知道某一個組件是否有狀態，并且它們不應該關心某一個組件的狀態，因為每一個狀態除了擁有它并且設置它的組件之外，其他的組件是無法訪問到的。

組件可以選擇將其狀態作為屬性傳遞給其子組件：

這通常被稱為是自頂向下或者是單項數據流.任何狀態始終由某一個特定的組件所擁有，并且改狀態導出的任何數據只能影響樹中下方的組件

如果你想象一個組件樹作為屬性的瀑布，每個組件的狀態就像一個額外的水源，它連接在一個任意點，但也流下來。

4.組件是真正隔離的

function App() {
  return (
    
      
      
      
    
  );
}

ReactDOM.render(
  ,
  document.getElementById("root")
);

每一個clock都會建立自己的定時器，并獨立的更新。

云服務器 GPU云服務器生命周期軟件生命周期生命周期理論頁面生命周期

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108356.html

我的React之路--入門

摘要：在構造函數里面初始化的數據，把數據放在頁面上，點擊時候調用方法改變中的數據。是中父組件向子組件通信的方式，下面是一個簡單的例子使用組件我是顯示的數據我們定義組件時候在構造函數中可以接收到參數，并且要使用傳到的構造方法中。 React的學習之路還要繼續走下去，最近一邊在做未完成的項目一邊學習React，項目是vue寫的，后面還需要有一個后臺管理系統計劃使用react完成，寒假說長也不長，...

qpwoeiru96 2019-08-22 13:52 評論0 收藏0
React &amp;&amp; VUE Virtual Dom的Diff算法統一之路 snabbd

摘要：毫無疑問的是算法的復雜度與效率是決定能夠帶來性能提升效果的關鍵因素。速度略有損失，但可讀性大大提高。因此目前的主流算法趨向一致，在主要思路上，與的方式基本相同。在里面實現了的算法與支持。是唯一添加的方法所以只發生在中。 VirtualDOM是react在組件化開發場景下，針對DOM重排重繪性能瓶頸作出的重要優化方案，而他最具價值的核心功能是如何識別并保存新舊節點數據結構之間差異的方法，...

shixinzhang 2019-08-23 16:13 評論0 收藏0
react: 組件初識 &amp;&amp; 生命周期 &amp;&amp; 相關說明

react組件參考：https://facebook.github.io/re... react的組件是其核心思想部分，react允許將整個ui設計分割稱為獨立的、可復用的隔離模塊，react的組件是一個抽象的類，直接使用reacy.component是沒有很大意義的，所以一般使用的方法就是定義一個 class 來繼承這個component，并且需要實現方法 render（）；就像下面一樣： ...

jokester 2019-08-20 16:35 評論0 收藏0
react：組件初識 &amp;&amp; 生命周期 &amp;&amp; tips

react組件參考：https://facebook.github.io/re... react的組件是其核心思想部分，react允許將整個ui設計分割稱為獨立的、可復用的隔離模塊，react的組件是一個抽象的類，直接使用reacy.component是沒有很大意義的，所以一般使用的方法就是定義一個 class 來繼承這個component，并且需要實現方法 render（）；就像下面一樣： ...

miqt 2019-08-20 16:35 評論0 收藏0
如何用ahooks控制時機的hook？

　　本篇主要和大家溝通關于ahooks ，我們可以理解為加深對 React hooks 的了解。　　我們先說下關于抽象自定義 hooks。構建屬于自己的 React hooks 工具庫。　　其實我們應該培養閱讀學習源碼的習慣，工具庫是一個對源碼閱讀不錯的選擇。　　注：本系列對 ahooks 的源碼解析是基于v3.3.13。　　現在就進入主題用ahooks 來封裝 React要注意的時機？　　Fun...

3403771864 2022-11-05 16:52 評論0 收藏0