import React, { Component,PureComponent } from 'react';
// 1.第一种解决方案shouldComponentUpdate
// class Comment extends Component{
// shouldComponentUpdate(nextProps,nextState){
// //性能优化
// if(nextProps.comment.content===this.props.comment.content){
// return false;
// }else{
// return true
// }
// }
// render(){
// console.log('render')
// const {id,content,author} =this.props.comment;
// return(
// <div>
// <p>{id}</p>
// <p>{content}</p>
// <p>{author}</p>
// </div>
// )
// }
// }
//PureComponent它是以浅比较的方式实现的函数类 浅层计较的是值
// class Comment extends PureComponent{
// render(){
// console.log('render')
// const {id,content,author} =this.props;
// return(
// <div>
// <p>{id}</p>
// <p>{content}</p>
// <p>{author}</p>
// </div>
// )
// }
// }
//一种高阶组件的用法
//组件组合而非继承
//高阶组件=》高阶函数
const Comment = React.memo(({id,content,author})=>{
console.log('render');
return (
<div>
<p>{id}</p>
<p>{content}</p>
<p>{author}</p>
</div>
)
})
class CommentList extends Component {
constructor(props){
super(props);
this.state={
comments:[]
}
}
componentDidMount(){
setInterval(()=>{
this.setState({
comments:[
{
id:1,
author:'facebook',
content:'renact非常好'
},
{
id:2,
author:'尤雨溪',
content:'Vue非常好'
}
]
})
},1000)
}
render() {
return (
<div>
{
this.state.comments.map((item,i)=>{
return(
//<Comment key={item.id} comment={item}></Comment>
//<Comment key={item.id} id={item.id} content={item.content} author={i}></Comment>
<Comment key={item.id} {...item}></Comment>
)
})
}
</div>
);
}
}
export default CommentList;
https://segmentfault.com/a/1190000016494335?utm_source=tag-newest
我脑子炸了
