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