React組件的生命周期詳細描述
一、什么是生命周期
組件的生命周期就是React的工作過程，就好比人有生老病死，自然界有日月更替，每個組件在網頁中也會有被創(chuàng)建、更新和刪除，如同有生命的機體一樣。
React組件的生命周期可以分為三個過程
- 裝載(掛載)過程（mount）：就是組件第一次在DOM樹中渲染的過程。
- 更新過程（update）：組件被重新渲染的過程。
- 卸載過程（unmount）：組件從DOM中被移除的過程。
二、裝載過程
依次調用如下函數constructor、getInitialState、getDefaultProps、componentWillMount、render、componentDidMount。
1、constructor
就是ES6里的構造函數，創(chuàng)建一個組件類的實例，在這一過程中要進行兩步操作：初始化state，綁定成員函數的this環(huán)境。
2、render
render是React組件中最為重要的一個函數。這是react中唯一不可忽略的函數，在render函數中，只能有一個父元素。render函數是一個純函數，它并不進行實際上的渲染動作，它只是一個JSX描述的結構，最終是由React來進行渲染過程，render函數中不應該有任何操作，對頁面的描述完全取決于this.state和this.props的返回結果，不能在render調用this.setState。
- 有一個公式總結的非常形象 UI=render（data）
3、componentWillMount和componentDidMount
這兩個函數分別在render前后執(zhí)行，由于這一過程通常只能在瀏覽器端調用，所以我們在這里獲取異步數據，而且在componentDidMount調用的時候，組件已經被裝載到DOM樹上了。
三、更新過程
簡單來說就是props和state被修改的過程，依次調用componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate。
1、componentWillReceiveProps（nextProps）
并不是只有在props發(fā)生改變的時候才會被調用，實際上只要是父組件的render函數被調用，render里面被渲染的子組件就會被更新，不管父組件傳給子組件的props有沒有被改變，都會觸發(fā)子組件的componentWillReceiveProps過程，但是，this.setState方法的觸發(fā)過程不會調用這個函數，因為這個函數適合根據新的props的值來計算出是不是要更新內部狀態(tài)的state。
2、shouldComponentUpdate（nextProps， nextState）
這個函數的重要性，僅次于render，render函數決定了該渲染什么，而shouldComponentUpdate決定了不需要渲染什么，都需要返回函數，這一過程可以提高性能，忽略掉沒有必要重新渲染的過程。
3、componentWillUpdate和componentDidUpdate
和裝載過程不同，這里的componentDidUpdate，既可以在瀏覽器端執(zhí)行，也可以在服務器端執(zhí)行
4、觸發(fā)render
在react中，觸發(fā)render的有4條路徑。
以下假設shouldComponentUpdate都是按照默認返回true的方式：
(1) 首次渲染Initial Render。
(2) 調用this.setState （并不是一次setState會觸發(fā)一次render，React可能會合并操作，再一次性進行render）。
(3) 父組件發(fā)生更新（一般就是props發(fā)生改變，但是就算props沒有改變或者父子組件之間沒有數據交換也會觸發(fā)render）。
(4) 調用this.forceUpdate。
注意：如果在shouldComponentUpdate里面返回false可以提前退出更新路徑。
四、卸載過程
實際中很少用到，這里只有一個componentWillUnmount，一般在componentDidMount里面注冊的事件需要在這里刪除。
五、生命周期流程
1、第一次初始化渲染顯示: ReactDOM.render()
constructor():創(chuàng)建對象初始化 statecomponentWillMount() :將要插入回調render() :用于插入虛擬 DOM 回調componentDidMount() :已經插入回調
2、每次更新 state: this.setState()
componentWillUpdate(): 將要更新回調render(): 更新(重新渲染)componentDidUpdate(): 已經更新回調
3、移除組件: ReactDOM.unmountComponentAtNode(containerDom)
- componentWillUnmount() : 組件將要被移除回調
六、示例
<div id='container'></div>
<script type="text/babel">
class LifeCycle extends React.Component {
constructor(props) {
super(props);
alert("Initial render");
alert("constructor");
this.state = {str: "hello"};
}
componentWillMount() {
alert("componentWillMount");
}
componentDidMount() {
alert("componentDidMount");
}
componentWillReceiveProps(nextProps) {
alert("componentWillReceiveProps");
}
shouldComponentUpdate() {
alert("shouldComponentUpdate");
return true; // 記得要返回true
}
componentWillUpdate() {
alert("componentWillUpdate");
}
componentDidUpdate() {
alert("componentDidUpdate");
}
componentWillUnmount() {
alert("componentWillUnmount");
}
setTheState() {
let s = "hello";
if (this.state.str === s) {
s = "HELLO";
}
this.setState({
str: s
});
}
forceItUpdate() {
this.forceUpdate();
}
render() {
alert("render");
return(
<div>
<span>{"Props:"}<h2>{parseInt(this.props.num)}</h2></span>
<br />
<span>{"State:"}<h2>{this.state.str}</h2></span>
</div>
);
}
}
class Container extends React.Component {
constructor(props) {
super(props);
this.state = {
num: Math.random() * 100
};
}
propsChange() {
this.setState({
num: Math.random() * 100
});
}
setLifeCycleState() {
this.refs.rLifeCycle.setTheState();
}
forceLifeCycleUpdate() {
this.refs.rLifeCycle.forceItUpdate();
}
unmountLifeCycle() {
// 這里卸載父組件也會導致卸載子組件
ReactDOM.unmountComponentAtNode(document.getElementById("container"));
}
parentForceUpdate() {
this.forceUpdate();
}
render() {
return (
<div>
<a href="javascript:;" onClick={this.propsChange.bind(this)}>propsChange</a>
<a href="javascript:;" onClick={this.setLifeCycleState.bind(this)}>setState</a>
<a href="javascript:;" onClick={this.forceLifeCycleUpdate.bind(this)}>forceUpdate</a>
<a href="javascript:;" onClick={this.unmountLifeCycle.bind(this)}>unmount</a>
<a href="javascript:;" onClick={this.parentForceUpdate.bind(this)}>parentForceUpdateWithoutChange</a>
<LifeCycle ref="rLifeCycle" num={this.state.num}></LifeCycle>
</div>
);
}
}
ReactDOM.render(
<Container></Container>,
document.getElementById('container')
);
</script>
總結
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容！
相關文章
這篇文章主要和大家來分享一下React的技巧之如何中斷map循環(huán)，文中的示例代碼講解詳細，具有一定的學習價值，感興趣的小伙伴可以了解一下2023-06-06
這篇文章主要為大家介紹了React不能將useMemo設置為默認方法原因詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪<BR>2022-07-07
基于React.js實現(xiàn)原生js拖拽效果引發(fā)的思考
這篇文章主要為大家詳細介紹了基于React.js實現(xiàn)原生js拖拽效果，繼而引發(fā)的一系列思考，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
Hello?React的組件化方式之React入門小案例演示
這篇文章主要介紹了Hello?React的組件化方式-React入門小案例,本文通過Hello?React的案例,?來體驗一下React開發(fā)模式,?以及jsx的語法，需要的朋友可以參考下2022-10-10
React實現(xiàn)文件上傳和斷點續(xù)傳功能的示例代碼
這篇文章主要為大家詳細介紹了React實現(xiàn)文件上傳和斷點續(xù)傳功能的相關知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-02-02
詳解Jotai Immer如何實現(xiàn)undo redo功能示例詳解
這篇文章主要為大家介紹了詳解Jotai Immer如何實現(xiàn)undo redo功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
react 報錯Module build failed: Browserslis
這篇文章主要介紹了react 報錯Module build failed: BrowserslistError: Unknown browser query `dead`問題的解決方法,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了React組件三大屬性之state,props,refs,文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
這篇文章主要為大家介紹了python的函數，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
現(xiàn)在最熱門的前端框架有AngularJS、React、Bootstrap等。自從接觸了ReactJS，ReactJs的虛擬DOM（Virtual DOM）和組件化的開發(fā)深深的吸引了我，下面來跟我一起領略ReactJs的風采吧~~ 文章有點長，耐心讀完，你會有很大收獲哦2021-04-04