React系列二：基础概念
组件
React 组件是常规的 JavaScript 函数，但 组件的名称必须以大写字母开头，否则它们将无法运行！
在看到标签时，小写为html标签，大写为自己的组件。
返回语句可以全写在一行上，但是，如果你的标签和 return 关键字不在同一行，则必须把它包裹在一对括号中。没有括号包裹的话，任何在 return 下一行的代码都 将被忽略！不过也要注意：()是(),<></>是<></>，括号只是用于包裹return的内容，而<></>用来确保返回只有一个节点。两个要同时使用。这个空标签被称作 Fragment。React Fragment 允许你将子元素分组，而不会在 HTML 结构中添加额外节点。
为什么多个 JSX 标签需要被一个父元素包裹？
JSX 虽然看起来很像 HTML，但在底层其实被转化为了 JavaScript 对象，你不能在一个函数中返回多个对象，除非用一个数组把他们包装起来。这就是为什么多个 JSX 标签必须要用一个父元素或者 Fragment 来包裹。
组件可以渲染其他组件，但是 请不要嵌套他们的定义，也就是说已经创建了一个组件，不要在组件的内部再次使用function定义另一个组件，否则会非常慢，并且会导致 bug 产生。
请记得给你的组件和相应的文件命名一个有意义的名字。我们不建议创建未命名的组件，比如 export default () => {}，因为这样会使得调试变得异常困难。
JSX
JSX and React 是相互独立的 东西。但它们经常一起使用，但你 可以 单独使用它们中的任意一个，JSX 是一种语法扩展，而 React 则是一个 JavaScript 的库。
JSX 规则
- 只能返回一个根元素
- 所有标签必须闭合 使用驼峰式命名法给大部分属性命名（例如className）
使用 JSX 展开语法传递 props
有时候，一些组件将它们所有的 props 转发给子组件，可以这样写
function Profile(props) {
return (
<div className="card">
<Avatar {...props} />
</div>
);
}
类似vue的（注意与区分，props表示接收所有传入的参数，即defineProps的内容，而$attrs接收并传递组件上未被显式接收（即未通过 props 定义）的属性，经常用于组件封装、透传属性的场景。）
将 JSX 作为子组件传递
React的props不只是能够传递普通的参数，也能够传入组件：
function Card({ children }) {
return (
<div className="card">
{children}
</div>
);
}
这里的{children}类似vue中的插槽slot，使用的方法和vue一样，将需要展示在Card中的组件放在标签中即可。
vue中可以使用一个匿名插槽和多个具名插槽，而React中也类似，一个匿名插槽是只children关键字，还需要塞其他组件的话可以使用props传递，例如
function Card({ children，header }) {
return (
<div className="card">
{header}
{children}
</div>
);
}
使用方式：
<Card header={<h1>这是header的内容</h1>}>
<h1>这是Children的内容</h1>
</Card>
和Vue一样，Props是不能随意改变的，需要请求父组件来改变。在React中，当一个组件需要改变它的 props（例如，响应用户交互或新数据）时，它不得不“请求”它的父组件传递 不同的 props —— 一个新对象！它的旧 props 将被丢弃，最终 JavaScript 引擎将回收它们占用的内存。
评论