Question

我在React中赚了很多Modals。

我发现了制作Modal的两种方法。

第一个是这样的

class Modal extends React.Component {

  componentDidMount(){ console.log('DidMount') };
  componentDidUpdate(){ console.log('DidUpdate') };
  componentWillUnmount(){ console.log('WillUnmount') };

  render(){
    return (
      <React.Fragment>
        <div className="overlay" />
        <div className="Modal>
          This is Modal.
        </div>
      </React.Fragment>
    )
  }
}


class App extends React.Component { 
  state = {
    isModalOpen: false
  }

  toggleModal = () => this.setState({ isModalOpen: !this.state.isModalOpen })  
  render(){
    return (
      <div className="App">
        <button onClick={this.toggleModal}>Toggle</button>
        { this.state.isModalOpen ? <Modal /> : null }
      </div>
    )
  }
}

状态更改后，此重复componentDidMount()和componentWillUnmount()。

让我们看看另一个。

class Modal extends React.Component {

  componentDidMount(){ console.log('DidMount') };
  componentDidUpdate(){ console.log('DidUpdate') };
  componentWillUnmount(){ console.log('WillUnmount') };

  render(){
    return (
      <React.Fragment>
        { props.isOpen ? <div className="overlay" /> : null }
        { props.isOpen ? <div className="Modal">This is Modal</div> : null }
      </React.Fragment>
    )
  }

}
class App extends React.Component { 
  state = {
    isModalOpen: false
  }

  toggleModal = () => this.setState({ isModalOpen: !this.state.isModalOpen })  

  render(){
    return (
      <div className="App">
        <button onClick={this.toggleModal}>Toggle</button>
        <Modal isOpen={this.state.isModalOpen} />
      </div>
    )
  }
}

此人不会叫componentWillUnmount()。

状态更改时，它将调用componentDidUpdate()。

我想知道哪种是更好的性能表现或其他方式。

谢谢。

Answer 1

React.Fragment有点快，并且使用更少的内存，因为它不需要创建额外的DOM节点。

话虽这么说，除非您的应用程序又大又复杂，否则我不必担心。我不确定要在React.Fragment中包装模式div是什么。

Answer 2

您的问题有点令人困惑，但是我将尝试澄清一些事情。

关于您的评论：该评论不会称为componentWillUnmount()。它不会调用cWU()方法，因为您始终在渲染器中使用此<Modal isOpen={this.state.isModalOpen} />来渲染它。现在，根据您的isOpen道具是否出现，这是另一个问题。另一方面，如果您有类似{isThisPropertyTrue ? <Modal isOpen={this.state.isModalOpen} /> : null}的东西，而您的isThisPropertyTrue从true切换为false，那么您会注意到console.log在卸载钩中。该方法{ this.state.isModalOpen ? <Modal /> : null }具有更好的性能，因为模态是根据请求呈现的。

React组件安装中更高效的性能表现方式

2 个答案: