2

私は React を学んでいますが、React.memo() が「機能していない」ことがわかりました。これは、親クラスベースのコンポーネントで更新を行うたびにコンポーネントが再レンダリングされるためです。しかし問題は、コンポーネントの小道具が変わらないことです。少なくとも私にとっては理にかなっています

私は React.memo(Men) を使用していますが、 useEffect フックを使用して再レンダリングする画面に印刷しました

const Men = props => {
        useEffect(() => {
          console.log("rendered");
        });
        return <p onClick={props.add}>{props.adder}</p>;
    };
    React.memo(Men);

    class App extends React.Component {
        state = {
          counter: 0,
          adder: "press"
        };

        add = () => {
          this.setState(prevState => {
            return {
              counter: prevState.counter + 1
            };
          });
        };

        render() {
          return (
            <div className="App">
              <p>{this.state.counter}</p>
              <Men adder={this.state.adder} add={this.add} />
            </div>
          );
        }
      }

私のコンソールでは、useEffect フック内の「rendered」というメッセージが 1 回だけ表示されることを期待しています。

4

2 に答える 2