极客时间对于推广渠道会有返利优惠,比如山月在极客时间买了一门课,再把课程分享给好友购买,这时极客时间会向山月返利20元左右。
而我现在做了一个返利平台,你可以在上边通过山月的链接购买课程,此时极客时间会向我返利。为了共同学习,而你可以添加我的微信 (shanyue94),我将把极客时间给我的返利发一个红包全部返给你

# 在 react 中,useCallback 和 useMemo 是不是值得大量使用?

现状: 目前我写 React 很少使用,在少数有必要的情况下进行使用。

  1. 在 React 中,每一个组件重新渲染时,会导致该组件所有的子组件都会进行重新渲染。
  2. 在 React 中,性能优化的核心是减少组件的渲染次数

基于以上两点,当一个子组件所有的 props 都未发生改变时,仍然会受到重新渲染,将会造成性能上的浪费。

function One() {
  console.log("Rndering One Component");
  return <h2>One</h2>;
}

const MemoOne = React.memo(function One() {
  console.log("Rndering MemoOne Component");
  return <h2>MemoOne</h2>;
});

如以上两个组件,MemoOne 通过 React.memo 进行优化,通过浅比较对比渲染前后两次的 props,避免了每次子组件渲染更新的消耗。

而在我的生产实践中,

那此时的主题, useMemouseCallback 是如何进行性能优化的呢?

React.memo 通过浅比较来进行性能优化,

以下是一个关于 useMemo 的示例,此时优化无法生效,

function App() {
  const [count, setCount] = useState(0);

  const normalStyle = {
    color: "white"
  };

  const memoizedStyle = useMemo(() => {
    return {
      color: "white"
    };
  }, []);

  return (
    <>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Increment {count}
      </button>
      <One style={memoizedStyle} title="Memoized" />
      <One style={normalStyle} title="Normal" />
    </>
  );
}

关于山月

我的项目:
我的微信:shanyue94,欢迎交流
Last Updated: 7/21/2019, 11:25:08 AM