資訊專欄INFORMATION COLUMN
摘要：在中，組件基本由三個部分組成屬性狀態(tài)以及生命周期方法。在生命周期中是必須的，是渲染組件用的。返回就是緊接著以下的生命周期函數(shù)返回表示組件不需要重新渲染，不再執(zhí)行任何生命周期函數(shù)包括。生命周期流程圖原文地址
盡量全面詳細(xì)的整理一下React的生命周期中的知識點。
組件組件是獨立的封裝的可以復(fù)用的一個小部件，它是React的核心思想之一。通過劃分組件，可以將一個頁面劃分成獨立的多個可復(fù)用的組件，各個組件通過嵌套、組合形成一個完整的頁面。
在React中，組件基本由三個部分組成：屬性（props）、狀態(tài)（state）以及生命周期方法?？梢詫⒔M件簡單地看作一個“狀態(tài)機”，根據(jù)不同的state和props呈現(xiàn)不同的UI，通過與用戶的交互實現(xiàn)不同的狀態(tài)，然后重新渲染組件，UI可以跟隨數(shù)據(jù)變化而變化。
創(chuàng)建組件組件常分為兩種：Class Component和Functional Component。
無狀態(tài)組件Functional Component也稱為無狀態(tài)組件，它多用于純展示組件，這種組件只負(fù)責(zé)根據(jù)傳入的props來渲染組件，而不涉及state狀態(tài)管理。
在大部分React代碼中，大多數(shù)組件被寫成無狀態(tài)的組件，通過簡單組合可以構(gòu)建成其他的組件等；這種通過多個簡單然后合并成一個大應(yīng)用的設(shè)計模式被提倡。
無狀態(tài)組件可以通過函數(shù)形式或者ES6的箭頭函數(shù)來創(chuàng)建：
// 函數(shù)
function HelloFunctional(props){
return hello {props.name};
}
// ES6箭頭函數(shù)
const HelloFunctional = (props) => (hello {props.name});
無狀態(tài)組件有以下幾個特點：
代碼可讀性更好
組件不會被實例化，渲染性能提升
無生命周期方法
只能輸入props，同樣的輸入一定會有同樣的輸出
所以，在項目中如果不需要進行狀態(tài)管理，應(yīng)該盡量寫成無狀態(tài)組件的形式。
有狀態(tài)組件現(xiàn)在主流的創(chuàng)建有狀態(tài)組件的形式是通過ES6的Class來創(chuàng)建，取代React.createClass：
Class HelloClass extends React.Component{
constructor(){
this.state = {
name:"axuebin"
}
}
render(){
return (hello {this.state.name});
}
}
這是最簡潔的一個組件，它需要使用到內(nèi)部狀態(tài)state。
當(dāng)組件需要使用內(nèi)部狀態(tài)時或者需要使用生命周期方法時就需要使用有狀態(tài)組件。
組件的生命周期React組件的生命周期可以分為掛載、渲染和卸載這幾個階段，當(dāng)渲染后的組件更新后，會重新渲染組件，直到卸載。先分階段來看看每個階段有哪些生命周期函數(shù)。
掛載階段（Mounting）屬于這個階段的生命周期函數(shù)有：
constructor()
componentWillMount()
render()
componentDidMount()
constructor()constructor() {
super();
this.state = {name: "axuebin"};
this.handleClick = this.handleClick.bind(this);
}
這個階段就是組件的初始化，constructor()可以理解為組件的構(gòu)造函數(shù)，從組件的類class實例化一個組件實例。這個函數(shù)是組件形成時就被調(diào)用的，是生命周期中最先執(zhí)行的。
在constructor()函數(shù)內(nèi)，首先必須執(zhí)行super()，否則this.props將是未定義，會引發(fā)異常。
然后，如果有必要，可以進行：
state的初始化
方法的綁定
如果不需要這兩步，可以直接省略constructor函數(shù)。
componentWillMount()這個函數(shù)按照駝峰法的命名規(guī)則可以理解為“組件即將被掛載”，所以這個函數(shù)是組件首次渲染（render）前調(diào)用的。
在每次頁面加載、刷新時，或者某個組件第一次展現(xiàn)時都會調(diào)用這個函數(shù)。通常地，我們推薦使用constructor()來替代。
注意：在這個函數(shù)中，不可以調(diào)用setState來修改狀態(tài)。
render()render() {
return(
hello {this.state.name} {this.props.age}
)
}
render()在生命周期中是必須的，是渲染組件用的。
當(dāng)這個函數(shù)被調(diào)用時，需要檢查this.props和this.state并且返回一個元素（有且只有一個元素），這個元素可能是一個原生DOM元素，也有可能是另一個React組件。
可以在state或props狀態(tài)為空時試著返回一個null或者false來聲明不想渲染任何東西。
在這個函數(shù)中，不應(yīng)該改變組件的狀態(tài)，也就是不執(zhí)行this.setState，需要保持render()函數(shù)的純凈。
在這個函數(shù)中，可以對props進行調(diào)用并組合，但不可修改。
componentDidMount()componentDidMount() {
this.setState({name:"xb"});
}
這個函數(shù)在組件加載渲染完成后立即調(diào)用，此時頁面上已經(jīng)渲染出真實的DOM了，可以在這個函數(shù)中訪問到真實的DOM（可以通過this.refs來訪問真實DOM）。
在這個階段，還可以做一件事，可以修改state了！?。?/p>
而且，異步獲取數(shù)據(jù)在這個階段執(zhí)行也是比較合理的，獲取數(shù)據(jù)之后setState，然后重新渲染組件。
更新階段（Updating）屬性或狀態(tài)的改變會觸發(fā)一次更新。當(dāng)一個組件在被重新渲染時，這些方法將會被調(diào)用：
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
componentWillReceiveProps()已加載的組件在props發(fā)生變化時調(diào)用，若需要更新狀態(tài)，可能需要對比this.props和nextProps然后在該方法中使用this.setState來處理狀態(tài)的改變。
需要注意的是，有些情況下，即使props未改變也會觸發(fā)該函數(shù)，所以一定要先比較this.props和nextProps再做操作。
該函數(shù)只監(jiān)聽props的改變，this.setState不會觸發(fā)這個函數(shù)。
componentWillReceiveProps(nextProps){
if (this.props.color !== nextProps.color){
this.setState({});
}
}
shouldComponentUpdate()
這個函數(shù)只返回true或false，表示組件是否需要更新（重新渲染）。
返回true就是緊接著以下的生命周期函數(shù)；
返回false表示組件不需要重新渲染，不再執(zhí)行任何生命周期函數(shù)（包括render）。
這個函數(shù)使用需謹(jǐn)慎，react官方文檔中說道，在未來這個函數(shù)返回false可能仍然使得組件重新渲染。
componentWillUpdate()這個函數(shù)看名字就和componentWillMount很像，它執(zhí)行的階段也很像。在接收到新的props或者state之后，這個函數(shù)就會在render前被調(diào)用。
同樣的，在這個函數(shù)中不能使用this.setState()。如果需要更新狀態(tài)，請在componentWillReceiveProps中調(diào)用this.setState()。
render()又是一次的render。這和掛載階段的render有什么區(qū)別呢？
在函數(shù)的性質(zhì)上來說，兩者毫無區(qū)別，只不過是在生命周期的不同階段的調(diào)用。
前一個render是在組件第一次加載時調(diào)用的，也就是初次渲染，可以理解為mount；
后一個render是除去第一次之后調(diào)用的，也就是再渲染，re-render；
componentDidUpdate()同樣地，這個方法是在組件re-render之后調(diào)用的，該方法不會在初始化的時候調(diào)用。和componentDidMount一樣，在這個函數(shù)中可以使用this.refs獲取真實DOM。
還可以修改state哦，不過會導(dǎo)致組件再次re-render。
卸載階段（Unmounting）該方法將會在 component 從DOM中移除時調(diào)用
componentWillUnmount()
componentWillUnmount()卸載階段就很簡單了，就這一個生命周期函數(shù)，在組件被卸載和銷毀之前立刻調(diào)用。
在這個函數(shù)中，應(yīng)該處理任何必要的清理工作，比如銷毀定時器、取消網(wǎng)絡(luò)請求、清除之前創(chuàng)建的相關(guān)DOM節(jié)點等。
生命周期流程圖原文地址：http://axuebin.com/blog/2017/...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/91835.html
摘要：知乎原地址編寫優(yōu)雅的前端業(yè)務(wù)代碼前言當(dāng)我們在寫業(yè)務(wù)代碼的時候，我們到底在寫什么其實是對交互的一些處理。遍歷，通過事件委派，將事件綁定在上。事件綁定濫用使用進行統(tǒng)一管理。寫代碼要說人話。 知乎 live 原地址：編寫優(yōu)雅的前端業(yè)務(wù)代碼 前言 當(dāng)我們在寫業(yè)務(wù)代碼的時候，我們到底在寫什么？ 其實是對交互的一些處理。所有的交互都是基于用戶或者瀏覽器的一些行為來觸發(fā)的，比如渲染頁面，在頁面onl...
摘要：他們的應(yīng)用是比較復(fù)雜的，組件樹也是非常龐大，假設(shè)有一千個組件要渲染，每個耗費一千個就是由于是單線程的，這里都在努力的干活，一旦開始，中間就不會停。 悄悄的, React v16.7 發(fā)布了。 React v16.7: No, This Is Not The One With Hooks. showImg(https://segmentfault.com/img/bVblq9L?w=97...
摘要：期中類組件和函數(shù)式組件中有什么不同在中創(chuàng)建組件的形式有三種純函數(shù)式定義的無狀態(tài)組件定義的組件定義的組件今天我們要聊的是純函數(shù)式定義的無狀態(tài)組件及類組件的到底有什么不同分別在什么場景下適合使用首先我們來看一下用上述方法如何來創(chuàng)建一個組件定義的 20190306期 react中類組件和函數(shù)式組件中有什么不同? 在react中創(chuàng)建組件的形式有三種 純函數(shù)式定義的無狀態(tài)組件 React.cr...
摘要：最近有好多人問我沒信心去深造了，找不到好的工作，其實我以一個他們進行回復(fù)，發(fā)現(xiàn)他們主要是內(nèi)心比較浮躁，要知道技術(shù)行業(yè)永遠缺少的是高手。至此整體繪制過程我們就已經(jīng)非常清楚了。我門可以根據(jù)這種繪制的流程來操作自己的自定義組件。 最近有好多人問我Android沒信心去深造了，找不到好的工作，其實我以一個他們進行回復(fù)，發(fā)現(xiàn)他們主要是內(nèi)心比較浮躁，要知道技術(shù)行業(yè)永遠缺少的是高手。建議先閱讀淺談A...
摘要：新的值回調(diào)函數(shù)。官方注解是給組件做個標(biāo)記需要重新渲染，并且將可選的回調(diào)函數(shù)添加到函數(shù)列表中，這些函數(shù)將在重新渲染的時候執(zhí)行。一共做了兩件事一是通過執(zhí)行方法來更新組件二是若方法傳入了回調(diào)函數(shù)則將回調(diào)函數(shù)存入隊列。 Q1 setState改變狀態(tài)之后，不會立即更新state值。所以，如果改變state值，react是什么時候進行組件的更新呢？setState()到底做了一些什么呢？ A1 ...
閱讀 3676·2021-11-17 17:01
閱讀 4022·2021-11-08 13:12
閱讀 2641·2021-10-08 10:04
閱讀 810·2021-09-29 09:35
閱讀 1533·2021-09-26 10:12
閱讀 2265·2021-09-07 09:58
閱讀 2112·2019-08-30 15:55
閱讀 2217·2019-08-30 13:14
