🧩React学习笔记①｜描述UI

type
status
date
slug
summary
tags
category
icon
password

React核心

  • UI的描述
    • 组件的创建和嵌套
    • 条件渲染
    • props的流动（抽象升级为组件意识和设计能力）
  • 交互
    • 响应事件更新渲染界面
    • 状态管理
  • 数据流动

描述UI

组件函数

  • React组件是一段可以使用标签进行扩展的 JavaScript 函数。

组件的导入导出

  • 一个文件里有且仅有一个默认导出，但是可以有任意多个具名导出。
  • 组件的导出方式决定了其导入方式。
语法
导出语句
导入语句
默认
export default function Button(){}
import Button from ‘./Button.js’
具名
export function Button(){}
import { Button } from ‘./Button.js’

JXS语法

  • JXS是组件函数返回用来描述标签的语法，和html标签类似，但因为它实际上是一个javascript对象，所以在写法上也会有一些要求:
    • 多个元素需要用一个父标签包裹，通常用<div>或空标签Fragment<>;
    • 标签必须闭合
    • 驼峰命名属性名，如className
  • 在JXS描述标签时，用‘‘或””包裹字符串，也可以用{}包裹非字符串的内容和变量（也可以是javascript对象）

Props在组件中的传递

  • props可以理解成组件函数的参数，父组件给props赋值，子组件接收并读取props
  • 在读取props时也可以指定默认值，当父组件没传值的时候使用默认值
  • props只读不能改变，若要交互性用state
  • 解构语法可以选用其中几个props读取，展开语法则是为避免接收所有props ，在下面的例子中父组件将 user 对象的每个键值对映射为 props 交给子组件渲染并返回，相当于 <Profile name="Alice" age={25} occupation="Developer" />。ps：如果一直在用这种方式说明该拆分组件将其作为JSX传递进行完成组件的嵌套。
  • 使用 children 传递嵌套的 JSX，适用于创建通用的 UI 元素，比如按钮、卡片、列表等

条件渲染

  • if最常规，?:和&& 比较快捷。
  • 在 JSX 中，{cond ? <A /> : <B />} 表示 “当 cond 为真值时, 渲染 <A />，否则 <B />”。
  • 在 JSX 中，{cond && <A />} 表示 “当 cond 为真值时, 渲染 <A />，否则不进行渲染”。

列表渲染（循环）

  • map()方法从数组生成组件
    • 在组件函数中使用map方法遍历生成一个JSX节点数组（<li>包裹），在返回中用<ul>包裹数组渲染出列表。
  • filter()方法筛选需要渲染的组件
  • 为集合中的每个组件设置一个key值，帮助react识别他们的唯一性
Loading...

© Sandou 2021-2025