欢迎使用CSDN-markdown编辑器

2019-11-07 23:49:09

字体：大中小

来源：转载

供稿：网友

React 父子组建生命周期

React 和 ReactNative 是亲兄弟，都是 facebook的儿子，只不过ReactNative拥有自己的一套标签库，因此他们的生命周期一样，要讲React的生命周期的话，网上一搜一大堆，很多比我写得还好。

我先附上React 生命周期的图，然后再进入主题。

这里写图片描述

我今天要讲的是 React 父子组建组合的时候，React 生命周期的变化。事实上我们做 React / React Native 开发时，免不了会使用多个组件组合使用。例如下面这段代码。

class App extends Component { render() { return ( <View> <Button>login</Button> </View> ); }}class Button extends Component { render() { return ( <TouchableOpacity> {this.PRops.children} </TouchableOpacity> ); }}

根据上面的 React 生命周期图来看，一个 React 正常的执行顺序会是

现在我是父组建和子组件进行整合，他的执行顺序会是怎样呢？这里大家可以先思考下。

我写了代入如下来验证结果

//根组件class RootContainer extends Component { constructor(props) { super(props); console.log('RootContainer constructor'); } componentWillMount() { console.log('RootContainer componentWillMount'); } render() { console.log('RootContainer render'); return ( <div className="root"> <h3>This is RootContainer</h3> <ChildView/> </div> ); } componentDidMount() { console.log('RootContainer componentDidMount'); } componentWillUnmount() { console.log('RootContainer componentWillUnmount'); } componentWillReceiveProps(nextProps) { console.log('RootContainer componentWillReceiveProps(nextProps)'); } componentWillUpdate(nextProps, nextState) { console.log('RootContainer componentWillUpdate(nextProps, nextState)'); } shouldComponentUpdate(nextProps, nextState) { console.log('RootContainer shouldComponentUpdate(nextProps, nextState)'); return true; } componentDidUpdate(prevProps, prevState) { console.log('RootContainer componentDidUpdate(prevProps, prevState)'); }}//子组件class ChildView extends Component { constructor(props) { super(props); console.log('ChildView constructor'); } componentWillMount() { console.log('ChildView componentWillMount'); } render() { console.log('ChildView render'); return ( <div className="child"> <h4>I am a Child</h4> </div> ); } componentDidMount() { console.log('ChildView componentDidMount'); } componentWillUnmount() { console.log('ChildView componentWillUnmount'); } componentWillReceiveProps(nextProps) { console.log('ChildView componentWillReceiveProps(nextProps)'); } shouldComponentUpdate(nextProps, nextState) { console.log('ChildView shouldComponentUpdate(nextProps, nextState)'); return true; } componentWillUpdate(nextProps, nextState) { console.log('ChildView componentWillUpdate(nextProps, nextState)'); } componentDidUpdate(prevProps, prevState) { console.log('ChildView componetDidUpdate(prevProps, prevState)'); }}

运行之后，控制台输出语句如下

RootContainer constructor RootContainer componentWillMount RootContainer render — ChildView constructor — ChildView componentWillMount — ChildView render — ChildView componentDidMount RootContainer componentDidMount

此时可以分析出，当父组建 render 时遇到子组件，然后进入子组件的生命周期，当执行完子组件生命周期中的componentDidMount 时会回到父组建继续执行父组建未完成的生命周期。

更深级别的层级效果也是如此

RootContainer constructor RootContainer componentWillMount RootContainer render — ChildView constructor — ChildView componentWillMount — ChildView render —— Grandson constructor —— Grandson componentWillMount —— Grandson render —— Grandson componentDidMount — ChildView componentDidMount RootContainer componentDidMount

上一篇：【毕业设计】图灵机器人的实现

下一篇：Reveal破解版安装集成的两种姿势