优雅的react

渲染优化

{months.map((m, index) => (
        <Month
          style={
            index === month - 1
              ? {
                  backgroundColor: "#51f",
                  color: "#fff",
                }
              : undefined
          }
          onClick={selectMonth(index + 1)}
          key={index}
        >
          {m}
        </Month>
      ))}

const renderItem = useCallback(
    (m, index) => {
      const props = {
        onClick: handleSelectMonth(index + 1),
        key: index,
        children: m,
      };
      if (index === select - 1) return <ActiveMonth {...props} />;
      return <Month {...props} />;
    },
    [handleSelectMonth, select]
  );


{months.map(renderItem)}

axios客户端错误拦截

乐观更新和保守更新

可预期错误，与不可预期错误处理

if else

if (companyType) checkUpdatePerson(newPerson);
else updateEnd();
//
if (companyType) {
  return checkUpdatePerson(newPerson);
}
updateEnd();
🥶
if () {
// ...
}else{
// TODO
}

当props是有效的数组是再进行某些操作

👏
    if (dataSource && dataSource.length) {
                return (...)
    }
    return null;
    // 
    if (Array.isArray(dataSource) && dataSource.length) {
                return (...)
    }
    🥶
    if (dataSource && dataSource,length !== 0){
        return ()
    } else {
        return null;
    }

👏
{icon ? <Icon type={icon} style={iconStyle}/> : null}
🥶
{icon ? <Icon type={icon} style={iconStyle}/> : <></>}

import { Breadcrumb } from 'antd';

const BreadcrumbItem = Breadcrumb.Item;

return (<BreadcrumbItem> ... <BreadcrumbItem/>)

const transfers = {};
🥶
for (const { id: orderId, updatedAt, total, storeId } of finishOrders) {
  if (new Date(updatedAt).getTime() <= EFFECTIVE_TIME) {
    const transfer = { orderId, total };
    if (transfers[storeId]) {
      transfers[storeId].push(transfer);
    } else {
      transfers[storeId] = [transfer];
    }
  }
}
🤔
// ...
for (const { id: orderId, updatedAt, total, storeId } of finishOrders) {
    if (new Date(updatedAt).getTime() <= EFFECTIVE_TIME) {
      const transfer = { orderId, total };
      transfers[storeId] ? transfers[storeId].push(transfer) : (transfers[storeId] = [transfer]);
    }
  }
 👏
 const transfers = finishOrders.reduce((prev, { id: orderId, updatedAt, total, storeId }) => {
    if (new Date(updatedAt).getTime() <= EFFECTIVE_TIME) {
      const transfer = { orderId, total };
      prev[storeId] ? prev[storeId].push(transfer) : (prev[storeId] = [transfer]);
    }
    return prev;
  }, {});