1. React.Component
最常见的，包含最常用的render(),componentDidMount(),shouldComponentUpdate…
shouldComponentUpdate(nextProps, nextState)
判断 React 组件的输出是否受当前 state 或 props 更改的影响。意思就是只要组件的 props 或者 state 发生了变化，就会重新构建 virtual DOM，然后使用 diff算法进行比较，再接着根据比较结果决定是否重新渲染整个组件。shouldComponentUpdate函数是重渲染时render()函数调用前被调用的函数，它接受两个参数：nextProps和nextState，分别表示下一个props和下一个state的值。并且，当函数返回false时候，阻止接下来的render()函数的调用，阻止组件重渲染，而返回true时，组件照常重渲染。
React.Component 并未实现 shouldComponentUpdate()，如何利用shouldComponentUpdate钩子函数优化react性能
demo1.tsx
import React, { PureComponent,Component } from 'react';
class CompareComponent extends Component<any, any>{
state = {
isShow: false,
count:1
}
shouldComponentUpdate(nextProps, nextState){
if(nextState.isShow===this.state.isShow){
return false // false则不会调用render
}
return true
}
changeState = () => {
this.setState({
isShow: true
})
};
handleAdd=()=>{
const {count} = this.state
this.setState({
count:count+1
})
}
render() {
console.log('render');
return (
<div>
<button onClick={this.changeState}>点击赋值</button>
<div>{this.state.isShow.toString()}</div>
<button onClick={this.handleAdd}>点击{this.state.count}</button>
</div>
);
}
}
export default CompareComponent
2.React.PureComponent
React.PureComponent 与 React.Component 几乎完全相同，也包括render,生命周期等等。但 React.PureComponent 通过props和state的浅对比来实现 shouldComponentUpate()。如果对象包含复杂的数据结构，它可能会因深层的数据不一致而产生错误的否定判断(表现为对象深层的数据已改变视图却没有更新
React.PureComponent在某些条件下，render不用重新渲染
PureComponent中不能有shouldComponentUpdate
demo2.tsx
import React, { PureComponent,Component } from 'react';
class CompareComponent extends PureComponent{
state = {
isShow: false,
count:1
}
changeState = () => {
this.setState({
isShow: true
})
};
handleAdd=()=>{
const {count} = this.state
this.setState({
count:count+1
})
}
render() {
console.log('render');
return (
<div>
<button onClick={this.changeState}>点击赋值</button>
<div>{this.state.isShow.toString()}</div>
<button onClick={this.handleAdd}>点击{this.state.count}</button>
</div>
);
}
}
export default CompareComponent
3.React.FC
React.FC<>的在typescript使用的一个泛型,FC就是FunctionComponent的缩写，是函数组件，这个泛型里面可以使用useState
这个里面无生命周期。
通过useState可以实现在函数组件中实现值的更新
useState在前两者中不能使用，只能在函数组件或者泛型里面使用。
具体如何使用，可参考这篇文章
import React, { useState } from 'react';
export interface NoticeProps {
name: string;
address: string
}
const Notice: React.FC<NoticeProps> = (props) => {
const [ name, setName ] = useState('angle');
const [ count, setCount ] = useState(1);
const addCount=()=>{
setCount(count+1)
}
console.log(count)
return <div>
<p>我是message页面,name是：{name}</p>
<p>我是message页面,count是：{count}</p>
<button onClick={() => setName('jane')}>点击我改变name</button>
<br />
<button onClick={addCount}>点击我改变count</button>
</div>;
}
export default Notice;
