Reactjs React-componentWillReceiveProps方法：新实例与更新实例

我对一般的反应和编程是新手，对组件WillReceiveProps方法有疑问。在

likeComponent

类中，有一个执行

ReactDOM.render（，document.getElementById（“app”）

的

updateLikes

方法。我认为每次调用

都会创建一个新实例，这就是为什么当我看到

componentWillReceiveProps

方法记录的消息时，我非常惊讶。相反，我希望看到由

getDefaultProps、getInitialState和render

方法记录的消息。那么，调用

不总是创建该类的新实例吗？请详细说明何时创建新实例以及何时更新实例？我现在很困惑。提前谢谢

正文{
填充：40px；
字体系列：“helvetica neue”，无衬线；
}
.集装箱{
宽度：600px；
保证金：自动；
颜色：黑色；
填充：20px；
文本对齐：居中；
}
.集装箱h1{
保证金：0；
填充：20px；
字体大小：36px；
}
.container.btn{
边界：0；
填充：15px；
利润率：10px；
宽度：20%；
字体大小：15px；
大纲：无；
边界半径：3px；
颜色：#FFF；
字体大小：粗体；
}
.btn.blue-btn{
背景色：#55acee；
盒影：0px 5px 0px 0px#3C93D5；
}
.btn.蓝色btn:悬停{
背景色：#6FC6FF；
}

反应教程
var likeComponent=React.createClass({
updateLikes:function（）{
ReactDOM.render(
,
document.getElementById（“应用程序”）
)
},
getDefaultProps:function（）{
console.log（“getDefaultProps”）；
返回({
喜欢：0
})
},
getInitialState:函数（）{
console.log（“getInitialState”）；
返回({
流行：错
})
},
组件将接收道具：函数（下一步）{
console.log（nextrops）；
console.log（“组件将接收道具”）；
这是我的国家({
热门：nextrops.likes>=10
})
},
render:function（）{
console.log（“呈现的组件”）；
返回(
{this.state.popular？“我很受欢迎”：null}
喜欢：{this.props.Likes}
)
}
});
ReactDOM.render(
,
document.getElementById（“应用程序”）
);

All

它是否创建了一个对象，表示“我们想在这里用这些道具（likes=5）呈现一个

LikesComponent

实例”

React将将此新的呈现对象集与它已经呈现的一组内容进行比较，并认为“嘿，我已经在用（例如=4）”呈现

likeComponent

with（like=4）”

由于组件类型相同并且在层次结构中处于相同的位置，因此React将仅使用新的prop值更新实例，而不是销毁旧实例并创建新实例

所以基本上：

在层次结构中当前不存在组件实例的位置渲染组件时，将创建（装入）新实例

在层次结构中已存在组件实例的位置渲染组件时，将重用实例

当在新渲染中，该类型的组件未渲染到实例存在的位置时，实例将被销毁（卸载）