react中并沒有直接的想模板引擎那樣的命令可以直接控制元素展示
但是 我們了解了 v-if和v-show之后 還是大有文章的

我們在 項目的 src下創建 components 文件夾 創建dom.jsx
編寫代碼如下

import React from "react"
export default class dom extends React.Component {

    componentWillUnmount(){
      console.log("組件銷毀");
    }
    
    render(){
      return (
        <div>
          子組件在此
        </div>
      )
    }
}

這里 我們定義了 componentWillUnmount 因為 我們知道 v-if 是會直接將元素從dom樹上干掉的
那么 他的componentWillUnmount 將組件移除的生命周期自然就會執行
我們在src下的 App組件編寫代碼如下

import React from "react"
import Dom from "./components/dom"
export default class App extends React.Component {
    constructor(props){
      super(props);
      this.state = {
        chas: true,
        show: true
      }
    }
    render(){
      return (
        <div>
          <button onClick={ ()=> { this.setState({show: !this.state.show }) } }>更改show</button>
          <div style = { {display: this.state.show?"":"none" }}>
              show元素
          </div>
          <button onClick={ ()=> { this.setState({chas: !this.state.chas }) } }>更改chas</button>
          {
            this.state.chas?<Dom/>:null
          }
        </div>
      )
    }
}

v-show上面也寫了 只是借助了 css隱藏 那么 我們直接控制它style中的display就好了
然后 v-if 我們直接用三元運算符實現
如果條件不成立 直接給個 null
我們運行

我們先點 更改show
試一下 v-show 模仿的功能

我們的元素 就被 css隱藏了

然后 我們點擊更改chas

可以看到 我們之前監聽的 componentWillUnmount 確實是執行了 然后我們看dom樹
這個元素就確實是被干掉了 dom樹已經找不到了