React 全局记忆

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），并单独呈现。然后将结果按组件“实例”进行记忆。