React 學(xué)習(xí)之路（四） state & 生命周期

羅志環(huán) 發(fā)布于2019-08-26 12:16 / 3287人閱讀

摘要：如果需要交互，應(yīng)該在生命周期中進(jìn)行交互。生命周期過(guò)程中涉及三個(gè)主要的動(dòng)作術(shù)語(yǔ)表示正在掛接虛擬到真實(shí)。每當(dāng)組件第一次加載到中的時(shí)候，我們都想生成定時(shí)器，表示正在被重新渲染。組件是真正隔離的每一個(gè)都會(huì)建立自己的定時(shí)器，并獨(dú)立的更新。

state & 生命周期 state

我們之前實(shí)現(xiàn)的時(shí)鐘，實(shí)現(xiàn)方式是每個(gè)一秒進(jìn)行一次渲染dom，但是這種方法并不合理。我們想要通過(guò)一種狀態(tài)來(lái)控制組件，實(shí)現(xiàn)更優(yōu)的渲染。

state

React 把組件看成是一個(gè)狀態(tài)機(jī)（State Machines）。通過(guò)與用戶的交互，實(shí)現(xiàn)不同狀態(tài)，然后渲染 UI，讓用戶界面和數(shù)據(jù)保持一致。React 里，只需更新組件的 state，然后根據(jù)新的 state 重新渲染用戶界面（不要操作 DOM）。

原生方法




  
  
  
  Document

類




  
  
  
  Document

props與state的區(qū)別

props不能被其所在的組件修改，從父組件傳遞進(jìn)來(lái)的屬性不會(huì)在組件內(nèi)部更改；
state只能在所在組件內(nèi)部更改，或在外部調(diào)用setState函數(shù)對(duì)狀態(tài)進(jìn)行間接修改。

render成員函數(shù)

首先說(shuō)render是一個(gè)函數(shù)，它對(duì)于組件來(lái)說(shuō)，render成員函數(shù)是必需的。render函數(shù)的主要流程是檢測(cè)this.props和this.state,再返回一個(gè)單一組件實(shí)例。
render函數(shù)應(yīng)該是純粹的，也就是說(shuō)，在render函數(shù)內(nèi)不應(yīng)該修改組件state，不讀寫DOM信息，也不與瀏覽器交互。如果需要交互，應(yīng)該在生命周期中進(jìn)行交互。

生命周期

過(guò)程中涉及三個(gè)主要的動(dòng)作術(shù)語(yǔ)：

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




  
  
  
  Document

再來(lái)一個(gè)例子




  
  
  
  Document

1. 當(dāng)  被傳入 ReactDOM.render() 時(shí), React 會(huì)調(diào)用 Clock組件的構(gòu)造函數(shù)。 因?yàn)?Clock 要顯示的是當(dāng)前時(shí)間，所以它將使用包含當(dāng)前時(shí)間的對(duì)象來(lái)初始化 this.state 。我們稍后會(huì)更新此狀態(tài)。
2. 然后 React 調(diào)用了 Clock 組件的 render() 方法。 React 從該方法返回內(nèi)容中得到要顯示在屏幕上的內(nèi)容。然后，React 然后更新 DOM 以匹配 Clock 的渲染輸出。
3. 當(dāng) Clock 輸出被插入到 DOM 中時(shí)，React 調(diào)用 componentDidMount() 生命周期鉤子。在該方法中，Clock 組件請(qǐng)求瀏覽器設(shè)置一個(gè)定時(shí)器來(lái)一次調(diào)用 tick()。
4. 瀏覽器會(huì)每隔一秒調(diào)用一次 tick()方法。在該方法中， Clock 組件通過(guò) setState() 方法并傳遞一個(gè)包含當(dāng)前時(shí)間的對(duì)象來(lái)安排一個(gè) UI 的更新。通過(guò) setState(), React 得知了組件 state(狀態(tài))的變化, 隨即再次調(diào)用 render() 方法，獲取了當(dāng)前應(yīng)該顯示的內(nèi)容。 這次，render() 方法中的 this.state.date 的值已經(jīng)發(fā)生了改變， 從而，其輸出的內(nèi)容也隨之改變。React 于是據(jù)此對(duì) DOM 進(jìn)行更新。
5. 如果通過(guò)其他操作將 Clock 組件從 DOM 中移除了, React 會(huì)調(diào)用 componentWillUnmount() 生命周期鉤子, 所以計(jì)時(shí)器也會(huì)被停止。

