React 官方文档学习笔记

Address：React 中文文档（Beta 版） | React 中文文档 | React 中文网 (bootcss.com)；快速入门 – React 中文文档 (docschina.org)

Date：2024-07-18

注：该文章中与 Vue 通用的概念已被略过，仅作为学习 React 新概念的笔记总结。

1. 快速入门

学习 React 的基本概念。

2. 描述 UI

学习如何创建、自定义以及根据条件显示 React 组件。

使用 JSX 书写标签语言

a. JSX 规则：

1. 只能返回一个根元素；

2. 标签必须闭合；

3. 使用驼峰式命名法给属性命名。

b. 使用转化器将 HTML 和 SVG 标签转化为 JSX。

---

在 JSX 中通过大括号使用 JavaScript

a. 使用引号传递字符串。

b. 使用大括号传递用作 JSX 标签内的文本和用作紧跟在 = 符号后的属性。

c. 使用 “双大括号”传递 JSX 中的 CSS 和对象。

---

将 Props 传递给组件

a. 向组件传递 props。

1. 将 props 传递给子组件：

   export default function Profile() { return (   <Avatar     person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}     size={100}   />);
   }

2. 在子组件中读取 props：

   function Avatar({ person, size }) { // 在这里 person 和 size 是可访问的
   }

b. 使用 JSX 展开语法传递 props：

function Profile(props) {   return (     <div className="card">       <Avatar {...props} />     </div>   );
}

c. 将 JSX 作为子组件传递：可以将带有 children prop 的组件看作有一个“洞”，可以由其父组件使用任意 JSX 来“填充”。

function Card({ children }) { return (   <div className="card">     {children}   </div>);
}
​
export default function Profile() { return (   <Card>     <Avatar       size={100}       person={{          name: 'Katsuko Saruhashi',         imageId: 'YfeOqp2'       }}     />   </Card>);
}

在学习这个部分的时候一直对组件间传递 children 的具体内容有所疑惑，后续结合官方文档中的多个具体代码样例和查阅相关资料，对这个概念有了深刻