🧩React学习笔记①｜描述UI

React核心

• UI的描述
• 组件的创建和嵌套
• 条件渲染
• props的流动（抽象升级为组件意识和设计能力）

• 交互
• 响应事件更新渲染界面
• 状态管理

• 数据流动

描述UI

组件函数

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

组件的导入导出

• 一个文件里有且仅有一个默认导出，但是可以有任意多个具名导出。

• 组件的导出方式决定了其导入方式。

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识别他们的唯一性