Question

你能解释一下为什么重新呈现的元素不会对元素state.status属性应用更改吗？使用ReactDOM.unmountComponentAtNode正确的方法来执行此操作吗？我知道该元素不应该删除自己但这是用于演示

class CustomModal extends React.Component {
  
  constructor(props){
    super(props)
    this.state = {
    
      status:this.props.status
    
    }
    this.onClick = this.onClick.bind(this);
  }
  

  render(){
   return  <h1 onClick={this.onClick}>Click Me!</h1>
  }
  
  onClick(){
    
    console.log('May i log to console?:' + this.state.status)
    

    this.setState({status:false});
    
    // this is somewhat cumbersome?
    {/* ReactDOM.unmountComponentAtNode(document.getElementById('container')) */}
    
    // supposed to rerender the element?
    // And the state.status element should be true?
        ReactDOM.render(<CustomModal status={true} />,document.getElementById('container'))
  }

}


      ReactDOM.render(<CustomModal status={true} />,document.getElementById('container'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id="container">

</div>

Answer 1

渲染到DOM的主要API如下所示：
ReactDOM.render(reactElement, domContainerNode)
要更新现有组件的属性，请调用render   再次使用新元素。

如果您要在单页应用程序中呈现React组件，那么就是您   可能需要插入应用程序的视图生命周期以确保您的应用程序能够   在适当的时候调用unmountComponentAtNode。反应不会   自动清理一棵树。您需要手动调用：
ReactDOM.unmountComponentAtNode(domContainerNode)
这很重要，经常被遗忘。忘了打电话   unmountComponentAtNode将导致您的应用程序泄漏内存。没有   我们可以自动检测何时适合这样做   工作。每个系统都不同。

它不是DOM独有的。如果要插入React Native视图   在现有iOS应用程序的中间，您将遇到类似的问题。

来源：https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html

将组件重新渲染到已渲染的容器不能按预期工作？

1 个答案: