From 3823554f589c32ce03db82376f2a374733627756 Mon Sep 17 00:00:00 2001 From: jaywcjlove Date: Tue, 4 Oct 2022 18:43:55 +0000 Subject: [PATCH] doc: Update `react.md` cheatsheet. 0d0330c38c937505e37e1c950ad1cd5cd34311a8 --- docs/react.html | 157 +++++++++++++++++++++++++++++++++++------------- 1 file changed, 114 insertions(+), 43 deletions(-) diff --git a/docs/react.html b/docs/react.html index a3725830..3e089aea 100644 --- a/docs/react.html +++ b/docs/react.html @@ -221,8 +221,10 @@ } const element = ( - <div>{addNumbers(2, 5)}</div> -) + <div> + {addNumbers(2, 5)} + </div> +);

嵌套

import { useState } from 'react'
@@ -239,19 +241,6 @@
   );
 }
-

Fragment

-
import { Fragment } from 'react'
-import Avatar from './Avatar';
-import Profile from './Profile';
-
-const Student = () => (
-  <Fragment>
-    <Avatar src="./demo.jpg" />
-    <Profile username="name" />
-  </Fragment>
-)
-
-

从 v16.2.0 开始 Fragment 可用于返回多个子节点，而无需向 DOM 添加额外的包装节点。或者使用 <></> 效果是一样的。

Portals

React 并没有创建一个新的 div。它只是把子元素渲染到 domNode 中。domNode 是一个可以在任何位置的有效 DOM 节点。

render() {
@@ -262,6 +251,41 @@
 }

提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案

+

Fragment

+ +
import { Fragment } from 'react'
+import Avatar from './Avatar';
+import Profile from './Profile';
+
+const Student = () => (
+  <Fragment>
+    <Avatar src="./demo.jpg" />
+    <Profile username="name" />
+  </Fragment>
+);
+
+

从 v16.2.0 开始 Fragment 可用于返回多个子节点，而无需向 DOM 添加额外的包装节点。或者使用 <></> 效果是一样的。

+
const Student = () => (
+  <>
+    <Avatar src="./demo.jpg" />
+    <Profile username="name" />
+  </>
+);
+
+

查看: Fragments & strings

+

返回字符串

+
render() {
+  return 'Look ma, no spans!';
+}
+
+

您可以只返回一个字符串。查看: Fragments & strings

+

返回数组

+
const Student = () => [
+  <li key="A">First item</li>,
+  <li key="B">Second item</li>
+];
+
+

不要忘记 key！查看: Fragments & strings

Refs 转发

const FancyButton = React.forwardRef(
   (props, ref) => (
@@ -280,7 +304,7 @@
 </FancyButton>;

Class 组件内部使用 ref 属性

-
import { Component,createRef } from 'react';
+
import {Component,createRef} from 'react'
 
 class MyComponent extends Component {
   constructor(props) {
@@ -714,33 +738,6 @@
   ···
 }
 

-

嵌入内部组件

-
import React from 'react';
-import UserAvatar from "./UserAvatar";
-
-export default function UserProfile() {
-  return (
-    <div className="UserProfile">
-      <UserAvatar />
-      <UserAvatar />
-    </div>
-  );
-}
-
-

注意：假设 UserAvatar 在 UserAvatar.js 中声明。

-

嵌入外部组件

-
import React from 'react';
-import CompName from 'component-name';
-
-export default function UserProfile() {
-  return (
-    <div className="UserProfile">
-      <CompName />
-    </div>
-  );
-}
-
-

注意：外部组件在 npmjs.com 上找到，需要先安装导入。

高阶组件

import React, { Component } from 'react';
 // 高阶组件 with
@@ -764,6 +761,79 @@
 
 const MyComp = with('Hello')(LowComponent)
+

包含关系

+
function FancyBorder(props) {
+  return (
+    <div className={'Fancy'+props.color}>
+      {props.children}
+    </div>
+  );
+}
+
+

组件可以通过 JSX 嵌套

+
function WelcomeDialog() {
+  return (
+    <FancyBorder color="blue">
+      <h1 className="title">欢迎</h1>
+      <p className="message">
+        感谢您访问我们的宇宙飞船
+      </p>
+    </FancyBorder>
+  );
+}
+
+

作为参数传递

+
function SplitPane(props) {
+  return (
+    <div className="SplitPane">
+      <div className="left">
+        {props.left}
+      </div>
+      <div className="right">
+        {props.right}
+      </div>
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <SplitPane
+      left={<Contacts />}
+      right={<Chat />}
+    />
+  );
+}
+
+

给组件 SplitPane 传递 left 和 right 两个组件参数

+

嵌入内部组件

+
import React from 'react';
+import UserAvatar from "./UserAvatar";
+
+export default function UserProfile() {
+  return (
+    <div className="UserProfile">
+      <UserAvatar />
+      <UserAvatar />
+    </div>
+  );
+}
+
+

注意：假设 UserAvatar 在 UserAvatar.js 中声明

+

嵌入外部组件

+
import React from 'react';
+import {Button} from 'uiw';
+export default function UserProfile() {
+  return (
+    <div className="UserProfile">
+      <Button type="primary">
+        主要按钮
+      </Button>
+    </div>
+  );
+}
+
+

注意：外部组件在 npmjs.com 上找到，需要先安装导入

生命周期

Hooks

PropTypes 属性类型检查

@@ -1038,6 +1108,7 @@ message: PropTypes.instanceOf(Message), }; +

声明 message 为类的实例

另见