时间戳

首页 > 解决方案 > 在 React 组件安装中提高性能的更高效方式

javascript - 在 React 组件安装中提高性能的更高效方式

问题描述

我Modals在 React 中做了很多。

我找到了两种制作方法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()当状态改变时它会调用。

我想知道哪一个是更好的表演方式或其他方式。

先感谢您。

标签： javascriptreactjs

解决方案

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

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

推荐阅读