From 7840f947f8e0bd01626a5274f9f30babd4e1fe79 Mon Sep 17 00:00:00 2001
From: jaywcjlove <398188662@qq.com>
Date: Wed, 5 Oct 2022 01:34:11 +0800
Subject: [PATCH] doc: Update `react.md` cheatsheet.
---
docs/react.md | 264 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 264 insertions(+)
diff --git a/docs/react.md b/docs/react.md
index b3c49ea..0411d12 100644
--- a/docs/react.md
+++ b/docs/react.md
@@ -381,6 +381,61 @@ function CustomTextInput(props) {
}
```
+### 严格模式 StrictMode
+
+```jsx
+
+```
+
+----
+
+- [识别不安全的生命周期](https://zh-hans.reactjs.org/docs/strict-mode.html#identifying-unsafe-lifecycles)
+- [关于使用过时字符串 ref API 的警告](https://zh-hans.reactjs.org/docs/strict-mode.html#warning-about-legacy-string-ref-api-usage)
+- [关于使用废弃的 findDOMNode 方法的警告](https://zh-hans.reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage)
+- [检测意外的副作用](https://zh-hans.reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects)
+- [检测过时的 context API](https://zh-hans.reactjs.org/docs/strict-mode.html#detecting-legacy-context-api)
+- [确保可复用的状态](https://zh-hans.reactjs.org/docs/strict-mode.html#ensuring-reusable-state)
+
+突出显示应用程序中潜在问题的工具。请参阅：[严格模式](https://zh-hans.reactjs.org/docs/strict-mode.html)
+
+### Profiler
+
+
+测量一个 React 应用多久渲染一次以及渲染一次的 `代价`
+
+```jsx
+
+
+
+```
+
+为了分析 `Navigation` 组件和它的子代。应该在需要时才去使用它。
+
+:- | :-
+:- | :-
+`id(string)` | 发生提交的 `Profiler` 树的 `id`
+`onRender(function)` | 组件树任何组件 “提交” 一个更新的时候调用这个函数
+
+#### onRender 回调函数
+
+:- | :-
+:- | :-
+`phase: "mount" \| "update"` | 判断是由 `props`/`state`/`hooks` 改变 或 “第一次装载” 引起的重渲染
+`actualDuration: number` | 本次更新在渲染 Profiler 和它的子代上花费的时间
+`baseDuration: number` | 在 Profiler 树中最近一次每一个组件 render 的持续时间
+`startTime: number` | 本次更新中 React 开始渲染的时间戳
+`commitTime: number` | 本次更新中 React commit 阶段结束的时间戳
+`interactions: Set` | 当更新被制定时，“[interactions](https://fb.me/react-interaction-tracing)” 的集合会被追踪
+
默认值
---
@@ -844,6 +899,215 @@ Hooks
---
+PropTypes 属性类型检查
+---
+
+### PropTypes
+
+
+```jsx
+import PropTypes from 'prop-types'
+```
+
+----
+
+:- | -
+:- | -
+`any` | 任意类型
+`(props, propName, 组件名称)=>{}` | 自定义验证器
+
+#### 基础
+
+:- | -
+:- | -
+`string` | 字符串
+`number` | 数组
+`func` | 函数
+`bool` | 布尔值
+`symbol` | -
+
+#### 枚举 Enum
+
+:- | -
+:- | -
+`oneOf(any)` | 枚举类型
+`oneOfType([type])` | 几种类型中的任意一个类型
+
+
+#### 数组 Array
+
+:- | -
+:- | -
+`array` | 数组
+`arrayOf` | 数组由某一类型的元素组成
+
+#### 对象 Object
+
+:- | -
+:- | -
+`object` | 对象
+`objectOf` | 对象由某一类型的值组成
+`instanceOf(...)` | 类的实例
+`shape` | 对象由特定的类型值组成
+`exact` | 有额外属性警告
+
+#### 元素 Elements
+
+:- | -
+:- | -
+`element` | React 元素
+`elementType` | React 元素类型(即 `MyComponent`)
+`node` | DOM 节点
+
+#### 必需的
+
+:- | -
+:- | -
+`(···).isRequired` | 必需的
+
+请参阅：[使用 PropTypes 进行类型检查](https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html)
+
+### 基本类型
+
+```jsx
+MyComponent.propTypes = {
+ email: PropTypes.string,
+ seats: PropTypes.number,
+ callback: PropTypes.func,
+ isClosed: PropTypes.bool,
+ any: PropTypes.any
+ symbol: PropTypes.symbol,
+}
+```
+
+你可以将属性声明为 JS 原生类型，默认都是可选的。
+
+### 必需的
+
+```jsx
+MyComponent.propTypes = {
+ // 确保这个 prop 没有被提供时，会打印警告信息
+ requiredFunc: PropTypes.func.isRequired,
+
+ // 任意类型的必需数据
+ requiredAny: PropTypes.any.isRequired,
+}
+```
+
+你可以在任何 `PropTypes` 属性后面加上 `isRequired`。
+
+### 枚举
+
+```js
+MyComponent.propTypes = {
+ // 只能是特定的值，枚举类型。
+ optionalEnum: PropTypes.oneOf([
+ 'News', 'Photos'
+ ]),
+ // 一个对象可以是几种类型中的任意一个类型
+ optionalUnion: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.number,
+ PropTypes.instanceOf(Message)
+ ]),
+}
+```
+
+### 元素 Elements
+
+```jsx
+MyComponent.propTypes = {
+ // 任何可被渲染的元素
+ // (包括数字、字符串、元素或数组)
+ // (或 Fragment) 也包含这些类型。
+ node: PropTypes.node,
+
+ // 一个 React 元素。
+ element: PropTypes.element,
+
+ // 一个 React 元素类型（即，MyComponent）
+ elementType: PropTypes.elementType,
+}
+```
+
+### 对象 Object
+
+```jsx
+MyComponent.propTypes = {
+ // 可以指定一个对象由某一类型的值组成
+ objectOf: PropTypes.objectOf(
+ PropTypes.number
+ ),
+ // 可以指定一个对象由特定的类型值组成
+ objectWithShape: PropTypes.shape({
+ color: PropTypes.string,
+ fontSize: PropTypes.number
+ }),
+ // 带有额外属性警告的对象
+ objectWithStrictShape: PropTypes.exact({
+ name: PropTypes.string,
+ quantity: PropTypes.number
+ }),
+}
+```
+
+### 自定义验证器
+
+```jsx
+MyComponent.propTypes = {
+ custom: (props, propName, compName) => {
+ if (!/matchm/.test(props[propName])) {
+ // 它在验证失败时应返回一个 Error 对象
+ return new Error(
+ '无效的prop `'
+ ` \`${propName}\` 提供给` +
+ ` \`${compName}\`。验证失败。`
+ );
+
+ }
+ },
+}
+```
+
+请不要使用 `console.warn` 或抛出异常，因为这在 `oneOfType` 中不会起作用。
+
+### 自定义的 `arrayOf` 或 `objectOf` 验证器
+
+
+```jsx
+MyComponent.propTypes = {
+ arrayProp: PropTypes.arrayOf((propValue, key, componentName, location, propFullName) => {
+ if (!/matchme/.test(propValue[key])) {
+ // 它应该在验证失败时返回一个 Error 对象。
+ return new Error(
+ 'Invalid prop `' + propFullName + '` supplied to' +
+ ' `' + componentName + '`. Validation failed.'
+ );
+ }
+ })
+}
+```
+
+`propValue` 是数组或对象本身，`key` 是他们当前的键。
+
+### 数组
+
+```jsx
+MyComponent.propTypes = {
+ arr: PropTypes.arrayOf(PropTypes.number),
+};
+```
+
+可以指定一个数组由某一类型的元素组成
+
+### 验证类的实例
+
+```jsx
+MyComponent.propTypes = {
+ message: PropTypes.instanceOf(Message),
+};
+```
+
另见
----