更新没有父级之外的反应组件

Question

如果没有父组件，我应该如何正确更新组件？

我找到了两种方法：

第一种方法

这里我通过改变组件的状态来更新组件：

var Hello = React.createClass({
  render: function() {
    if (!this.state) return null;
    return (
      <div>Hello {this.state.name}</div>
    );
  }
});


var component = ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);
component.setState({name: "World"});

setTimeout(function(){
  component.setState({name: "StackOverFlow"});
}, 1000);

第二种方法

这里我通过ReactDOM.render方法更新组件：

var Hello = React.createClass({
  render: function() {
    return (
      <div>Hello {this.props.name}</div>
    );
  }
});


ReactDOM.render(
  <Hello name="world"/>,
    document.getElementById('container')
);

setTimeout(function(){
  ReactDOM.render(
    <Hello name="StackOverFlow"/>,
      document.getElementById('container')
  );

}, 1000);

那么哪种方法是正确的呢？或者也许这是第三种正确的方法？

Answer 1

如果你只是想从组件外部触发重新渲染，它的 forceUpdate 方法是公开的。

初始 ReactDOM.render 返回对组件的引用，您可以使用它：

const component = ReactDOM.render(<MyComponent />)

component.forceUpdate()