react hook useMemo

类似vue的computed

只有在a变化后,才重新计算c, 用于过滤不必要的计算

useMemo在渲染期间执行, 此时不要进行dom处理

import React, { useState, useEffect, useMemo } from "react";
const doJob = (a, b) => {
  console.log("doJob", a, b);
  return [a, "---", b].join("");
};
export default () => {
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);

  // 这种情况下, 每次a,b只要有一个变化, 都会重新执行这个函数
  //   const c = doJob(a, b);

  // 只有当a变化时, 才重新计算c的属性
  const c = useMemo(() => {
    return doJob(a, b);
  }, [a]);

  return (
    <div>
      <div>
        a:{a}, b:{b}, c:{c}
      </div>
      <button onClick={() => setA((c) => c + 1)}>add a</button>
      <button onClick={() => setB((c) => c + 1)}>add b</button>
    </div>
  );
};

 

来源：oschina

链接：https://my.oschina.net/ahaoboy/blog/4422329