温故知新 -- react 官方文档总结1
温故知新 – react 官方文档总结1
最近又重温复习了一遍 react 文档，收获多多！！！
温故知新，确实 书读百遍，其义自现
文章目录
- 温故知新 -- react 官方文档总结1
- 解决横切关注点问题
- JSX
-
- JSX 防止注入攻击
- JSX 表示对象
- 指定 React 元素类型
-
- React 必须在作用域内
- 用户定义的组件必须以大写字母开头
- 在运行时选择类型
- JSX 中的 Props
-
- Props 默认值为 “True”
- 属性展开
- JSX 中的子元素
-
- 布尔类型、Null 以及 Undefined 将会忽略
- 元素
-
- 更新已渲染的元素
- 组件 & Props
-
- Props 的只读性
- State & 生命周期
-
- 正确地使用 State
-
- 不要直接修改 State
- State 的更新可能是异步的
- State 的更新会被合并
- 数据是向下流动的
- 事件处理
-
- 向事件处理程序传递参数
- 条件渲染
- 列表 & Key
-
- key
-
- 用 key 提取组件
- key 值在兄弟节点之间必须唯一
- 表单
-
- 受控组件
- 非受控组件
-
- 默认值
- 状态提升
- 组合 vs 继承
-
- props.children
- React 哲学
-
- 第一步：将设计好的 UI 划分为组件层级
- 第二步：用 React 创建一个静态版本
- 第三步：确定 UI state 的最小（且完整）表示
- 第四步：确定 state 放置的位置
- 第五步：添加反向数据流
- 无障碍辅助功能
-
-
- 透传ref的方式
-
- 代码分割
-
- 打包
- `import()`
- `React.lazy`
-
- 避免兜底
- 异常捕获边界（Error boundaries）
- 基于路由的代码分割
- 命名导出（Named Exports）
- Context
-
- 应用场景
- 基本语法
- 优点
- 缺点
- API
-
- `React.createContext`
- `Context.Provider`
- `Class.contextType`
- `Context.Consumer`
- `Context.displayName`
- 在嵌套组件中更新 Context
- 消费多个 Context
- 注意事项
- 错误边界
-
- 注意
- Refs 转发
-
- 在高阶组件中转发 refs
- Fragments
-
-
- 高阶组件
-
- 使用 HOC 解决横切关注点问题
- 不要改变原始组件，而应该使用组合。
- 约定：将不相关的 props 传递给被包裹的组件
- 约定：最大化可组合性
- 约定：包装显示名称以便轻松调试
- 注意事项
-
- 不要在 render 方法中使用 HOC
- 务必复制静态方法
- Refs 不会被传递
- 性能优化
-
- 各个命令
- 虚拟化长列表
- 虚拟DOM
- shouldComponentUpdate 的作用
- 不可变数据的力量
- Portals
-
- 用法
- 通过 Portal 进行事件冒泡
- Profiler API
-
- `onRender` 回调
- 不使用 ES6
-
- 自动绑定
-
- 方法
- Mixins
- diff算法
-
- 设计动机
- Diffing 算法
-
- 对比不同类型的元素
- 对比同一类型的元素
- 对比同类型的组件元素
- 对子节点进行递归
- Keys
- Refs and the DOM
-
-
- 何时使用 Refs
- 勿过度使用 Refs
- 创建 Refs
- 访问 Refs
- 将 DOM Refs 暴露给父组件
- 回调 Refs
-
- Render Props
-
- 使用 Render Props 来解决横切关注点（Cross-Cutting Concerns）
- 使用 Props 而非 `render`
- 注意事项
-
- 将 Render Props 与 React.PureComponent 一起使用时要小心
- 严格模式
- 类型检查的方法
- 使用 PropTypes 进行类型检查
-
-
- PropTypes
-
- PS
解决横切关注点问题
- 使用 render props
- 使用 mixins
- 使用 HOC
JSX
语法：大括号
const name = 'Josh Perez';
const element = Hello, {name}
;
const element = 
;
在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。
React DOM 使用 camelCase（小驼峰命名）来定义属性的名称
例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。
JSX 防止注入攻击
你可以安全地在 JSX 当中插入用户输入内容：
const title = response.potentiallyMaliciousInput;
// 直接使用是安全的：
const element = {title}
;
React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击。
JSX 表示对象
Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。
React.createElement() 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象：
// 注意：这是简化过的结构
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};
大概就是 React.createElemet() 方法会创建一个 具有 type，props，children 等属性的对象
实际上，JSX 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖。
Click Me
会编译为：
React.createElement(
MyButton,
{color: 'blue', shadowSize: 2},
'Click Me'
)
如果没有子节点，你还可以使用自闭合的标签形式，如：
会编译为:
React.createElement(
'div',
{className: 'sidebar'}
)
指定 React 元素类型
JSX 标签的第一部分指定了 React 元素的类型。
大写字母开头的 JSX 标签意味着它们是 React 组件。这些标签会被编译为对命名变量的直接引用，所以，当你使用 JSX Foo 必须包含在作用域内。
React 必须在作用域内
由于 JSX 会编译为 React.createElement 调用形式，所以 React 库也必须包含在 JSX 代码作用域内。
例如，在如下代码中，虽然 React 和 CustomButton 并没有被直接使用，但还是需要导入：
如果你不使用 JavaScript 打包工具而是直接通过