如果我有两个这样的组件(父组件和子组件):
1- parent (倒计时):
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- child (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;
我对生命周期(组件呈现的顺序)感到困惑?
最佳答案
我没有立即在 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
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
一点也不奇怪,但值得仔细检查。 :-)
关于javascript - 父子组件是按什么顺序渲染的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44654982/