React中的三种组件及其区别

本文介绍了React中三种组件的创建方式:React.Component、React.PureComponent以及函数式组件Function。React.Component是最常用的组件形式,而PureComponent通过浅比较优化了shouldComponentUpdate生命周期方法,适用于纯展示组件。函数式组件没有生命周期和内部状态,轻量且性能优秀,适合用于只负责渲染数据的场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

React中有三种生成组件的方式,分别是React.ComponentReact.PureComponentFunction,他们有什么异同呢?

参考资料:

React.Component

React.Component是最常使用的方式,我们经常用它来生成组件

// Component
class Welcome extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
}

React.PureComponent

React.PureComponent成为纯组件。

// PureComponent
class Welcome extends React.PureComponent {
    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
}

React.Component 和 React.PureComponent 的区别

首先需要知道React生命周期函数shouldComponentUpdate,这个函数返回一个布尔值,如果返回true,那么当props或state改变的时候进行更新;如果返回false,当props或state改变的时候不更新,默认返回true。这里的更新不更新,其实说的是执不执行render函数,如果不执行render函数,那该组件和其子组件都不会重新渲染。

其区别在于:

  1. 继承PureComponent时,不能再重写shouldComponentUpdate
  2. React.PureComponent基于shouldComponentUpdate做了一些优化,通过prop和state的浅比较来实现shouldComponentUpdate,也就是说,如果是引用类型的数据,只会比较是不是同一个地址,而不会比较具体这个地址存的数据是否完全一致。

什么时候使用PureComponent

PureComponent 真正起作用的,只是在一些纯展示组件上。复杂组件用了就跟Component一样了。因为PureComponent做的是浅比较,所以如果需要让对象或者数组的state变化引起render,那么一定要生成新的对象或数组,让它的引用改变,这样才能够触发render,否则是无效的:

class App extends PureComponent {
  state = {
    items: [1, 2, 3]
  }
  // 这样写的话 items 的引用没有变,不会触发render更新界面的
  handleClick = () => {
    const { items } = this.state;
    items.pop();
    this.setState({ items });
  }
  // 这样写 生成了一个新的数组,引用变了,就能够触发render了。
  handleClick = () => {
    const { items } = this.state;
    items.pop();
    this.setState({ items: [...items] });
  }
  render() {
    return (<div>
      <ul>
        {this.state.items.map(i => <li key={i}>{i}</li>)}
      </ul>
      <button onClick={this.handleClick}>delete</button>
    </div>)
  }
}

函数式组件Function

一个函数就是一个组件,return一份DOM解构,其特点是:

  1. 没有生命周期
  2. 没有this(组件实例)
  3. 没有内部状态(state)
    优点 :轻量,如果你的组件没有涉及到内部状态,只是用来渲染数据,那么就用函数式组件,性能较好。
// functional component
function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值