问个问题？
来源：2-8 React 中的生命周期函数（1）
JJJustin
2019-09-24 19:08:44
shouldComponentUpdate(nextProps,nextState)
nextProps
nextState
1这两个参数分别是什么
2还要个问题是我数组三个元素传递子组件 为什么这个方法执行四次
2回答
-
好帮手慕夭夭
2019-09-25
你好同学，解答如下：
1.当props和state改变的时候，就会触发shouldComponentUpdatenextProps ，所以 nextProps和 nextState 分别表示更新之后的props和state。
2. 上面讲到了， 只要props和state改变，就会触发这个生命周期。参考如下：
（1）点击Item的时候，菜单的事件中改变了state中的值，此时Item重新渲染。触发1次
（2）修改了dataList，导致重新执行setShow，从而重新渲染了3个Item。即触发3次
即总共触发4次哦。祝学习愉快，望采纳。
0 -
JJJustin
提问者
2019-09-24
贴上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <script src="js/react.js"></script>-->
<!-- <script src="js/react-dom.js"></script>-->
<!-- <script src="js/babel.js"></script>-->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="js/data.js"></script>
<style>
.panel{
border:1px solid #000;
width: 80%;
}
.title{
margin: 0;
padding: 10px;
background: #ccc;
}
p.vip{
color: red;
}
p.message{
color: #aaa;
}
.listWrap{
height: 0;
overflow: hidden;
transition: .5s;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class List extends React.Component{
render(){
return (
<ul>
{
this.props.list.map((val,index) => {
return (
<li key={index}>
<p className="vip">{val.username}</p>
<p className="message">{val.message}</p>
</li>
);
})
}
</ul>
);
}
}
class Item extends React.Component{
constructor(){
super(...arguments);
this.state = {
show: this.props.show
};
this.changeList = this.changeList.bind(this);
}
showList(show){
var list = this.refs.list;
if (show){
// console.log(list);
list.style.height = list.scrollHeight + "px";
}else {
list.style.height = 0;
}
}
componentDidMount(){
this.showList(this.state.show);
}
shouldComponentUpdate(nextProps,nextState){
// console.log(1);
console.log(nextProps.show);
if(this.state.show != nextProps.show){
// console.log(1);
this.setState({
show: nextProps.show
})
}
if (this.state.show != nextState.show){
// console.log(2);
this.showList(nextState.show);
}
return false;
}
changeList(){
let show = !this.state.show;
this.setState({
show
});
// console.log(show);
if (show){
this.props.onChange(this.props.index);
}
}
render(){
return (
<div>
<h2 className="title" onClick={this.changeList}>{this.props.data.name}</h2>
<div className="listWrap" ref="list">
<List list={this.props.data.list} />
</div>
</div>
);
}
}
class Penel extends React.Component{
constructor(){
super(...arguments);
this.state = {
showList: [false,false,false]
};
this.changeList = this.changeList.bind(this);
}
changeList(index){
// console.log(index);
let showList = this.state.showList;
showList = showList.map((item,i) => {
return index === i ? true: false;
});
this.setState({
showList
});
}
setShow(){
var list = Object.keys(dataList).map((val,index) => {
return (
<Item
data={dataList[val]}
key={index}
show={this.state.showList[index]}
onChange={this.changeList}
index={index}
/>
);
});
return list;
}
render(){
return (
<div className="panel">
{this.setShow()}
</div>
);
}
}
ReactDOM.render(
<Penel/>,
document.getElementById("app")
);
</script>
</body>
</html>let dataList = {
friends:{
name: '朋友',
list:[
{username:'就花菜',message:'什么是人脉',vip:true},
{username:'就花菜',message:'什么是人脉',vip:true},
{username:'就花菜',message:'什么是人脉',vip:true},
{username:'就花菜',message:'什么是人脉',vip:true}
]
},
families:{
name: '朋友',
list:[
{username:'就花菜',message:'什么是人脉',vip:true},
{username:'就花菜',message:'什么是人脉',vip:true},
{username:'就花菜',message:'什么是人脉',vip:true},
{username:'就花菜',message:'什么是人脉',vip:true}
]
},
colleagues:{
name: '朋友',
list:[
{username:'就花菜',message:'什么是人脉',vip:true},
{username:'就花菜',message:'什么是人脉',vip:true},
{username:'就花菜',message:'什么是人脉',vip:true},
{username:'就花菜',message:'什么是人脉',vip:true}
]
}
}0
相似问题