资讯专栏INFORMATION COLUMN

React.memo

Meils / 1182人阅读

摘要:介绍之前,先了解一下和。不同是没有实现,而通过和的浅比较实现了。如果组件的和相同时,的内容也一致,那么就可以使用了这样可以提高组件的性能。例如当和中有复杂数据结果时,不好使用。示例这种方式依然是一种对象的浅比较,有复杂对象时无法。

介绍React.memo之前,先了解一下React.ComponentReact.PureComponent

React.Component

React.Component是基于ES6 class的React组件。

React允许定义一个class或者function作为组件,那么定义一个组件类,就需要继承React.Component.

例如:

class Welcome extends React.Component {
  render() {
    return 

Hello, {this.props.name}

; } }

注意:继承React.Component的React组件类中,render()为必须方法,其他都为可选。

React.PureComponent

React.PureComponentReact.Component类似,都是定义一个组件类。不同是React.Component没有实现shouldComponentUpdate(),而 React.PureComponent通过propsstate的浅比较实现了。

如果组件的propsstate相同时,render的内容也一致,那么就可以使用React.PureComponent了,这样可以提高组件的性能。

例如:

class Welcome extends React.PureComponent {
  render() {
    return 

Hello, {this.props.name}

; } }
当props和state中有复杂数据结果时,不好使用PureComponent
React.memo

React.memo是一个高阶组件,类似于React.PureComponent,不同于React.memofunction组件,React.PureComponentclass组件。

示例:

const MyComponent = React.memo(props => {
  /* render using props */
  return (

  );
});

这种方式依然是一种对象的浅比较,有复杂对象时无法render。在React.memo中可以自定义其比较方法的实现。

例如:

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);
该方法在V16.6.0才支持

推荐阅读《React 手稿》

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/99065.html

相关文章

  • 使用React.memo()来优化函数组件的性能

    摘要:函数组件上面我们探讨了如何使用和的方法优化类组件的性能。它的作用和类似,是用来控制函数组件的重新渲染的。其实就是函数组件的。 原文链接: Improving Performance in React Functional Component using React.memo 原文作者: Chidume Nnamdi 译者: 进击的大葱 推荐理由: 本文讲述了开发React应用时如...

    BetaRabbit 评论0 收藏0
  • React16时代,该用什么姿势写 React ?

    摘要:的返回值将作为的参数,如果返回,则不更新,不能返回或以外的值,否则会警告。在更新之前调用,此时已更新返回值作为的第个参数一般用于获取之前的数据语法是从的返回值,默认是的使用场景一般是获取组建更新之前的滚动条位置。 React16 后的各功能点是多个版本陆陆续续迭代增加的,本篇文章的讲解是建立在 16.6.0 版本上本篇文章主旨在介绍 React16 之后版本中新增或修改的地方,所以对于...

    Reducto 评论0 收藏0
  • React源码解析之React.createRef()/forwardRef()

    摘要:一作用获取目标的实例使用源码可修改的不可变的对象没见过这种写法初始化对象,属性初始值为解析源码比较简单,就是返回了带有属性的二作用从父组件中获取子组件是的实例使用是没有实例的,因为它是,所以没有,所以不能通过来拿到实例将的传给子组件,并绑定 showImg(https://segmentfault.com/img/remote/1460000019877636); 一、React.cr...

    aisuhua 评论0 收藏0
  • React 源码漂流(一)之 起航

    摘要:在前端开发过程中,源码解读是必不可少的一个环节,我们直接进入主题,注意当前版本号。注意包文件仅仅是的必要的功能性的定义,它必须要结合一起使用下是,原生环境下是。 在前端开发过程中,源码解读是必不可少的一个环节,我们直接进入主题,注意当前 React 版本号 16.8.6。 注意:react 包文件仅仅是 React components 的必要的、功能性的定义,它必须要结合 React...

    Mr_zhang 评论0 收藏0
  • React 新特性讲解及实例(一)

    摘要:接收一个属性,这个组件会让后代组件统一提供这个变量值。因此对于同一个对象而言,一定是后代元素。解决方法就是把内联函数提取出来,如下讲了这么多,我们还没有讲到其实我们已经讲完了的工作原理了。 本节主要讲解以下几个新的特性: Context ContextType lazy Suspense 错误边界(Error boundaries) memo 想阅读更多优质文章请猛戳GitHub博...

    Betta 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<