我最近一直在使用ReactJS但是当谈到"关键"属性时,我真的不知道它是如何工作的.
在父组件中说我做渲染如下:
render: function() {
// dataList = [{id: 1}, {id: 2}, {id: 3}]; => initial state
// dataList = [{id: 2}, {id: 3}, {id: 4}]; => second dataList state
var someComponentList = [];
this.state.dataList.forEach(function(data) {
someComponentList.push(
<SomeComponent key={data.id} id={data.id}/>
)
})
return (
<div>
{someComponentList}
</div>
)
}
Run Code Online (Sandbox Code Playgroud)
在SomeComponent中:
var SomeComponent = React.createClass({
render : function({
// Render work here
}),
componentWillReceiveProps: function(nextProps) {
console.log(this.props.id == nextProps.id);
}
})
Run Code Online (Sandbox Code Playgroud)
所以componentWillReceiveProps我预计3 false控制台的结果(这是我做,如果我没有给key属性<SomeComponent>)之后setState() …