React Hooks は 2 回レンダリングされます 質問する

シーンを定義します。親のプロパティと自身の状態を使用するコンポーネントがあります。

2 つのコンポーネント DC と JOKER があり、その下の手順を実行します。

1. DCのボタンをクリック
2. DC セットカウント
3. JOKERは古い状態でレンダリングされます
4. useEffectとsetCountを実行する
5. JOKERが再びレンダリング

JOKER がなぜ 2 回レンダリング (ステップ 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"))