1
私は一般的にリアクションとプログラミングに慣れていて、componentWillReceivePropsメソッドに関する質問があります。 LikesComponentクラス内には、ReactDOM.render(<LikesComponent likes={this.props.likes+1} />, document.getElementById("app"))を実行するupdateLikesメソッドがあります。私は、<ComponentName />が呼び出されるたびに新しいインスタンスが作成されると思っていたので、componentWillReceivePropsメソッドによって記録されたメッセージを見たとき、私は非常に驚いていました。代わりに、私はgetDefaultProps, getInitialState and renderメソッドによって記録されたメッセージを見ることを期待していました。だから、<ComponentName />は常にそのクラスの新しいインスタンスを作成しないのですか？新しいインスタンスが作成されたときと、インスタンスが更新されたばかりのときを詳しく教えてください。私は今かなり混乱しています。前もって感謝します。React - componentWillReceivePropsメソッド：新しいインスタンスと更新されたインスタンス
body {
padding: 40px;
font-family: "helvetica neue", sans-serif;
}
.container {
width: 600px;
margin: auto;
color: black;
padding: 20px;
text-align: center;
}
.container h1 {
margin: 0;
padding: 20px;
font-size: 36px;
}
.container .btn {
border: 0;
padding: 15px;
margin: 10px;
width: 20%;
font-size: 15px;
outline: none;
border-radius: 3px;
color: #FFF;
font-weight: bold;
}
.btn.blue-btn {
background-color: #55acee;
box-shadow: 0px 5px 0px 0px #3C93D5;
}
.btn.blue-btn:hover {
background-color: #6FC6FF;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React tutorial</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var LikesComponent = React.createClass({
updateLikes: function() {
ReactDOM.render(
<LikesComponent likes={this.props.likes+1}/>,
document.getElementById("app")
)
},
getDefaultProps: function() {
console.log("getDefaultProps");
return({
likes: 0
})
},
getInitialState: function() {
console.log("getInitialState");
return({
popular: false
})
},
componentWillReceiveProps: function(nextProps) {
console.log(nextProps);
console.log("Componentwillreceiveprops");
this.setState({
popular: nextProps.likes >= 10
})
},
render: function() {
console.log("Component Rendered");
return (
<div className="container">
<h1>{this.state.popular ? "I'm popular" : null}</h1>
<button className="btn blue-btn" onClick={this.updateLikes}>Likes: {this.props.likes}</button>
</div>
)
}
});
ReactDOM.render(
<LikesComponent />,
document.getElementById("app")
);
</script>
</body>
</html>