两种组件的声明方式,都可以创建React组件
import React,{Component,PureComponent} from 'react'
class A extends Component{
//....
}
class B extends PureComponent{
//...
}
区别:
两种声明组件的方式区别不大,最主要的区别就是shouldComponentUpdate钩子函数是否可以使用
- Component组件内, 当props或state发生变化时, 会取决于shouldComponentUpdate()函数返回的值 来决定是否会重新渲染组件,true渲染 false不渲染,。当父组件的state或props更新时,无论子组件的props和state是否更新 都会重新渲染子组件, 这样会有性能消耗。
- PureComponent组件内,不可使用shouldComponentUpdate钩子函数,组件是否重新渲染会自动判断props和state是否发生变化, 浅比较:对于引用类型的数据,只比较变量的地址是否改变。对比之后 没有变化不渲染。
下面写一个例子来实践一下
import React, { PureComponent } from 'react';
class AddModal extends PureComponent<IProps, State> {
state = {
arr: [1,2,3,4,5],
};
handleClick = () => {
const { arr } = this.state
arr.pop();
this.setState({
arr,
})
}
render(){
const { arr } = this.state
return <div>
<button onClick={this.handleClick}>click</button>
<p>arr</p>
</div>
}
// 页面最初展示的是 12345
// 当我们点击按钮之后 页面并没有变化 展示的还是12345
}
- Component
import React from 'react';
class AddModal extends React.Component<IProps, State> {
state = {
arr: [1,2,3,4,5],
};
handleClick = () => {
const { arr } = this.state
arr.pop();
this.setState({
arr,
})
}
render(){
const { arr } = this.state
return <div>
<button onClick={this.handleClick}>click</button>
<p>arr</p>
</div>
}
// 页面最初展示的是 12345
// 当我们点击按钮之后 页面发生变化 展示的是1234
}
网友评论