React.memo

React.memo 为高阶组件。它与 React.PureComponent 非常相似,但它适用于函数组件,但不适用于 class 组件。

function MyComponent(props) {
  /* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
  /*
  如果把 nextProps 传入 render 方法的返回结果与
  将 prevProps 传入 render 方法的返回结果一致则返回 true,
  否则返回 false
  */
}
export default React.memo(MyComponent, areEqual);
import React from 'react'
import { WhiteSpace } from 'antd-mobile';

import CheckListItem from '@components/checkListItem/index'
import RefreshView from '@components/pullRefresh/index'
import DateShowCell from '@components/dateShowCell/index'
import { getListProblemWaitAcceptApi } from '../../../services/tableApi';
// import Result from '@components/result/result';

interface IProps {
  dateVal: string;
  onDateClick: Function;
}

function areEqual(prevProps: any, nextProps: any) {
  /*
  如果把 nextProps 传入 render 方法的返回结果与
  将 prevProps 传入 render 方法的返回结果一致则返回 true,
  否则返回 false
  */

  if (prevProps.dateVal === nextProps.dateVal) {
    return true
  } else {
    return false
  }

}

function children({ dateVal, onDateClick }: IProps, ): any {

  const handleClick = () => {
    onDateClick()
  }

  // tslint:disable-next-line:no-shadowed-variable
  const tansferDate = (dateVal: string): string[] => {
    const dateArray = dateVal.split('-');
    if (dateArray.length === 2) {
      return [dateArray[0].replace(/\//g, '-'), dateArray[1].replace(/\//g, '-')]
    } else {
      return []
    }

  }

  const renderRowFun = (rowData: any, rowID: any) => {
    return 
  }

  return (
    <>
      
      
) } export default React.memo(children, areEqual);
import React from 'react'

import style from './index.module.scss'


interface IProps {
  value: string;
  onClick?: Function;
}


export default React.memo(({ value,onClick }: IProps) => {
  return (
    
onClick():()=>{}}>
{value===''?'请选择时间':value}
) });

你可能感兴趣的:(React.memo)