JSX 条件渲染及列表 - 文章教程

JSX 条件渲染及列表

发布于 2021-08-29 字数 3642 浏览 965 评论 0

条件渲染

参考

// if条件
const renderBtn = loading => {
  if(loading) {
        return <LoadingButton />
    }
  
    return <Button />
}

// 逻辑操作符
render() {
  return (
    <div>
        { loading ? <LoadingButton /> : <Button /> }
      </div>
    );
}

列表渲染

参考

// js
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);
console.log(doubled);

// jsx
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map(number =>
  <li>{number}</li>
);

// render
ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

// output
<ul>
	<li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

key

列表渲染需为每一个子项提供特殊 key 属性,表明该子项是唯一的,便于react判断子项是否有变化。

key 的值应该是稳定的、相对兄弟节点唯一的。

参考:为什么 key 是必要的

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>
    {number}
  </li>
);
                              
// 用属性id值作Key
const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

// 如果该列表不会排序的话,可用index作key
const todoItems = todos.map((todo, index) =>
  // Only do this if items have no stable IDs
  <li key={index}>
    {todo.text}
  </li>
);

受控组件与非受控组件

  • 受控组件:form 表单的数据交由 react 处理。可以与其他组件共用表单数据以及将数据交由 store 统一状态管理。
  • 非受控组件:form 表单的数据交由 dom 自己处理。传统的操作真实 dom 获取数据,类似 jQuery

大多数情况下,推荐使用受控组件

比较:

JSX 条件渲染及列表

受控组件: LearnReact/lesson-3/lesson/src/form/controlled.js
多个受控组件: LearnReact/lesson-3/lesson/src/form/multiControlled.js
非受控组件: LearnReact/lesson-3/lesson/src/form/uncontrolled.js

状态提升

很多时候,你需要多个组件共用同一个数据,这个时候,推荐将这个数据 state 提升到一个公共的祖先组件中。

代码: LearnReact/lesson-3/lesson/src/LiftStateUp

React 理念

组件遵守单一职责原则:一个组件只做一件事

单向数据流

参考

一个可搜索的 table 组件示例

JSX 条件渲染及列表

  1. 划分组件层级
  2. 构建静态版本
  3. 确定哪些是 state 数据
  4. 确定你的 state 应该放在哪个组件中
  5. 增加反向数据流

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

上一篇:

下一篇:

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2512 文章
30 评论
82787 人气
更多

推荐作者

qianbiandeboy

文章 0 评论 0

少女净妖师

文章 2 评论 0

zangqw

文章 0 评论 0

qq_7HKsl

文章 0 评论 0

伪装你

文章 1 评论 0