正確使用狀態(tài)State

1.不要直接更新狀態(tài)

this.state.comment = "hello";

應(yīng)當(dāng)使用setState()

this.setState({
  comment: "hello
})

構(gòu)造函數(shù)是唯一初始化this.state的地方

2.狀態(tài)可能是異步的

this.state this.props可能是異步的，我們不能依靠她們的值來(lái)計(jì)算下一個(gè)狀態(tài)。

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

為了解決這個(gè)問(wèn)題，我們應(yīng)該使用setState的第二種形式來(lái)處理。

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

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

3.狀態(tài)更新合并

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

// 我們可以獨(dú)立的更新

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

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

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

3.數(shù)據(jù)自頂向下流動(dòng)

父子組件都不知道某一個(gè)組件是否有狀態(tài)，并且它們不應(yīng)該關(guān)心某一個(gè)組件的狀態(tài)，因?yàn)槊恳粋€(gè)狀態(tài)除了擁有它并且設(shè)置它的組件之外，其他的組件是無(wú)法訪問(wèn)到的。

組件可以選擇將其狀態(tài)作為屬性傳遞給其子組件：

這通常被稱為是自頂向下或者是單項(xiàng)數(shù)據(jù)流.任何狀態(tài)始終由某一個(gè)特定的組件所擁有，并且改狀態(tài)導(dǎo)出的任何數(shù)據(jù)只能影響樹中下方的組件

如果你想象一個(gè)組件樹作為屬性的瀑布，每個(gè)組件的狀態(tài)就像一個(gè)額外的水源，它連接在一個(gè)任意點(diǎn)，但也流下來(lái)。

4.組件是真正隔離的

function App() {
  return (
    
      
      
      
    
  );
}

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

每一個(gè)clock都會(huì)建立自己的定時(shí)器，并獨(dú)立的更新。

云服務(wù)器 GPU云服務(wù)器生命周期軟件生命周期生命周期理論頁(yè)面生命周期

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/108356.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

羅志環(huán)

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

云虛擬主機(jī)如何清除數(shù)據(jù)-如何清理虛擬主機(jī)的垃圾文件？

閱讀 2235·2021-09-22 15:25
怎樣打造一個(gè)DOM元素位置引擎 (一)

閱讀 3618·2019-08-30 12:48
position定位有哪些？各有什么特點(diǎn)？

閱讀 2207·2019-08-30 11:25
vue 核心之一計(jì)算屬性computed 和偵聽屬性watch

閱讀 2340·2019-08-30 11:05
圖片自適應(yīng)

閱讀 727·2019-08-29 17:28
React 學(xué)習(xí)之路（四） state & 生命周期

閱讀 3288·2019-08-26 12:16
promise 基礎(chǔ)版（雛形）

閱讀 2611·2019-08-26 11:31
一名【合格】前端工程師的自檢清單

閱讀 1707·2019-08-23 17:08

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

React 學(xué)習(xí)之路（四） state & 生命周期

相關(guān)文章

**我的React之路--入門**

React && VUE Virtual Dom的Diff算法統(tǒng)一之路 snabbd

react: 組件初識(shí) && 生命周期 && 相關(guān)說(shuō)明

react：組件初識(shí) && 生命周期 && tips

如何用ahooks控制時(shí)機(jī)的hook？

發(fā)表評(píng)論

0條評(píng)論

羅志環(huán)

男|高級(jí)講師

TA的文章

云虛擬主機(jī)如何清除數(shù)據(jù)-如何清理虛擬主機(jī)的垃圾文件？

怎樣打造一個(gè)DOM元素位置引擎 (一)

position定位有哪些？各有什么特點(diǎn)？

vue 核心之一計(jì)算屬性computed 和偵聽屬性watch

圖片自適應(yīng)