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 <CheckListItem key={rowID} listData={rowData} chekstatus='待驗收' />
  }

  return (
    <>
      <WhiteSpace size={'lg'} />
      <div style={{ zIndex: 30, position: 'fixed', width: '100%', background: '#F5F5F9', paddingBottom: 15 }}>
        <DateShowCell value={dateVal} onClick={handleClick} />
      </div>

      <RefreshView
        renderRow={renderRowFun}
        requestFun={getListProblemWaitAcceptApi}
        requestParams={{ shoppCode: '0010410508', status: 0, dateTimeBegin: tansferDate(dateVal)[0], dateTimeEnd: tansferDate(dateVal)[1] }}
        scroHeight={document.documentElement.clientHeight - 100}
      />

    </>
  )

}

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 (
    <div className={style.cellView} onClick={typeof onClick==='function'?()=>onClick():()=>{}}>
      <div className={style.leftTime}>
        <span className={value==='' ? style.gry :''}>{value===''?'請選擇時間':value}</span>
        <img src={require('@assets/icon_up_gray.png')} alt='' className={style.icondown} />
      </div>
      <div className={style.leftTime}>
        <div className={style.spiner} />
        <img src={require('@assets/icon_cash_date.png')}  alt='' className={style.icondate} />
      </div>
    </div>
  )

});