1. 在shouldComponentUpdate聲明週期中, 自己處理邏輯
import React, { Component } from 'react'
class Comment extends Component {
shouldComponentUpdate({data: {name, score}}) {
if (name === this.props.data.name && score === this.props.data.score) {
return false
}
return true
}
render() {
console.log('-----render!---------')
return (
<div>
<p>{this.props.data.name}</p>
<p>{this.props.data.score}</p>
</div>
)
}
}
export default class CommentList extends Component {
constructor(props) {
super(props)
this.state = {
commentList: []
}
}
componentDidMount() {
setInterval(() => {
this.setState({
commentList: [
{name: 'zhangsan', score: '99'},
{name: 'lisi', score: '100'}
]
})
}, 1000)
}
render() {
return (
<div>
{this.state.commentList.map((item, index) => <Comment key={index} data= {item}/>)}
</div>
)
}
}
2. pureComponent(淺比較, 此時屬性展開)
import React, { Component } from 'react'
class Comment extends React.PureComponent {
render() {
console.log('-----render!---------')
return (
<div>
{/* 直接從屬性取 */}
<p>{this.props.name}</p>
<p>{this.props.score}</p>
</div>
)
}
}
export default class CommentList extends Component {
constructor(props) {
super(props)
this.state = {
commentList: []
}
}
componentDidMount() {
setInterval(() => {
this.setState({
commentList: [
{name: 'zhangsan', score: '99'},
{name: 'lisi', score: '100'}
]
})
}, 1000)
}
render() {
return (
<div>
{/* 屬性展開 */}
{this.state.commentList.map((item, index) => <Comment key={index} {...item}/>)}
</div>
)
}
}
3. React.memo(v16.6.0 之後的版本, 函數式的組件也有了類似於React.PureComponent的函數渲染優化)
import React, { Component } from 'react'
const Comment = React.memo(function({name, score}){
console.log('-----render!---------')
return (
<div>
{/* 直接從屬性取 */}
<p>{name}</p>
<p>{score}</p>
</div>
)
})
export default class CommentList extends Component {
constructor(props) {
super(props)
this.state = {
commentList: []
}
}
componentDidMount() {
setInterval(() => {
this.setState({
commentList: [
{name: 'zhangsan', score: '99'},
{name: 'lisi', score: '100'}
]
})
}, 1000)
}
render() {
return (
<div>
{/* 屬性展開 */}
{this.state.commentList.map((item, index) => <Comment key={index} {...item}/>)}
</div>
)
}
}