结论在最后。
为了探究React 中 Component 和 PureComponent 的区别，我们创建一个父组件(Component 组件)，一个子组件(PureComponent)。
在父组件中我们定义了一个引用类型goodsList和一个值类型变量 custom，并将其传递给子组件初始化子组件的state。在父组件及子组件中都定义了两个事件来改变各自的 state 数据
//父组件
import React, { Component } from "react";
import Btn from "./button"
class Mine extends Component {
constructor(props) {
super(props);
this.state = {
goodsList: [{
name: "上衣",
price: 98
}, {
name: "裤子",
price: 68
}],
custom: "duke"
}
}
changeStateObj() {
let list = this.state.goodsList;
list[0]["price"] += 1;
this.setState({
goodsList: list
}, () => {
console.log("Mine setState goodsList")
})
}
changeStateStr() {
this.setState({
custom: this.state.custom === "duke" ? "shao" : "duke"
}, function () {
console.log("Mine setState custom")
})
}
componentDidUpdate() {
console.log("Mine update!")
}
render() {
console.log("Mine render!")
return (
<div style={{ display: "flex" }}>
<div>
<p>
Mine
</p>
<p>
<button onClick={this.changeStateObj.bind(this)}>
改变引用数据
</button>
</p>
<p>
<button onClick={this.changeStateStr.bind(this)}>
改变基本数据
</button>
</p>
<br />
<p>state custom：{this.state.custom}</p>
<p>state goodsList：</p>
<ul>
{this.state.goodsList.map(item => <li key={item.name}> 名称：{item.name}<br />价格：{item.price}</li>)}
</ul>
</div>
<div style={{ marginLeft: "100px" }}>
<Btn goodsList={this.state.goodsList} custom={this.state.custom}></Btn>
</div>
</div>
)
}
}
export default Mine;
//子组件
import React, { PureComponent } from "react";
class Btn extends PureComponent {
constructor(props) {
super(props);
this.state = {
goodsList: this.props.goodsList,
custom: this.props.custom,
}
}
btnChangeStateObj() {
let list = this.state.goodsList;
list[0]["price"] -= 1;
this.setState({
goodsList: list
}, () => {
console.log("Btn setState goodsList", this.state.goodsList[0]["price"])
})
}
btnChangeStateStr() {
this.setState({
custom: this.state.custom === "shao" ? "duke" : "shao"
}, () => {
console.log("Btn setState custom")
})
}
componentDidUpdate() {
console.log("Btn update!")
}
render() {
console.log("Btn render!")
return (
<div>
<p>
Btn
</p>
<p>
<button onClick={this.btnChangeStateObj.bind(this)}>修改引用数据类型</button>
</p>
<p>
<button onClick={this.btnChangeStateStr.bind(this)}>修改基本数据类型</button>
</p>
<br />
<div style={{ display: "flex" }}>
<div>
<p>props custom：{this.props.custom}</p>
<p>props goodsList：</p>
<ul>
{this.props.goodsList.map(item => <li key={item.name}> 名称：{item.name}<br />价格：{item.price}</li>)}
</ul>
</div>
<div style={{ marginLeft: "100px" }}>
<p>state custom：{this.state.custom}</p>
<p>state goodsList：</p>
<ul>
{this.state.goodsList.map(item => <li key={item.name}> 名称：{item.name}<br />价格：{item.price}</li>)}
</ul>
</div>
</div>
</div>
)
}
}
export default Btn;
image.png
首次渲染 会触发父子组件的 render 函数，控制台如下：
image.png
操作一：我们先改变父组件的引用数据(点击"改变引用数据"按钮)，父组件调用 setState 改变了 goodsList 变量， 调用 render 函数重新渲染，并触发了 componentDidUpdate 函数，父组件的 goodsList 视图改变了，子组件 props goodsList 视图未改变
image.png
image.png
操作二：我们改变父组件的值类型数据(点击"改变基本数据"按钮)，父组件调用 setState 改变了 custom 变量，父子组件都调用了 render 函数重新渲染，并都触发了 componentDidUpdate 函数，父组件的state custom 视图改变，子组件 props custom 视图、props goodsList 视图、state goodsList 视图都改变。
image.png
image.png
操作三：点击"修改引用数据类型"按钮，视图没有任何变化，来看一下控制台输出，实实在在的修改了 state goodsList 的值，视图没有刷新
image.png
操作四：点击"修改基本数据类型"按钮，修改子组件 state custom 的值，父组件视图没有变化，子组件的 props goodsList 视图、state custom 视图、state goodsList 视图改变
image.png
image.png
//修改子组件的 btnChangeStateObj 函数
//每次给goodsList一个新数组
btnChangeStateObj() {
this.setState({
goodsList: [{
name: "上衣",
price: 999
}, {
name: "裤子",
price: 68
}],
}, () => {
console.log("Btn setState goodsList", this.state.goodsList[0]["price"])
})
}
刷新页面后，点击"修改引用数据类型"按钮修改子组件 state goodsList 数据，第一次点击子组件 state goodsList 视图改变，子组件调用了 render 函数渲染页面并触发了 componentDidUpdate 函数，之后每次点击都会触发 render 函数和 componentDidUpdate 函数，视图不再变化。
刷新后视图：
image.png
点击后视图：
image.png
image.png
总结：PureComponent 组件中，props/state 改变引用类型数据时，只要变量的引用指针没变就不触发render 函数，改变值类型数据会触发 render 函数。
思考：redux 中的 store，每次更新时都会用新的 store 来替换旧的 store，会触发 PureComponent 的 render 更新函数吗，如果 store 模块化呢？
网友评论