React入门学习一

JSX规则

1. 一个组件中只能返回一个根元素，多个元素时可以使用空标签<></>或者<div></div>标签包裹组件中的所有元素，空标签也被叫做Fragment，使用Fragment不会再HTML结构中添加额外节点；
2. 标签必须闭合，可以选择自闭合，如<img />;
3. 使用驼峰式命名法给属性命名；

---

对于已有的HTML代码可以使用转换器进行转换：https://zh-hans.react.dev/learn/writing-markup-with-jsx

---

标题JSX的大括号

1. JSX 引号内的值会作为字符串传递给属性。
2. 大括号让你可以将 JavaScript 的逻辑和变量带入到标签中。
3. 它们会在 JSX 标签中的内容区域或紧随属性的 = 后起作用。
4. {{ 和 }} 并不是什么特殊的语法：它只是包在 JSX 大括号内的 JavaScript 对象。
5. 如果在js中需要使用对象可以使用{{}}，ps内联style属性需要注意使用驼峰命名法，例如，HTML<ul style=“background-color: black”> 在你的组件里应该写成 <ul style={{ backgroundColor: ‘black’ }}>。

通过Props在父子组件中传递数据

1. 要传递 props，请将它们添加到 JSX，就像使用 HTML 属性一样。
2. 要读取 props，请使用 function Avatar({ person, size }) 解构语法。
3. 可以指定一个默认值，如 size = 100，用于缺少值或值为 undefined 的 props 。
4. 可以使用 <Avatar {…props} /> JSX 展开语法转发所有props，但不要过度使用它！
5. 像 这样的嵌套 JSX，将被视为 Card 组件的children prop。
6. Props 是只读的时间快照：每次渲染都会收到新版本的 props。
7. 不能改变props。需要交互性时，可以设置 state。

条件渲染

React中可以通过&& 或者 if语句 或者三木运算符 ?:来进行条件渲染

列表渲染

通过js的map方法生成相似组件，filter进行过滤，类似Vue 的v-for，对于集合中的每个组件需要设置一个不变的key值

组件纯粹

一个组件只负责自己的任务，不更改外部的对象或变量，输入相同则输出相同，渲染顺序不影响组件