Question

我试图了解React中方法的呈现顺序。我有一个“ persons”类，并且在其中迭代了一个数组，该数组调用了称为“ person”的子组件。

下面的我的Persons.js

import React, { Component } from 'react';
import Person from './Person/Person';


class Persons extends Component{
    constructor(props){
        super(props);
        console.log('[Persons.js] inside constructor',props);
    }
    componentWillMount(){
        console.log('[Persons.js] inside componentWillMount()');
    }
    componentDidMount(){
        console.log('[Persons.js] inside componentDidMount()');
    }

    render(){
        console.log('[Persons.js] inside render())');
        return(
            this.props.persons.map((person,index)=>{
                return(
                    <Person click={() => this.props.clicked(index)} name={person.name} age={person.age} change={ (event) => this.props.changed(event,index)} key={person.id}/>
                );
              })
        );
    }
}

export default Persons;

我的Person.js在下面

import React, { Component } from 'react';
import classes from './Person.css'

class Person extends Component{
    constructor(props){
        super(props);
        console.log('[Person.js] inside constructor',props);
    }
    componentWillMount(){
        console.log('[Person.js] inside componentWillMount()');
    }
    componentDidMount(){
        console.log('[Person.js] inside componentDidMount()');
    }

    render(){
        console.log('[Person.js] inside render()');
        return(
            <div className={classes.Person}>
                <p onClick={this.props.click}>I'm {this.props.name} and {this.props.age} years old.</p>
                <input type="text" onChange={this.props.change} value={this.props.name}/>
            </div>
        );
    }
}

export default Person;

我只想知道，为什么在Person.js文件的render方法之后它不调用componentDidMount？而是在完成迭代后调用4次。

Here is the screenshot

有什么主意吗？

React中的渲染顺序

0 个答案: