```
import React, { Component } from 'react'
class Foo extends Component {
// 加上這個后,會比較傳入的 props 值,如果前后一致,則不渲染
shouldComponentUpdate(nextProps, nextState) {
if (nextProps.name === this.props.name) {
return false
}
return true
}
render() {
console.log('foo render')
return null
}
}
export default class App extends Component {
state = {
count: 0
}
render() {
return (
<div>
// 原本點擊事件觸發時,Foo組件會重新渲染
<button
onClick={() => this.setState({count: this.state.count+1})}
>add</button>
<Foo name="Mike"/>
</div>
)
}
}
```
或者使用PureComponent 聲明組件
```
import React, { Component, PureComponent } from 'react'
class Foo extends PureComponent {
render() {
console.log('foo render')
return null
}
}
```
但是PureComponent只會對比傳入的屬性第一級,不會對比屬性內部,如下,傳入 Foo組件的person中age發生了變化,但是Foo組件沒有重新渲染
```
import React, { Component, PureComponent } from 'react'
// PureComponent 只會對比傳入屬性的對比,不會判斷內部屬性
class Foo extends PureComponent {
render() {
console.log('foo render')
return <div>{this.props.person.age}</div>
}
}
export default class App extends Component {
state = {
count: 0,
person: {
age: 1
}
}
render() {
const person = this.state.person
return (
<div>
<button
onClick={() => {person.age++;this.setState({person})}}
>add</button>
<Foo person={person}/>
</div>
)
}
}
```
或者用 memo 包裹無狀態組件,相當于 PureComponent
```
const Foo = memo((props) => {
console.log('foo render')
return <div>{props.person.age}</div>
})
```
- 第一章:react 基礎
- 1. 關于 react
- 2. react 工作原理
- 0. 開發環境搭建
- 1. 創建并使用一個組件
- 1. 模塊化與組件化
- 2. 虛擬DOM
- 3. Diff 算法
- React 與 Vue 的使用差異
- 1. 組件創建方式
- 2. data 與 state
- 3. 方法使用方式&this
- 4. 數據雙向綁定
- 5. props
- 6. ref
- 7. for 循環元素
- 8. 生命周期
- create-react-app 改為多頁面應用
- react修改打包路徑,直接查看
- redux
- context
- lazy 實現延遲加載靜態屬性
- Memo實現指定組件進行渲染
- React Hooks
- React Hooks 的概念和意義
- 使用 useState
- axios單次切換formdata和payreload
- react 動態綁定 class
- 高階組件
- react設計模式