JSX

React 组件是常规的 JavaScript 函数，但 组件的名称必须以大写字母开头

组件可以渲染其他组件，但是 请不要嵌套他们的定义

export default function Gallery() {
  // 🔴 永远不要在组件中定义组件
  function Profile() {
    // ...
  }
  // ...
}

当子组件需要使用父组件的数据时，你需要 通过 props 的形式进行传递，而不是嵌套定义

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

Untitled

语法 导出语句 导入语句
默认 export default function Button() {} import Button from './Button.js';
具名 export function Button() {} import { Button } from './Button.js';

JSX and React 是相互独立的 东西。但它们经常一起使用，但你 可以 单独使用它们中的任意一个，JSX 是一种语法扩展，而 React 则是一个 JavaScript 的库。

不要尝试“更改 props”。 当你需要响应用户输入（例如更改所选颜色）时，你可以“设置 state”，你可以在 State: 一个组件的内存 中继续了解。

你会遇到的另一个常见的快捷表达式是 [JavaScript 逻辑与（&&）运算符](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The logical AND ( %26%26 ) operator,it returns a Boolean value.)。在 React 组件里，通常用在当条件成立时，你想渲染一些 JSX，或者不做任何渲染。使用 &&，你也可以实现仅当 isPacked 为 true 时，渲染勾选符号。

return (
  <li className="item">
    {name} {isPacked && '✔'}
  </li>
);

你可以认为，“当 isPacked 为真值时，则（&&）渲染勾选符号，否则，不渲染。”

在 React 中所有事件都会传播(这种传播，是子向父的传播)，除了 onScroll，它仅适用于你附加到的 JSX 标签

state

当有多个state的时，react在渲染的时候，是如何对应上每一个state的？

在同一组件的每次渲染中，Hooks 都依托于一个稳定的调用顺序

Hooks ——以 use 开头的函数——只能在组件或自定义 Hook 的最顶层调用。 你不能在条件语句、循环语句或其他嵌套函数内调用 Hook。Hook 是函数，但将它们视为关于组件需求的无条件声明会很有帮助。在组件顶部 “use” React 特性，类似于在文件顶部“导入”模块。

如何理解state如同一张快照

设置 state 只会为下一次渲染变更 state 的值