jtwang7 / React-Note

React 学习笔记
8 stars 2 forks source link

React - 组件销毁 & 组件替换 #23

Open jtwang7 opened 3 years ago

jtwang7 commented 3 years ago

React - 组件销毁 & 组件替换

前言

在 html 文档中,我们通常用 html 标签编写的是静态页面,页面结构和样式从代码编写那一刻起就是固定不变的,浏览器会根据这个文档解析出相应的 dom 结构并渲染到屏幕上。 而在 React 组件中,JSX 语法能够让我们选择以"表达式/函数/..."等等的形式动态选择渲染 html 标签。 我们可以通过简单的例子来体会一下 JSX 带给前端页面编写的改变:

静态

<div className="exhibition-container" ref={ref}>
  <div className="half-right"></div>
  <div className="inner-content"></div>
</div>

JSX

<div className="exhibition-container" ref={ref}>
  {isShow ? <div className="half-right"></div> : null}
  <div className="inner-content">/div>
</div>

静态页面如果想要选择性的展示某个 html 标签,则需要操作相应的 dom 元素,也就是搭配 js 实现; 而 React 提供的 JSX 语法则完美实现了在 html 中使用 js,大大简化了代码编写的复杂程度。

组件销毁

若你需要主动销毁一个组件(元素),而不是等待重渲染或者页面切换时由程序自动销毁,你可以将该组件(元素)替换为 null:

<div className="exhibition-container" ref={ref}>
  {isShow ? <div className="half-right"></div> : null}
  <div className="inner-content">/div>
</div>

null 在 JSX 中可用来表示空组件(元素)

组件替换

若你需要将一个组件替换为另一个组件,方法如下:

<div className="exhibition-container" ref={ref}>
  {isSwitch ? <div id="1"></div> : <div id="2"></div>}
  <div className="inner-content">/div>
</div>

isSwitch 为 true 时展示 id 为 1 的组件,反之则展示 id 为 2 的组件