Question

我正在学习最新的React功能。根据{{3}}备忘录，功能组件中的备忘录的作用类似于Date date = new Date(); DateTime dateTime = new DateTime(date); dateTime = dateTime.plusMonths(3); Date newDate = dateTime.toDate();或shouldComponentUpdate，但是如何在功能组件中使用此备忘录的概念。

说我下面的类使用

PureComponent

功能组件

import React, { Component } from 'react';
class Test extends Component {
   shouldComponentUpdate(nextProps, nextState) {
     return this.props.text != nextProps.text;
   }
   render(){
     const { text } = this.props;
     return(
       <div>
          <h1>{text}</h1>
       </div>
     )
   }
}

如何在功能组件中使用备忘录编写类组件

Answer 1

备忘录用作高阶组件，您只需将功能组件导出包装在一起即可。每次您的应用程序更新时，备忘便会自动对道具进行浅表比较，以确定它们是否已更改以及组件是否需要重新渲染。

export default React.memo(Test);

Answer 2

React.memo()是HOC，它接受功能组件并返回与PureComponent行为相同的组件。

const MyComponent = React.memo(function MyComponent(props) {
  /* only rerenders if props change */
});

更新： React.memo还接受比较函数作为第二个参数。通过使用此功能，我们可以比较道具而不是比较浅的方式，而可以随意选择。这样可以更好地控制防止组件更新。当道具包含复杂的对象，并且您想在确定组件是否应该更新时比较这些对象的字段时，请使用此函数。例如

const MyComponent = React.memo(function MyComponent(props) {
/* only rerenders if props change */
}, (props1, props2) => {
prop1.my_property_to_check === prop2.my_property_to_check
});

反应中的备忘录是什么？

2 个答案: