chenhuiYj / note

开发笔记
6 stars 0 forks source link

react useEffect 执行优化 #26

Open chenhuiYj opened 4 years ago

chenhuiYj commented 4 years ago

关于 react useEffect hook 可以看做是 componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

import React, { useState, useEffect } from 'react';

function Example() {
  const [status, setStatus] = useState(false);

  useEffect(() => {
    document.title = `现在状态是:${status?:'开':'关'}`;
  });

  return (
    <div>
      <button onClick={() => useState(!status)}>
        Click me
      </button>
    </div>
  );
}

根据上面的代码,每次点击按钮,都可以改变页面的标题(“开”和“关”的来回切换)

但是问题也出来了,因为 useEffect 在第一次渲染后和每次更新后都会执行。如果页面上有多个 state ,如果只改变了 status ,也会引起整个页面的重新渲染。或者我只想改变 status 的时候,再 useEffect ,其他情况就不执行呢?这个实现不难,只需要加上第二个参数就好

比如想仅当 status 改变再执行,下面的写法就可以实现

useEffect(() => {
    document.title = `现在状态是:${status?:'开':'关'}`;
  },[status]);

比如想 只在第一次渲染后执行一次,下面的的写法就可以实现

useEffect(() => {
    document.title = `现在状态是:${status?:'开':'关'}`;
  },[]);

如此一来,可以避免 useEffect 多次重复的执行,避免一些无用的执行。这样可以实现执行次数上的优化。