刚开始学习react时总是搞不清楚相关函数的调用顺序,导致写出的代码可能存在不可预期的现象。后来写了一段验证代码,确定了调用顺序如下
- start
componentWillMount
render
componentDidMount
componentWillUpdate
render
componentDidUpdate
- setState
componentWillUpdate
render
componentDidUpdate
- changePropsInParentComponent
componentWillReceiveProps
componentWillUpdate
render
componentDidUpdate
验证代码如下
子组件MyChild代码
import React from 'react';
const lifeCircle = ['start'];
let hOutputTimer = null;
function addLog(msg) {
lifeCircle.push(msg);
if (hOutputTimer) {
clearTimeout(hOutputTimer);
}
hOutputTimer = setTimeout(() => {
console.log(lifeCircle.join('\r\n'));
lifeCircle.length = 0;
hOutputTimer = null;
}, 10000)
}
export