加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-15 06:27:16 所属栏目:百科 来源:网络整理
导读:目录 01 前言 02 开发环境搭建 03 脚手架创建项目 一切都是组件 04 基础特性 JSX、Props、State、Lifecycle、Event、Style 05 组件渲染控制 06 容器组件、展示组件 07 前端路由 react-router 08 状态管理 react-redux 09 数据请求 fetch 10 属性类型检查 pro

目录

  • 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',...
]
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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读