React Hooks 渲染两次

Question

我定义了一个场景：我们有一个使用父级道具和自身状态的组件。

下面有两个组件DC和JOKER以及我的步骤：

1. 点击 DC 的按钮
2. DC 设置计数
3. JOKER 将使用旧状态进行渲染
4. 运行 useEffect 和 setCount
5. JOKER 再次渲染

我想问一下为什么 JOKER 渲染两次（第 3 步和第 5 步）而第一次渲染会浪费性能。 我只是不想第 3 步。 如果在类组件中，我可以使用 componentShouldUpdate 来避免它。但是 Hooks 也有同样的东西？

我的代码在下面，或者打开这个网站https://jsfiddle.net/stephenkingsley/sw5qnjg7/

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

function JOKER(props) {
  const [count, setCount] = useState(props.count);
  useEffect(() => {
    console.log('I am JOKER\'s useEffect--->', props.count);
    setCount(props.count);
  }, [props.count]);

  console.log('I am JOKER\'s  render-->', count);
  return (
    <div>
      <p style={{ color: 'red' }}>JOKER: You clicked {count} times</p>
    </div>
  );
}

function DC() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => {
        console.log('\n');
        setCount(count + 1);
      }}>
        Click me
      </button>
      <JOKER count={count} />
    </div>
  );
}

ReactDOM.render(<DC />, document.querySelector("#app"))

Answer 1

这是 StrictMode 的一个有意的功能。这只发生在 开发，并有助于发现意外的副作用放入 渲染阶段。我们只对带有 Hooks 的组件执行此操作，因为那些 更容易在错误的地方意外产生副作用。 -- gaearon commented on Mar 9, 2019

Answer 2

如果我们只是想做类似componentShouldUpdate的事情，我们可以使用useMemo。

function DC() {
  const [count, setCount] = useState(0);
  const [sum, setSum] = useState(0);
  const memoizedJOKER = useMemo(() => <JOKER count={count} />, [count]);
  return (
    <div>
      <button onClick={() => {
        // setCount(count + 1);
        setSum(sum + 1);
        console.log('---click---');
        console.log('\n');
      }}>
        Click me
      </button>
      <p>DC: You clicked {count} times</p>
      <p>now this is {sum} times</p>
      {memoizedJOKER}
    </div>
  );
}

当你点击按钮时，JOKER 不会再次渲染。

Answer 3

我不确定我是否理解你的问题，但这里是。

当您的<DC /> 组件更改状态时，它会将新的状态值count 传递给组件Joker。此时组件将重新渲染，考虑到第一次更改。

然后你将效果绑定到props.count更改；

  useEffect(() => {
    console.log('I am JOKER\'s useEffect--->', props.count);
    setCount(props.count); 
  }, [props.count]);// <-- This one

当组件从组件 DC 获取新值时触发。它会将自身Joker 的状态设置为props.count，这会导致组件重新渲染。

然后为您提供以下输出：

I am JOKER's  render--> 1 // Initial render where Joker receives props from DC
index.js:27 I am JOKER's useEffect---> 2 // The hook runs because props.count changed
index.js:27 I am JOKER's  render--> 2 // Joker rerenders because its state updated.