父子组件按什么顺序渲染? [英] In which order are parent-child components rendered?
本文介绍了父子组件按什么顺序渲染?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如果我有两个要素(父母和子女):
If I have Two Components (Parent & Child) like this :
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;
我对生命周期(组件呈现的顺序)感到困惑吗?
I'm confused about the life cycle (the order in which the components are rendered)?
推荐答案
在React文档中,我没有立即看到清晰的这是父子之间的生命周期事件的顺序",尽管我可能会遗漏它.
I'm not immediately seeing a clear "this is the order of lifecycle events between parent and child" in the React docs, though I could be missing it.
凭经验确定当然很简单:
It's trivial to determine empirically, of course:
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
哪个让我想知道父母中孩子的顺序,所以:
Which got me wondering about the order of children within a parent, so:
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
一点都不奇怪,但是可以仔细检查. :-)
Not at all surprising, but good to double-check. :-)
这篇关于父子组件按什么顺序渲染?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文