React 快速上手 - 05 組件渲染控制

目錄

• 01 前言
• 02 開發環境搭建
• 03 腳手架建立項目 一切都是組件
• 04 基礎特性 JSX、Props、State、Lifecycle、Event、Style
• 05 組件渲染控制
• 06 容器組件、展現組件
• 07 前端路由 react-router
• 08 狀態管理 react-redux
• 09 數據請求 fetch
• 10 屬性類型檢查 prop-types

React 快速上手 - 05 組件渲染控制

本質上講，本章仍是說 JSX ，做爲一個組件關鍵是渲染，因此我做爲一個重點，單獨寫一章，方便你們理解上有個重點。

理論上來講，渲染分兩種方式 JSX React.createElement （我在本文最後會稍微點到下） ，如何靈活使用你們本身權衡，存在必有理由。

目標

掌握常見渲染控制

• 並列
• 條件判斷
• 三目運算
• 循環
• 嵌套循環
• 空組件
• ref引用

渲染控制

1. 並列

組件嵌套並行，這是很是常見的狀況，特別是容器組件，後面會細說

代碼

function UserView(props) {
  return <p>用戶 xxx 你好，歡迎回來！</p>
}
function GuestView(props) {
  return <p>遊客你好， 註冊 | 登錄。</p>
}

function RenderView() {
  return (
    <div>
      <UserView />
      <GuestView />
    </div>
  )
}

輸出

codepen

https://codepen.io/ducafecat/...

2. 條件判斷

代碼

// 顯示組件
function UserView(props) {
  return <p>用戶 xxx 你好，歡迎回來！</p>
}
function GuestView(props) {
  return <p>遊客你好， 註冊 | 登錄。</p>
}

// 條件判斷
function ConditionView(props) {
  return <div>{props.isLogin && <UserView />}</div>
}

// 容器
function RenderView() {
  return (
    <div>
      <ConditionView isLogin />
    </div>
  )
}

條件控制中間用 && 符號連接

你們能夠動手改下看看

<ConditionView isLogin={false} />

輸出

codepen

https://codepen.io/ducafecat/...

3. 三目運算

代碼

// 顯示組件
function UserView(props) {
  return <p>用戶 xxx 你好，歡迎回來！</p>
}
function GuestView(props) {
  return <p>遊客你好， 註冊 | 登錄。</p>
}

// 三目運算
function InlineIfElseView(props) {
  return <div>{props.isLogin === true ? <UserView /> : <GuestView />}</div>
}

// 容器
function RenderView() {
  return (
    <div>
      <InlineIfElseView isLogin={false} />
    </div>
  )
}

三目運算 在條件控制裏, 仍是很實用的

輸出

codepen

https://codepen.io/ducafecat/...

4. 循環

代碼

// 數據
let blogs = [
  {
    title: 'React v16.3.0: New lifecycles and context API',
    url: 'https://reactjs.org/blog/2018/03/29/react-v-16-3.html',
    by: 'Brian Vaughn'
  },
  ...
]

// 循環
function ListsView(props) {
  let datas = props.data
  return (
    <ol>
      {datas.map((item, index) => (
        <li key={index.toString()}>
          <a href={item.url} target="_blank">
            {item.title}
          </a>{' '}
          --- <small>by {item.by}</small>
        </li>
      ))}
    </ol>
  )
}

// 容器
function RenderView() {
  return (
    <div>
      <ListsView data={blogs} />
    </div>
  )
}

表達式用的 { ... } 符號包裹起來
表達式內部的 JSX 用 ( ... ) 包裹
表達式內部的 JSX 也要注意必須有頂級標籤
對於循環體內 必須有 key 屬性， map 內部惟一就行

輸出

codepen

https://codepen.io/ducafecat/...

5. 嵌套循環

代碼

// 數據
let blogs = [
  {
    title: 'React v16.3.0: New lifecycles and context API',
    url: 'https://reactjs.org/blog/2018/03/29/react-v-16-3.html',
    by: 'Brian Vaughn'
  },
  ...
]
let types = ['推薦', '熱門', '最新']

// 嵌套循環
function NestListsView(props) {
  let datas = props.data
  let types = props.types
  return (
    <ul>
      {types.map((item, index) => (
        <li key={index.toString()}>
          {item}
          <ol>
            {datas.map((item, index) => (
              <li key={index.toString()}>
                <a href={item.url} target="_blank">
                  {item.title}
                </a>{' '}
                --- <small>by {item.by}</small>
              </li>
            ))}
          </ol>
        </li>
      ))}
    </ul>
  )
}

// 容器
function RenderView() {
  return (
    <div>
      <NestListsView types={types} data={blogs} />
    </div>
  )
}

第二層在 JSX 中的循環須要用 { ... } 包裹
這裏的 key 只要同層惟一就行，不用全局惟一

輸出

codepen

https://codepen.io/ducafecat/...

雖然上面代碼能運行，一旦代碼複雜了，是不適合閱讀和維護的，咱們須要把 datas 的循環封裝成組件，代碼以下

代碼

function ListsView(props) {
  let datas = props.data
  return (
    <ol>
      {datas.map((item, index) => (
        <li key={index.toString()}>
          {item.title}
        </li>
      ))}
    </ol>
  )
}

function NestListsView(props) {
  let datas = props.data
  let types = props.types
  return (
    <ul>
      {types.map((item, index) => (
        <li key={index.toString()}>
          {item}
          <ol>
            <ListsView data={datas}>
          </ol>
        </li>
      ))}
    </ul>
  )
}

NestListsView 中嵌套 ListsView ，這樣看起來舒服多了吧

6. 空組件

代碼

// 空組件
function NullView(props) {
  let isNull = props.isNull
  if (isNull) {
    return null
  }
  return <div>組件123</div>
}

// 容器
function RenderView() {
  return (
    <div>
      <NullView isNull />
    </div>
  )
}

這個空組件的做用 就是用來阻止顯示，好比這裏 isNull = true 的狀況下，就沒有顯示的必要了

輸出

codepen

https://codepen.io/ducafecat/...

7. ref引用

代碼

// ref引用
class RefInputView extends Component {
  constructor(props) {
    super(props)
    this.inputRef = React.createRef()
  }
  render() {
    return <input type="text" ref={this.inputRef} />
  }
  componentDidMount() {
    this.inputRef.current.focus()
    this.inputRef.current.value = '123'
  }
}

// 容器
function RenderView() {
  return (
    <div>
      <RefInputView />
    </div>
  )
}

ref 提供了一種操做組件內部方法的接口, didMount 的時候獲取焦點和設置值

輸出

codepen

https://codepen.io/ducafecat/...

8. React.createElement 方式

咱們先看下函數定義

createElement函數有三個參數

參數	說明
type	html 標籤名稱, 默認 input
props	組件屬性
children	組件內容、子節點

代碼

// 代碼
function CreateElement(props) {
  let toWhat = props.toWhat
  let ele = React.createElement('div', null, `Hello ${toWhat}`)
  return ele
}

// 容器
function RenderView() {
  return (
    <div>
      <CreateElement toWhat="你好" />
    </div>
  )
}

輸出

codepen

https://codepen.io/ducafecat/...

代碼

• reactjs-example / 3-render.js

參考文

• Rendering Elements
• Conditional Rendering
• JSX In Depth
• Refs and the DOM
• React Without JSX