React 文档拾遗

组件名称必须大写开头

组件是常规的 JS 函数，但必须大写开头，否则无法运行。

组件 return 语句不在同一行必须添加小括号

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />

// or
return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
)

组件不能嵌套定义

组件可以渲染别的组件，但是不能在组件中定义组件，如果要使用父组件的数据，通过 props 传递即可，而不是嵌套定义。

JSX 只能返回一个根元素

因为 JSX 会被转换 JS 对象，但函数不能返回多个对象（除非包到数组里面），所以 JSX 也只能返回一个根元素。

如果你不想增加一个额外的 <div> 标签作为根元素，可以使用 <></> 空标签 Fragment 代替，它不会在 HTML 结构中添加额外节点。

JSX 标签必须闭合

自闭合标签必须有 /，如 <img> 必须写成 <img />。

有开始标签 <div> 就必须有闭合标签 </div>。

一个好用的网站

官方推荐了一个网站可以将 HTML 快速转换为 JSX：

transform.tools/html-to-jsx

这个网站还有 CSS 转换 Tailwind，好东西。

props 不可更改

如果子组件的 props 需要改变，只能向父组件"请求"传递一个新的 props 对象，旧 props 将会被丢弃最后被 JS 引擎回收。

需要交互性时可以设置 state。

条件渲染切勿将数字放在 && 左侧

JS 会自动把左侧的值转成布尔类型以判断条件是否成立，如果左侧是数字 0，为"假"值，此时 React 会渲染 0 而不是不进行渲染。

一个常见错误就是 itemCount && <p>items</p>，本意是 itemCount 为 0 时不进行渲染，实际会渲染成一个 0，可以用 itemCount > 0 && 更正。

渲染数组列表一定要给上 key 值

React 会通过 key 值将组件和数组里的元素对应起来，这在数组项进行排序、插入或者删除等操作时非常重要。React 通过 key 值可以推断发生了什么，从而正确的更新 DOM 树。

尽量不要把数组的索引当做 key 值使用，实际上没有显式指定 key 值时，React 就是这么做的。如果你的数组元素不需要更新可以例外。

key 值在兄弟节点中必须唯一，但不要求全局唯一。

key 值不能改变，所以不要这样 key={Math.random()} 在渲染时动态地生成 key。

另外，注意直接放在 map() 方法中的 JSX 元素一般都要指定 key 值，数组列表并不单单指 <li> 这种元素。

如果想要列表渲染的每一个组件都输出多个 DOM 节点，可以用 <Fragment key={id}></Fragment> 包裹。

我一般直接用内置函数 crypto.randomUUID() 生成

组件函数为什么会执行两次？组件函数为什么会执行两次？

组件渲染时会读取三种输入：props，state 和 context，应该始终将它们视作只读的。

如果需要根据用户输入来改变内容，应该通过 setState，而不是直接写入变量。

在组件渲染时，永远不应该改变预先存在的变量和对象（不纯）。

新创建的项目默认在"严格模式"下开发，它将会调用每个组件函数两次，来帮助找到违反以上规则的组件。

在渲染时可以更改"刚刚"创建的变量和对象

上文说到，组件不能改变预先存在的变量和对象，也就是组件函数作用域外的变量或是函数调用前创建的对象，这种改变的行为也被称为突变（mutation）。

但是你完全可以在作用域内做一些更改变量或对象的行为，比如：

function TeaGathering() {
  let cups = []
  for (let i = 1; i <= 12; i++) {
    cups.push(<Cup key={i} guest={i} />)
  }
  return cups
}

这被称为局部突变，就像组件内部的小秘密一样。

事件处理函数

• 组件内部定义
• handle 开头，后面是事件名称
• 可以内联定义（匿名函数）
• 可以当做 props 传递，按惯例以 on 开头，后面是事件名称
• 所有事件都会传播，