useMemo小记

126 阅读1分钟
import 'antd/dist/antd.min.css';
import React, { useState, useMemo } from 'react';

export default function IndexPage() {
  const [count, setCount] = useState(0);
  const BtnTest = useMemo(() => {
    if (count > 4) {
      return (
        <div
          style={{ height: '200px', width: '200px', backgroundColor: 'pink' }}
        >
          <h2>测试useMemo</h2>
        </div>
      );
    } else {
      return <></>;
    }
  }, [count]);
  return (
    <div>
      <div>count:{count}</div>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        点击
      </button>
      {BtnTest}
    </div>
  );
}