React Global Memoization

Question

我有以下React测试应用程序：

class MemoTestApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	showOverlay: false,
    }
  }
  
  render() {
    return (
      <div>
        <div>
          <MemoComponent str="Hello World" />
        </div>
        <div>
          <input type="button" onClick={() => this.setState({showOverlay: true})} value="Show Overlay"/>
        </div>
        {this.state.showOverlay && (
          <div className="overlay">
            <h2>Overlay</h2>
            <MemoComponent str="Hello World" />
          </div>
        )}
      </div>
    )
  }
}

const Component = (props) => {
  console.info('render ' + props.str);
  return <div>{props.str}</div>;
}

const MemoComponent = React.memo(Component);

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

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  position: relative;
  min-height: 200px;
}

.overlay {
  position: absolute;
  padding: 20px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

如您所见，有一个记忆功能组件，使用相同的道具渲染了两次。第一个渲染立即进行，第二个渲染在用户按下按钮后进行。

但是，该组件实际上呈现了两次，如您在控制台中所见。 React.memo阻止了组件的第一个实例的第二次渲染，但是第二个实例似乎“现在知道”该组件​​已经使用给定的props渲染。

是否有一种方法可以使“记忆”成为“全局”，即在组件的不同实例之间共享渲染的输出？

默认情况下React.memo不是全局的原因是什么？

Answer 1

他们可能有自己的状态，例如柜台。或者它们有副作用，例如自己的间隔，取决于DOM节点的自定义逻辑。

因此，它们必须是单独的“实例”，具体取决于它们在DOM上的位置（父节点，索引或key），并分别进行渲染。然后根据组件“实例”记录结果。