React 快速入門-React 生命週期
阿新 • • 發佈：2018-11-20
博主的參考資料
具體例項結果
操作為初始化元件，更新一次 state 中包含的值，移除該元件
測試程式碼
html 檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0" 下方程式碼內容為，往 html 中 id 為 “root” 的 div 標籤新增 react 自定義元件 “ComponentTemplate “，並延遲 5 秒後移除，”ComponentTemplate ” 元件中顯示一個 布林值，單擊後取反。
打包 js 前的檔案 1
import React from 'react';
import ReactDOM from 'react-dom';
import ComponentTemplate from "./component/ComponentTemplate.jsx";
const main = <ComponentTemplate 初始化值={"預設值"}/>;
ReactDOM.render(main, document.getElementById('root'));
window.setTimeout(() => {
ReactDOM.unmountComponentAtNode(document 打包 js 前的檔案 2
import React from "react";
import ReactDOM from "react-dom";
class ComponentTemplate extends React.Component{
constructor(props) {
super(props)
this.state = {
show: true
}
console.log("constructor----------");
console.log(JSON.stringify(props));
}
componentWillMount() {
console.log("componentWillMount----------");
}
componentWillReceiveProps(nextProps, nextContext) {
console.log("componentWillReceiveProps----------");
console.log("nextProps:" + JSON.stringify(nextProps));
console.log("nextContext:" + JSON.stringify(nextContext));
}
shouldComponentUpdate(nextProps, nextState, nextContext) {
console.log("shouldComponentUpdate----------");
console.log("nextProps:" + JSON.stringify(nextProps));
console.log("nextState:" + JSON.stringify(nextState));
console.log("nextContext:" + JSON.stringify(nextContext));
return true;// 返回 false 會阻止實際 dom 節點更新
}
render() {
return (
<div onClick={() => {
this.setState({show: !this.state.show});
}}>
{JSON.stringify(this.state.show)}
</div>
);
}
componentDidMount() {
//初始化時第一次渲染完實際 dom 時呼叫
console.log("componentDidMount----------");
console.log("");
}
componentDidUpdate(prevProps, prevState, snapshot) {
//除了初始化時第一次渲染完實際 dom,之後每次完成實際 dom 渲染時呼叫
console.log("componentDidUpdate----------");
console.log("prevProps:" + JSON.stringify(prevProps));
console.log("prevState:" + JSON.stringify(prevState));
console.log("snapshot:" + JSON.stringify(snapshot));
console.log("");
}
componentWillUnmount() {
//元件被移除的前一步執行(可用於清除監聽事件等)
console.log("componentWillUnmount----------");
}
}
export default ComponentTemplate;