Question

我对以下代码有一些疑问。

根据我的理解，Example是一个类，它首先在ReactDOM.render作为参数传递时被实例化。

渲染后，它首先调用componentWillMount方法。

我不理解的是第二次ReactDOM.render电话。

第二个<Example />中的ReactDom.render是否与第一个componentWillMount相同。

我认为第二个调用实例化了Example的第二个实例，但显然它没有，因为<Example />方法没有被调用。

为什么两个<Example />是同一个实例？如何创建import React from 'react'; import ReactDOM from 'react-dom'; export class Example extends React.Component { componentWillMount() { alert('component is about to mount!'); } render() { return <h1>Hello world</h1>; } } ReactDOM.render( <Example />, document.getElementById('app') ); setTimeout(() => { ReactDOM.render( <Example />, document.getElementById('app') ); }, 2000);的第二个/单独实例？

let myids= ids.filter(sku => sku.color === 'ROSE' && 
                    sku.sizeId === '14M'; ).map(yy=>yy.skuId);

Answer 1

如果你想要两个实例，那么你应该有两个具有不同ID的主要div：

import React from 'react';
import ReactDOM from 'react-dom';

export class Example extends React.Component {
  componentWillMount() {
    alert('component is about to mount!');
  }

  render() {
    return <h1>Hello world</h1>;
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById('app')
);

ReactDOM.render(
  <Example />,
  document.getElementById('appTwo')
);

在HTML中：

<div id="app"></div>
<div id="appTwo"></div>

反应 - 如何实例化组件以及它们何时相同？

1 个答案: