评估企业网站建设,公司宣传手册内容模板,做网站需要的法律知识,网站图片优化工具React学习[一] 1 UI描述1.1 组件的创建与使用1.1.1 创建组件1.1.2 使用组件 1.2 组件的导入与导出1.2.1 根组件文件1.2.2 导出和导入一个组件1.2.3 从同一文件中导出和导入多个组件 1.3 使用JSX书写标签语言1.3.1 JSX:将标签引入JavaScript1.3.2 将HTML转换为JSX1.3.3 高级提示… React学习[一] 1 UI描述1.1 组件的创建与使用1.1.1 创建组件1.1.2 使用组件 1.2 组件的导入与导出1.2.1 根组件文件1.2.2 导出和导入一个组件1.2.3 从同一文件中导出和导入多个组件 1.3 使用JSX书写标签语言1.3.1 JSX:将标签引入JavaScript1.3.2 将HTML转换为JSX1.3.3 高级提示使用JSX转化器 1.4 在JSX中通过大括号使用JavaScript1.4.1 使用引号传递字符串1.4.2 使用双大括号JSX中的CSS和对象 1.5 将Props传递给组件1.5.1 将Props传递给组件1.5.2 给props指定一个默认值1.5.3 使用JSX展开语法传递props1.5.4 将JSX作为子组件传递1.5.5 props如何随时间变化 1.6 条件渲染1.6.1 条件返回JSX1.6.2 选择性地返回null选择性地包含JSX选择性地将JSX赋值给变量 1.7 渲染列表1.7.1 从数组中渲染数据1.7.2 对数组项进行过滤1.7.3 用key保持列表项的顺序 1.8 保持组件为纯函数1.8.1 局部mutation 1 UI描述
1.1 组件的创建与使用
组件是用户界面UI的构成要素。创建一个组件可以分为三步
1.1.1 创建组件 导出组件 export default 定义函数 function name(props) {} 定义组件的时候组件的名称必须以大写字母开头否则将无法运行。 HTML标签是小写的 添加标签 JSX(使用JavaScript) TSX(使用TypeScript) 注意如果标签和return 不在同一行则必须把它包裹在一堆括号中 没有括号包裹的话任何在return 下一行的代码都将被忽略
1.1.2 使用组件
在父组件中引入即可但是不要在组件中定义组件。应该在顶层定义组件。当子组件需要使用父组件的数据时需要 通过 props 的形式进行传递而不是嵌套定义。
1.2 组件的导入与导出
1.2.1 根组件文件
相当于把所有模块化组件做一个集成的文件。 1.2.2 导出和导入一个组件
对组件进行拆分可以分为三步
创建一个新的JS文件来存放该组件导出该文件中的函数组件可以使用默认导出或者具名导出在需要使用该组件的文件中导入可以根据相应的导出的方式使用默认导入或者具名导入
语法导出语句导入语句默认export default function Hello() {}import Hello from ./Hello.js;具名export function Hello() {}import { Hello } from ./Hello.js;
注意在引入一些文件时虽然没有添加.js文件名后缀比如./Hello.js还是./Hello在React里都能正常使用只是前者更符合原生ES模块
一个文件里有且仅有一个默认导出但是可以有任意多个具名导出。组件的导出方式决定了其导入方式。通常文件中仅包含一个组件时会选择默认导出而当文件中包含多个组件或某个值需要导出时则会选择具名导出。 1.2.3 从同一文件中导出和导入多个组件
同一文件中有且仅有一个默认导出但可以有多个具名导出
1.3 使用JSX书写标签语言
JSX是JavaScript语法扩展可以在JavaScript文件中写类似HTML的标签。(虚拟DOM)
1.3.1 JSX:将标签引入JavaScript
**在 React 中渲染逻辑和标签共同存在于同一个地方——组件。**将一个按钮的渲染逻辑和标签放在一起可以确保它们在每次编辑时都能保持互相同步。每个 React 组件都是一个 JavaScript 函数它会返回一些标签React 会将这些标签渲染到浏览器上。
JSX 和 React 是相互独立的东西。JSX 是一种语法扩展而 React 则是一个 JavaScript 的库。 1.3.2 将HTML转换为JSX
JSX规则 只能返回一个根元素 如果想要在一个组件中包含多个元素需要用一个父标签把它们包裹起来。 如果不想在标签中增加一个额外的 div可以用 和 / 元素来代替 这个空标签被称作 Fragment. React Fragment 允许将子元素分组而不会在 HTML 结构中添加额外节点。 为什么多个 JSX 标签需要被一个父元素包裹 答JSX 虽然看起来很像 HTML但在底层其实被转化为了 JavaScript 对象你不能在一个函数中返回多个对象除非用一个数组把他们包装起来。这就是为什么多个 JSX 标签必须要用一个父元素或者 Fragment 来包裹。 标签必须闭合 使用驼峰式命名法给大部分属性命名 由于历史原因aria-* 和 data-* 属性是以带 - 符号的 HTML 格式书写的。
1.3.3 高级提示使用JSX转化器
将HTML转换为JSX:https://transform.tools/html-to-jsx 1.4 在JSX中通过大括号使用JavaScript
1.4.1 使用引号传递字符串
想把一个字符串属性传递给 JSX 时把它放到单引号或双引号中
若想要动态指定可以使用{}
大括号内的任何JavaScript表达式都可以正常运行。
在 JSX 中只能在以下两种场景中使用大括号
用作 JSX 标签内的文本h1{name}s To Do List/h1 是有效的但是 {tag}Gregorio Y. Zaras To Do List/{tag} 无效。用作紧跟在 符号后的 属性src{avatar} 会读取 avatar 变量但是 src{avatar} 只会传一个字符串 {avatar}。
1.4.2 使用双大括号JSX中的CSS和对象
对象也用大括号表示例如 { name: 无敌是多么寂寞, inventions: 5 }。因此为了能在 JSX 中传递你必须用另一对额外的大括号包裹对象person{{ name: 无敌是多么寂寞, inventions: 5 }}。
import { getImageUrl } from ./utils.jsconst person {name: Gregorio Y. Zara,imageId: 7vQD0fP,imageSize: s,theme: {backgroundColor: black,color: pink}
};export default function TodoList() {return (div style{person.theme}h1{person.name}s Todos/h1imgclassNameavatarsrc{getImageUrl(person)}alt{person.name}/ulliImprove the videophone/liliPrepare aeronautics lectures/liliWork on the alcohol-fuelled engine/li/ul/div);
}
// 将获取图片的语句封装成一个函数
export function getImageUrl(person) {return (https://i.imgur.com/ person.imageId person.imageSize .jpg);
} 1.5 将Props传递给组件
React 组件使用 props 来互相通信。每个父组件都可以提供 props 给它的子组件从而将一些信息传递给它。Props 可能会让你想起 HTML 属性但你可以通过它们传递任何 JavaScript 值包括对象、数组和函数。
1.5.1 将Props传递给组件
父组件可以分两步将props传递给子组件 首先在父组件中将props传递给引用的子组件使得子组件可以读取这些props 在子组件中读取props这些 props 在 ({ 和 }) 之间并由逗号分隔。比如 function Avatar({ person, size }) {// 在这里 person 和 size 是可被子组件访问的
}props 正是 组件的唯一参数 React 组件函数接受一个参数一个 props 对象。比如
function Avatar(props) {let person props.person;let size props.size;// ...
}1.5.2 给props指定一个默认值
如果想在没有指定值的情况下给 prop 一个默认值可以通过在参数后面写 默认值来进行解构,比如
function Avatar({ person, size 100 }) {// ...
}但是如果传递了 size{null} 或 size{0}默认值将 不 被使用。
1.5.3 使用JSX展开语法传递props
先看两段代码感受一下
// 第一段
function Profile({ person, size, isSepia, thickBorder }) {return (div classNamecardAvatarperson{person}size{size}isSepia{isSepia}thickBorder{thickBorder}//div);
}// 第二段
function Profile(props) {return (div classNamecardAvatar {...props} //div);
}是不是觉得第二段用了展开语法的代码更简洁但是这通常表示你应该拆分组件了并需要将子组件作为JSX传递。
1.5.4 将JSX作为子组件传递
当将内容嵌套在 JSX 标签中时父组件将在名为 children 的 prop 中接收到该内容。
function Card({ children }) {return (div classNamecard{children}/div);
}export default function Profile() {return (Cardh1哎哟不错哦/h1/Card);
}可以将带有 children prop 的组件看作有一个“洞”可以由其父组件使用任意 JSX 来“填充”。
1.5.5 props如何随时间变化
**一个组件可能会随着时间的推移收到不同的 props。**但是props的改变是父组件通过传递不同的props——新对象来改变的。旧props会被丢弃然后被JS引擎回收它们占用的内存.当需要交互性时可以设置 state。
1.6 条件渲染
1.6.1 条件返回JSX
可以用if else、、? :语句来写分支逻辑
1.6.2 选择性地返回null
例如
function Item({ name, isPacked }) {if (isPacked) {return null;}return li classNameitem{name}/li;
}export default function PackingList() {return (sectionh1Sally Ride 的行李清单/h1ulItem isPacked{true} name宇航服 /Item isPacked{true} name带金箔的头盔 /Item isPacked{false} nameTam 的照片 //ul/section);
}实际上在组件里返回 null 并不常见。通常情况下可以在父组件里选择是否要渲染该组件。
选择性地包含JSX
可以使用三目运算符? :。如果代码有小段重复可以考虑用这个进行简单的条件判断。比如
// 修改前
if (isPacked) {return li classNameitem{name} ✔/li;
}
return li classNameitem{name}/li;// 修改后
return (li classNameitem{isPacked ? name ✔ : name}/li
);或者用运算符 return (li classNameitem{name} {isPacked ✔}/li);与表达式的判定若为falseReact会将其视为控制不会对其进行任何渲染。但切勿把数字放在左侧因为如果左侧是0,React会渲染0。
选择性地将JSX赋值给变量
结合if语句和let赋值变量可以更加灵活。因为可以使用 let 进行重复赋值所以一开始可以将想展示的这里指的是物品的名字作为默认值赋予给该变量。
function Item({ name, isPacked }) {let itemContent name;if (isPacked) {itemContent name ✔;}return (li classNameitem{itemContent}/li);
}export default function PackingList() {return (sectionh1Sally Ride 的行李清单/h1ulItem isPacked{true} name宇航服 /Item isPacked{true} name带金箔的头盔 /Item isPacked{false} nameTam 的照片 //ul/section);
}
1.7 渲染列表
操作数组中的数据将一个数据集渲染成多个相似的组件。
1.7.1 从数组中渲染数据
利用map()函数
const people [凯瑟琳·约翰逊: 数学家,马里奥·莫利纳: 化学家,穆罕默德·阿卜杜勒·萨拉姆: 物理学家,珀西·莱温·朱利亚: 化学家,苏布拉马尼扬·钱德拉塞卡: 天体物理学家,
];export default function List() {const listItems people.map(person li{person}/li);return ul{listItems}/ul;
}
注意这里还未给每个数据加上唯一标识符key
1.7.2 对数组项进行过滤
先利用filter()函数进行筛选再利用map()函数进行渲染
import { people } from ./data.js;
import { getImageUrl } from ./utils.js;export default function List() {const chemists people.filter(person person.profession 化学家);const listItems chemists.map(person liimgsrc{getImageUrl(person)}alt{person.name}/pb{person.name}:/b{ person.profession }因{person.accomplishment}而闻名世界/p/li);return ul{listItems}/ul;
}
注意这里还未给每个数据加上唯一标识符key.
箭头函数会隐式地返回位于 之后的表达式所以可以省略 return 语句。不过如果 后面跟了一对花括号 { 那必须使用 return 来指定返回值 箭头函数 { 后面的部分被称为 “块函数体”块函数体支持多行代码的写法但要用 return 语句才能指定返回值。 1.7.3 用key保持列表项的顺序
必须给数组中的每一项都指定一个 key——它可以是字符串或数字的形式只要能唯一标识出各个数组项就行。 直接放在 map() 方法里的 JSX 元素一般都需要指定 key 值 一个合适的 key 可以帮助 React 推断发生了什么从而得以正确地更新 DOM 树。
如果想让每个列表项都输出多个 DOM 节点而非一个的话只能要么把生成的节点用一个 div 标签包裹起来要么使用长一点但更明确的 Fragment 写法
import { Fragment } from react;// ...const listItems people.map(person Fragment key{person.id}h1{person.name}/h1p{person.bio}/p/Fragment
);这里的 Fragment 标签本身并不会出现在 DOM 上这串代码最终会转换成 h1、p、h1、p…… 的列表。
key值的设定:
来自数据库的数据可以直接使用数据表中的主键本地产生数据可以使用一个自增计数器或者一个类似 uuid 的库来生成 key。
key需要满足的条件
key 值在兄弟节点之间必须是唯一的。 不过不要求全局唯一在不同的数组中可以使用相同的 key。key 值不能改变。不要在运行过程中动态地产生 key。
React之所以需要key值是因为即使元素的位置在渲染的过程中发生了改变它提供的 key 值也能让 React 在整个生命周期中一直认得它。 注意组件不会把 key 当作 props 的一部分。Key 的存在只对 React 本身起到提示作用。如果你的组件需要一个 ID那么请把它作为一个单独的 prop 传给组件 Profile key{id} userId{id} /。 挑战题
请根据给你的数组生成菜谱列表其中每个菜谱都用 h2 来显示它的名称并在 ul 里列出它所需的原料。
data.js
export const recipes [{id: greek-salad,name: 希腊沙拉,ingredients: [西红柿, 黄瓜, 洋葱, 油橄榄, 羊奶酪],},{id: hawaiian-pizza,name: 夏威夷披萨,ingredients: [披萨饼皮, 披萨酱, 马苏里拉奶酪, 火腿, 菠萝],},{id: hummus,name: 鹰嘴豆泥,ingredients: [鹰嘴豆, 橄榄油, 蒜瓣, 柠檬, 芝麻酱],},
];
App.js
import { recipes } from ./data.js;function RecipeShow({ recipesList }) {return (div{recipesList.map(recipe div key{recipe.id}h2{recipe.name}/h2ul{recipe.ingredients.map(ingredent li key{ingredent}{ingredent}/li)} /ul/div)}/div)
}function Card({children}) {return (div{ children }/div)
}export default function RecipeList() {return (Carddivh1菜谱/h1RecipeShow recipesList{recipes} //div/Card);
}
1.8 保持组件为纯函数
一个React组件不管什么时候给了它一个相同的输入那么它的输出就是相同的就像数学公式一样。比如y2x无论何时传x3其输出总是y6。
React 无法保证组件函数以任何特定的顺序执行因此无法通过设置变量在它们之间进行通信。所有的交流都必须通过 props 进行。
1.8.1 局部mutation
我们将组件改变了预先存在的变量的值的现象称为突变(mutation)。局部突变的意思就是在渲染时更改刚刚创建的变量和对象属于内部突变不会影响函数外部的变量或函数。
但是事件处理程序无需是纯函数包括更新屏幕、启动动画、更改数据等。 React为何侧重于纯函数 复用性适应不同环境可以缓存纯函数的输出来跳过渲染提高性能在渲染深层组件树的过程中如果数据发生了变化可以随时安全停止计算节省时间。
