堆栈内存溢出
  繁体   English   中英

父子组件是按什么顺序渲染的？

[英]In which order are parent-child components rendered?

 原文  2017-06-20 13:50:27  4   6    javascript/ html/ reactjs/ dom

问题描述

如果我有两个组件（父母和孩子）是这样的：

1-父母（倒计时）：

var Countdown = React.createClass({
  getInitialState: function(){
    return{count: 0};
  },
  handleSetCountdown: function(seconds){
    this.setState({
      count: seconds
    });
  },
  render:function(){
    var {count} = this.state;
    return(
      <div>
        <Clock totalSeconds={count}/>
        <CountdownForm onSetCountdown={this.handleSetCountdown} />
      </div>
    );
  }
});

module.exports =Countdown;

2-孩子（CountdownForm）：

var CountdownForm = React.createClass({
  onSubmit: function(e){
    e.preventDefault();
    var strSeconds = this.refs.seconds.value;
    if(strSeconds.match(/^[0-9]*$/)){
      this.refs.seconds.value ='';
      this.props.onSetCountdown(parseInt(strSeconds,10));

    }
  },
  render: function(){
    return(
      <div>
        <form ref="form" onSubmit={this.onSubmit} className="countdown-form">
          <input type="text" ref="seconds" placeholder="Enter Time In Seconds"/>
          <button className="button expanded">Start</button>
        </form>
      </div>
    );
  }
});

module.exports = CountdownForm;

我对生命周期（组件呈现的顺序）感到困惑？

6 个解决方案

解决方案1
 29 已采纳  2017-06-20 14:01:30

我没有立即在 React 文档中看到明确的“这是父子之间的生命周期事件的顺序”，尽管我可能会遗漏它。

当然，凭经验确定是微不足道的： 

 class Child extends React.Component { constructor(...args) { super(...args); console.log("Child constructor"); } componentWillMount(...args) { console.log("Child componentWillMount"); } componentDidMount(...args) { console.log("Child componentDidMount"); } render() { console.log("Child render"); return <div>Hi there</div>; } } class Parent extends React.Component { constructor(...args) { super(...args); console.log("Parent constructor"); } componentWillMount(...args) { console.log("Parent componentWillMount"); } componentDidMount(...args) { console.log("Parent componentDidMount"); } render() { console.log("Parent render start"); const c = <Child />; console.log("Parent render end"); return c; } } ReactDOM.render(<Parent />, document.getElementById("react"));
 .as-console-wrapper { max-height: 100% !important; }
 <div id="react"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

这向我们展示了顺序：

Parent constructor
Parent componentWillMount
Parent render start
Parent render end
Child constructor
Child componentWillMount
Child render
Child componentDidMount
Parent componentDidMount

这让我想知道父母中孩子的顺序，所以： 

 class Child extends React.Component { constructor(props, ...rest) { super(props, ...rest); console.log(this.props.name + " constructor"); } componentWillMount(...args) { console.log(this.props.name + " componentWillMount"); } componentDidMount(...args) { console.log(this.props.name + " componentDidMount"); } render() { console.log(this.props.name + " render"); return <div>Hi from {this.props.name}!</div>; } } class Parent extends React.Component { constructor(...args) { super(...args); console.log("Parent constructor"); } componentWillMount(...args) { console.log("Parent componentWillMount"); } componentDidMount(...args) { console.log("Parent componentDidMount"); } render() { console.log("Parent render start"); const result = <div> <Child name="Child1" /> <Child name="Child2" /> </div>; console.log("Parent render end"); return result; } } ReactDOM.render(<Parent />, document.getElementById("react"));
 .as-console-wrapper { max-height: 100% !important; }
 <div id="react"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

这给了我们：

Parent constructor
Parent componentWillMount
Parent render start
Parent render end
Child1 constructor
Child1 componentWillMount
Child1 render
Child2 constructor
Child2 componentWillMount
Child2 render
Child1 componentDidMount
Child2 componentDidMount
Parent componentDidMount

一点也不令人惊讶，但值得仔细检查。 :-)

解决方案2
 3  2020-05-03 11:45:51

只需将 componentWillUnmount 添加到循环中： 

 class Child extends React.Component { constructor(props, ...rest) { super(props, ...rest); console.log(this.props.name + " constructor"); } componentWillMount(...args) { console.log(this.props.name + " componentWillMount"); } componentWillUnmount(...args) { console.log(this.props.name + " componentWillUnmount"); } componentDidMount(...args) { console.log(this.props.name + " componentDidMount"); } render() { console.log(this.props.name + " render"); return <div>Hi from {this.props.name}!</div>; } } class Parent extends React.Component { constructor(...args) { super(...args); console.log("Parent constructor"); } componentWillMount(...args) { console.log("Parent componentWillMount"); } componentWillUnmount(...args) { console.log("Parent componentWillUnmount"); } componentDidMount(...args) { console.log("Parent componentDidMount"); } render() { console.log("Parent render start"); const result = <div> <Child name="Child1" /> <Child name="Child2" /> </div>; console.log("Parent render end"); return result; } } class ParentWrapper extends React.Component { constructor(...args) { super(...args); this.state = { showParent: true }; setTimeout(() => { this.setState({ showParent: false }) }); } render() { return <div>{this.state.showParent ? <Parent /> : ''}</div>; } } ReactDOM.render(<ParentWrapper />, document.getElementById("react"));
 .as-console-wrapper { max-height: 100% !important; }
 <div id="react"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

结果：

Parent constructor
Parent componentWillMount
Parent render start
Parent render end
Child1 constructor
Child1 componentWillMount
Child1 render
Child2 constructor
Child2 componentWillMount
Child2 render
Child1 componentDidMount
Child2 componentDidMount
Parent componentDidMount
Parent componentWillUnmount
Child1 componentWillUnmount
Child2 componentWillUnmount

