React.Component、React.PureComponent、React.FC的使用与区别

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.Component、React.PureComponent的区别

通过查看render的渲染次数会发现规律
shouldComponentUpdate返回true的话,React.Component无论state发生新的改变,都会重新渲染render。若是返回false,则state在满足条件下返回false的话,不会重新渲染render

  • PureComponent = shouldComponentUpdate(false) + React.Component

4.React.FC

React.FC<>的在typescript使用的一个泛型,这个泛型里面可以使用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;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值