背景:
- 实现一个功能:父组件变化了,子组件是静态的,不需要变化,所以render函数不想再次执行
PureComponnet
PureComponnet
:如果接收到的新属性或者是更改后的状态和原属性、原状态相同的话,就不会去重新render了
在里面也可以使用
shouldComponentUpdate
,而且。是否重新渲染以shouldComponentUpdate
的返回值为最终的决定因素
- 原始代码:
import React ,{Component} from 'react'
// PureComponent 和shouldComponentUpdate 功能一样
// PureComponent 和shouldComponentUpdate 都有,优先执行和shouldComponentUpdate
import ReactDOM from 'react-dom'
// 子组件
class FooPure extends Component {
// 初始化数据
constructor(props){
super(props);
this.state = {};
}
render(){
console.log("FooPure子组件渲染了");
return(<div><h2>我是FooPure子组件</h2><br/></div>)
}
}
class App extends Component {
constructor(props) {
console.log('constructor 运行了');
super(props);
this.state = {
type: true
};
}
changeType = () => {
this.setState({ type:!this.state.type })
console.log('按钮被点击了');
}
// 渲染数据
render(){
const { type} = this.state;
return(
<div>
<button onClick={this.changeType}>点击按钮</button>{type}
<FooPure />
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
)
- 使用
PureComponnet
实现需求:
import React ,{Component,PureComponent} from 'react'
// PureComponent 和shouldComponentUpdate 功能一样
// PureComponent 和shouldComponentUpdate 都有,优先执行和shouldComponentUpdate
import ReactDOM from 'react-dom'
// 子组件
class FooPure extends PureComponent {
// 初始化数据
constructor(props){
super(props);
this.state = {};
}
// shouldComponentUpdate(){
// return true;
// }
render(){
console.log("FooPure子组件渲染了");
return(<div><h2>我是FooPure子组件</h2><br/></div>)
}
}
class App extends Component {
constructor(props) {
console.log('constructor 运行了');
super(props);
this.state = {
type: true
};
}
changeType = () => {
this.setState({ type:!this.state.type })
console.log('按钮被点击了');
}
// 渲染数据
render(){
const { type} = this.state;
return(
<div>
<button onClick={this.changeType}>点击按钮</button>{type}
<FooPure />
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
)
shouldComponentUpdate
- 作用:阻止了未发生变化的组件的再次渲染,增加了性能
- 局限性:对于传递的参数是对象或数组时,判断不出来对象或数组的内部元素是否发生了变化
nextProps
:将要从父组件传过来的props的值nextState
:将要改变的state的值- 必须写返回值,需要更新返回true,不需要更新返回false
- 原始代码:
import React ,{Component} from 'react'
import ReactDOM from 'react-dom'
// 子组件
class Foo extends Component {
// 初始化数据
constructor(props){
super(props);
this.state = {};
}
render(){
console.log("Foo子组件渲染了");
return(<div><h2>我是Foo子组件</h2><br/></div>)
}
}
class App extends Component {
constructor(props) {
console.log('constructor 运行了');
super(props);
this.state = {
type: true
};
}
changeType = () => {
this.setState({ type:!this.state.type })
console.log('按钮被点击了');
}
// 渲染数据
render(){
const { type} = this.state;
return(
<div>
<button onClick={this.changeType}>点击按钮</button>{type}
<Foo />
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
)
- 使用
shouldComponentUpdate
实现需求:
import React ,{Component} from 'react'
import ReactDOM from 'react-dom'
// 子组件
class Foo extends Component {
// 初始化数据
constructor(props){
super(props);
this.state = {};
}
shouldComponentUpdate(nextProps, nextState) {
if (nextProps.type === this.props.type) {
return false;
} else {
return true;
}
}
render(){
console.log("Foo子组件渲染了");
return(<div><h2>我是Foo子组件</h2><br/></div>)
}
}
class App extends Component {
constructor(props) {
console.log('constructor 运行了');
super(props);
this.state = {
type: true
};
}
changeType = () => {
this.setState({ type:!this.state.type })
console.log('按钮被点击了');
}
// 渲染数据
render(){
const { type} = this.state;
return(
<div>
<button onClick={this.changeType}>点击按钮</button>{type}
<Foo />
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
)