解决方案3
 1  2020-05-18 03:08:07

现场演示

反应父子生命周期顺序

https://33qrr.csb.app/

https://codesandbox.io/s/react-parent-child-lifecycle-order-33qrr

创建订单


parent constructor
parent WillMount
parent render

child constructor
child WillMount
child render
child DidMount

parent DidMount

破坏秩序

parent WillUnmount

child WillUnmount

// child unmount

// parent unmount

解决方案4
 0  2021-02-21 23:34:13

渲染顺序是按照 react 组件树的顺序执行的，但是挂载顺序是相反的（最里面的子组件先挂载）。

解决方案5
 0  2021-11-10 14:45:47

可以让父级的 ComponentDidMount 方法在子级的 ComponentDidMount 方法之前执行。 这是如何完成的。

在父级的第一个 div 内，在呈现任何内容之前，检查状态是否已设置。 仅在设置状态时渲染任何内容。

例子：

render() {
  const { t } = this.props;
  return (
    <div>
      {this.state.row !== null ? (
            ...
      ) : null}
    </div>
  );
}

解决方案6
 -1  2023-02-03 02:01:28

有了像这样的功能组件......

  const MyComponent = () => {
    useEffect(() => {
      trackingFn("useEffect MyComponent");
      subscriptions.push(() => { trackingFn("subscription MyComponent") })
      return () => trackingFn("useEffect cleanup MyComponent");
    })
    useLayoutEffect(() => {
      trackingFn("useLayoutEffect MyComponent");
      return () => trackingFn("useLayoutEffect cleanup MyComponent");
    })
    try {
      trackingFn("render MyComponent");
      return <MyChildComponent />
    } finally {
      trackingFn("finally MyComponent");
    }
  }

顺序是

  1. 使成为
  2. 最后阻止
  3. 使用布局效果
  4. 使用效果
  5. 使用LayoutEffect清理
  6. 使用效果清理

这个测试表明了这一点。

import { act, render } from "@testing-library/react";
import { useEffect, useLayoutEffect } from "react";

it("should call the methods in the expected order", async () => {

  const trackingFn = jest.fn();
  const subscriptions: (() => void)[] = [];

  const MyGrandChildComponent = () => {
    useEffect(() => {
      trackingFn("useEffect MyGrandChildComponent");
      subscriptions.push(() => { trackingFn("subscription MyGrandChildComponent") })
      return () => trackingFn("useEffect cleanup MyGrandChildComponent");
    })
    useLayoutEffect(() => {
      trackingFn("useLayoutEffect MyGrandChildComponent");
      return () => trackingFn("useLayoutEffect cleanup MyGrandChildComponent");
    })
    try {
      trackingFn("render MyGrandChildComponent");
      return <div />
    } finally {
      trackingFn("finally MyGrandChildComponent");
    }
  }

  const MyChildComponent = () => {
    useEffect(() => {
      trackingFn("useEffect MyChildComponent");
      subscriptions.push(() => { trackingFn("subscription MyChildComponent") })
      return () => trackingFn("useEffect cleanup MyChildComponent");
    })
    useLayoutEffect(() => {
      trackingFn("useLayoutEffect MyChildComponent");
      return () => trackingFn("useLayoutEffect cleanup MyChildComponent");
    })
    try {
      trackingFn("render MyChildComponent");
      return <MyGrandChildComponent />
    } finally {
      trackingFn("finally MyChildComponent");
    }
  }

  const MyComponent = () => {
    useEffect(() => {
      trackingFn("useEffect MyComponent");
      subscriptions.push(() => { trackingFn("subscription MyComponent") })
      return () => trackingFn("useEffect cleanup MyComponent");
    })
    useLayoutEffect(() => {
      trackingFn("useLayoutEffect MyComponent");
      return () => trackingFn("useLayoutEffect cleanup MyComponent");
    })
    try {
      trackingFn("render MyComponent");
      return <MyChildComponent />
    } finally {
      trackingFn("finally MyComponent");
    }
  }

  const { unmount } = render(<MyComponent />);

  await act(() => Promise.resolve());
  subscriptions.forEach(f => f());
  unmount();
  expect(trackingFn.mock.calls).toEqual([
    ['render MyComponent'],
    ['finally MyComponent'],
    ['render MyChildComponent'],
    ['finally MyChildComponent'],
    ['render MyGrandChildComponent'],
    ['finally MyGrandChildComponent'],
    ['useLayoutEffect MyGrandChildComponent'],
    ['useLayoutEffect MyChildComponent'],
    ['useLayoutEffect MyComponent'],
    ['useEffect MyGrandChildComponent'],
    ['useEffect MyChildComponent'],
    ['useEffect MyComponent'],
    ['subscription MyGrandChildComponent'],
    ['subscription MyChildComponent'],
    ['subscription MyComponent'],
    ['useLayoutEffect cleanup MyComponent'],
    ['useLayoutEffect cleanup MyChildComponent'],
    ['useLayoutEffect cleanup MyGrandChildComponent'],
    ['useEffect cleanup MyComponent'],
    ['useEffect cleanup MyChildComponent'],
    ['useEffect cleanup MyGrandChildComponent']
  ])
});
``

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在reactjs中没有父子关系的不同组件之间进行通信 Vuejs - 在非父子组件之间交换信息 使用 Hooks 实现 React 父子组件的最佳实践 @Input（）无法在Angular 2 App中的父子组件之间传递 如何使用ChangeDetectionStrategy在父子组件之间进行数据更新 如果它们不是Angular2中的父子组件，如何在组件之间传递数据？ Vue 组件：$emitting 不适用于父子组件。 我做错了什么？ Javascript父子项 分组父子对象 jQuery父子选择
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM