javascript - shouldComponentUpdate 等效于功能组件，以忽略状态更改

Question

我的代码有一个组件，它同时接受 props 并有自己的内部状态。
组件应仅在其 Prop 更改时重新渲染。状态更改不应触发重新渲染。
此行为可以通过基于类的组件和自定义 shouldComponentUpdate 来实现。功能。
但是，这将是代码库中第一个基于类的组件。一切都是通过功能组件和钩子(Hook)完成的。
因此，我想知道是否可以使用功能组件编写所需的功能。

在几个没有解决真正问题的答案之后，我想我必须重新提出我的问题。这是一个包含两个组件的最小示例:

内部接受一个 Prop 并具有状态。这是有问题的组件。状态更改后不得重新渲染。 Prop 更改应触发重新渲染。

外部是内部的包装。它在这个问题的范围内没有任何意义，只是为了给 Inner 提供 Prop 并模拟 Prop 更改。

为了演示所需的功能，我使用基于类的组件实现了 Inner。 A live version of this code can be found on codesandbox .如何将其迁移到功能组件:
Inner.tsx :

import React, { Component } from 'react'

interface InnerProps{outerNum:number}
interface InnerState{innerNum:number}

export default class Inner extends Component<InnerProps, InnerState> {
    state = {innerNum:0};

    shouldComponentUpdate(nextProps:InnerProps, nextState:InnerState){
        return this.props != nextProps;
    }
    render() {
        return (
            <button onClick={()=>{
                this.setState({innerNum: Math.floor(Math.random()*10)})
            }}>
                {`${this.props.outerNum}, ${this.state.innerNum}`}
            </button>
        )
    }
}

外部.tsx:

import React, { useState } from "react";
import Inner from "./Inner";

export default function Outer() {
  const [outerState, setOuterState] = useState(1);

  return (
    <>
      <button
        onClick={() => {
          setOuterState(Math.floor(Math.random() * 10));
        }}
      >
        change outer state
      </button>
      <Inner outerNum={outerState}></Inner>
    </>
  );
}

The official docs say将组件包装在 React.memo 中.但这似乎不适用于防止状态更改的重新渲染。它仅适用于 Prop 更改。

我试图制作 React.memo工作。您可以看到一个代码版本，其中外部和内部都是功能组件 here .

相关问题:

How to use shouldComponentUpdate with React Hooks? : 这个问题只涉及 Prop 变化。接受的答案建议使用 React.memo
shouldComponentUpdate in function components :这个问题早于有状态的功能组件。接受的答案解释了功能组件如何不需要 shouldComponentUpdate因为他们是无国籍的。

Answer 1

React 备忘录不会停止状态更改

React.memo only checks for prop changes. If your function component wrapped in React.memo has a useState or useContext Hook in its implementation, it will still rerender when state or context change.

引用:- https://reactjs.org/docs/react-api.html#reactmemo