React - 组件销毁 & 组件替换

[jtwang7]

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 的组件