Chapter

你的第一个组件

React 中最小的单元是组件

组件的导入导出

• 组件的导出分成默认导出和命名导出,对应的组件导入和如何导出相关.
• 模块化设计: es module(mjs) 和 cjs

JSX

Each React component is a JS function that may contain some markup. 区分JSX是HTML-like markup,使得逻辑和内容可以放置在同一个地方.
JSX Rule

• 返回一个根元素
• 闭合所有的 Tag
• camelCase 99% 的属性

curly braces

JSX中的{} 存在两种使用方式: 包裹JSX, 用在 = 后. {} 可以包裹JS表达式

Props

props 在react中作为只读属性, props可以让我们将父子组件独立思考.
props 的默认值 size=10 会被使用, 当 size={undefined}的时候

条件渲染

• 我们可以使用 if...else, &&,和 ? : 进行条件渲染. 注意不要将数字0放在&&左侧
  -不要在&&左侧放置0. 左侧是会自动转化成boolean,但是React很乐意渲染0而不是nothing.

渲染列表

key

保持组件纯粹

UI 树

React 如何看待组件结构
渲染树的作用是什么
模块依赖树的作用是什么
render Tree Vs. dependency tree

• notable differences

1. children props. 接收 JSX作为 children props, 因此它将 CopyRight作为子组件斤葱渲染,但是不会导入该模块.
2. 依赖树可以依赖非组件模块
3. https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview
   依赖树对于确定运行react应用程序所需要的模块非常有用.构建步骤,将捆绑所有必要的JS以供客户端使用.负责此操作的工具称为bundler (捆绑器)并且捆绑器使用依赖树来确定需要哪些模块