From 0e968d7e74236b343401871bb7b6b07242dcfb8d Mon Sep 17 00:00:00 2001 From: jaywcjlove Date: Mon, 3 Oct 2022 16:56:52 +0000 Subject: [PATCH] feat: add `react.md` cheatsheet. 0f5128ebd98eadab940eb1a8035b817f90aaee07 --- docs/chmod.html | 10 +- docs/quickreference.html | 22 +- docs/react.html | 641 +++++++++++++++++++++++++++++++++++++++ index.html | 10 +- style/style.css | 9 +- 5 files changed, 684 insertions(+), 8 deletions(-) create mode 100644 docs/react.html diff --git a/docs/chmod.html b/docs/chmod.html index 9b5c292f..fb4aaf86 100644 --- a/docs/chmod.html +++ b/docs/chmod.html @@ -118,11 +118,11 @@

dir 的权限分析

d  rwx  r-x  r-x
 ┬  ─┬─  ─┬─  ─┬─  
-│   │    │    │  
-│   │    │    └─ 4. Other｜5 (4+0+1)
-│   │    └────── 3. Group｜5 (4+0+1)
-│   └─────────── 2. User ｜7 (4+2+1)
-└─────────────── 1. File Type | directory
+┆   ┆    ┆    ┆  
+┆   ┆    ┆    ╰─ 4. Other｜5 (4+0+1)
+┆   ┆    ╰────── 3. Group｜5 (4+0+1)
+┆   ╰─────────── 2. User ｜7 (4+2+1)
+╰─────────────── 1. File Type | directory

权限模式

diff --git a/docs/quickreference.html b/docs/quickreference.html index 5d1836bf..ff5e9b18 100644 --- a/docs/quickreference.html +++ b/docs/quickreference.html @@ -444,7 +444,27 @@ ### Title 5

在 Title 4 标题添加 col-span-2 占位类

-

卡片列合并布局 8

+

卡片列合并布局 8

+
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
+┆     H3 Title 1      ┆
+╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
+╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
+┆ 2 ┆ ┆ 3 ┆ ┆ 4 ┆ ┆ 5 ┆
+╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
+
+

上面布局效果 Markdown 源码：

+
H2 部分
+----
+<!--rehype:body-class=cols-4-->
+### Title 1
+<!--rehype:wrap-class=col-span-4-->
+### Title 2
+### Title 3
+### Title 4
+### Title 5
+
+

在 H2 部分 标题添加 cols-4，和 Title 1 添加 col-span-4 合并栏

+

卡片列合并布局 9

╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈╮
 ┆ 1       ┆ ┆ 2 ┆
diff --git a/docs/react.html b/docs/react.html
new file mode 100644
index 00000000..ec151d7d
--- /dev/null
+++ b/docs/react.html
@@ -0,0 +1,641 @@
+
+
+
+
+React 备忘清单
+ &  react cheatsheet &  Quick Reference
+
+
+
+
+
+
+
React 备忘清单

+
适合初学者的综合 React 备忘清单。

+
入门

+
介绍

+
React 是一个用于构建用户界面的 JavaScript 库。

+
+
import React from 'react'
+import {createRoot} from 'react-dom/client'
+import App from './App'
+

+

+
const elm = document.getElementById('app')
+const root = createRoot(elm);
+root.render(<App />);
+

+
导入多个导出

+
import React, {Component} from 'react'
+import ReactDOM from 'react-dom'
+

+

+
export class Hello extends Component {
+  ...
+}
+

+
使用 export 或者 export default 导出 Hello 组件

+
import { Hello } from './hello.js';
+
+const Example = <Hello />;
+

+
使用 import 导入 Hello 组件，在示例中使用。

+
React 组件中的 CSS

+
import React from "react";
+import "./Student.css";
+
+export const Student = (
+  <div className="Student"></div>
+);
+

+
注意：类属性 className

+
const divStyle = {
+  backgroundImage: 'url(' + imgUrl + ')',
+};
+export const Student = (
+  <div style={divStyle}></div>
+);
+

+
属性

+
<Student name="Julie" age={23}
+  pro={true} />
+

+
函数组件 Student 中访问属性

+
function Student(props) {
+  return <h1>Hello, {props.name}</h1>;
+}
+

+
Class 组件 Student 中访问属性

+
class Student extends React.Component {
+  render() {
+    return (
+      <h1>Hello, {this.props.name}</h1>
+    );
+  }
+}
+

+
class 组件使用 this.props 访问传递给组件的属性。

+
Children

+
+
function Example() {
+  return (
+    <AlertBox>
+      <h1>您有待处理的通知</h1>
+    </AlertBox>
+  )
+}
+

+
函数 AlertBox 组件

+
function AlertBox(props) {
+  return (
+    <div className="alert-box">
+      {props.children}
+    </div>
+  );
+}
+

+

+
{props.children}
+

+
Class AlertBox 组件，与函数组件 AlertBox 组件相同

+
class AlertBox extends React.Component {
+  render () {
+    return (
+      <div className="alert-box">
+        {this.props.children}
+      </div>
+    );
+  }
+}
+

+

+
{this.props.children}
+

+
children 作为子组件的的属性传递。

+
State

+
+
函数中的 State，Hook 是 React 16.8 的新增特性

+
import { useState } from 'react';
+
+function Student() {
+  // 声明一个叫 "count" 的 state 变量
+  const [count, setCount] = useState(0);
+  const click = () => setCount(count + 1);
+
+  return (
+    <div>
+      <p>您点击了 {count} 次</p>
+      <button onClick={click}>
+        点击我
+      </button>
+    </div>
+  );
+}
+

+
使用 setState 更新状态，下面是函数组件读取状态

+
<p>您点击了 {count} 次</p>
+

+
Class 中的 State

+
import React from 'react';
+
+class Student extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {count: 1};
+  }
+  click() {
+    const count = this.state.count;
+    this.setState({ count: count + 1})
+  }
+  render() {
+    return (
+      <div>
+        <button onClick={this.click}>
+          点击我
+        </button>
+        <p>您点击了{this.state.count}次</p>
+      </div>
+    );
+  }
+}
+

+
使用 setState 更新状态，class 组件中不能使用 hooks。下面是 class 组件读取状态

+
<p>您点击了{this.state.count}次</p>
+

+
循环

+
const elm = ['one', 'two', 'three'];
+function Student() {
+  return (
+    <ul>
+      {elm.map((value, index) => (
+        <li key={index}>{value}</li>
+      ))}
+    </ul>
+  );
+}
+

+
key 值在兄弟节点之间必须唯一

+
事件监听

+
export default function Hello() {
+  function handleClick(event) {
+    event.preventDefault();
+    alert("Hello World");
+  }
+
+  return (
+    <a href="/" onClick={handleClick}>
+      Say Hi
+    </a>
+  );
+}
+

+
函数注入

+
function addNumbers(x1, x2) {
+  return x1 + x2;
+}
+
+const element = (
+  <div>{addNumbers(2, 5)}</div>
+)
+

+
嵌套

+
import { useState } from 'react'
+import Avatar from './Avatar';
+import Profile from './Profile';
+
+function Student() {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <Avatar src={count} />
+      <Profile username={count} />
+    </div>
+  );
+}
+

+
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() {
+  return ReactDOM.createPortal(
+    this.props.children,
+    domNode
+  );
+}
+

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

+
默认值

+
Class 组件默认 props

+
+
class CustomButton extends React.Component {
+  // ...
+}
+CustomButton.defaultProps = {
+  color: 'blue'
+};
+

+
使用

+
<CustomButton /> ;
+

+
不传值 props.color 将自动设置为 blue

+
Class 组件默认 state

+
+
class Hello extends Component {
+  constructor (props) {
+    super(props)
+    this.state = { visible: true }
+  }
+}
+

+
在构造 constructor()中设置默认状态。

+
class Hello extends Component {
+  state = { visible: true }
+}
+

+
函数组件默认 props

+
function CustomButton(props) {
+  const { color = 'blue' } = props;
+  return <div>{color}</div>
+}
+

+
函数组件默认 state

+
function CustomButton() {
+  const [color, setColor]=useState('blue')
+  return <div>{color}</div>
+}
+

+
JSX

+
介绍

+
+
JSX 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖

+
<MyButton color="blue" shadowSize={2}>
+  点击我
+</MyButton>
+

+
会编译为

+
React.createElement(
+  MyButton,
+  {color: 'blue', shadowSize: 2},
+  '点击我'
+);
+

+
没有子节点

+
<div className="sidebar" />
+

+
会编译为

+
React.createElement(
+  'div',
+  {className: 'sidebar'}
+)
+

+
JSX 点语法

+
const Menu = ({ children }) => (
+  <div className="menu">{children}<div>
+);
+
+Menu.Item = ({ children }) => (
+  <div>{children}<div>
+);
+
+<Menu>
+  <Menu.Item>菜单一</Menu.Item>
+  <Menu.Item>菜单二</Menu.Item>
+<Menu>
+

+
JSX Element

+
let element = <h1>Hello, world!</h1>;
+let emptyHeading = <h1 />;
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root')
+);
+const element = <h1>Hello, world</h1>;
+root.render(element);
+

+
参考：渲染元素

+
JSX 属性

+
const element = (
+  <img src={user.avatarUrl} />
+);
+
+const element = (
+  <button className="btn">
+    点击我
+  </button>
+);
+

+
注意：类属性 className

+
JSX 表达式

+
let name = 'Josh Perez';
+let element = <h1>Hello, {name}</h1>;
+
+function fullName(firstName, lastName) {
+  return firstName + ' ' + lastName;
+}
+let element = (
+  <h1>
+    Hello, {fullName('Julie', 'Johnson')}
+  </h1>
+);
+

+
JSX style

+
const divStyle = {
+  color: 'blue',
+  backgroundImage: 'url(' + imgUrl + ')',
+};
+function MyComponent() {
+  return <div style={divStyle}>组件</div>;
+}
+

+
JSX dangerouslySetInnerHTML

+
const markup = {__html: '我 &middot; 你' };
+
+const MyComponent = () => (
+  <div dangerouslySetInnerHTML={markup} />
+);
+

+
dangerouslySetInnerHTML 是 React 为浏览器 DOM 提供 innerHTML 的替换方案。

+
JSX htmlFor

+
const MyComponent = () => (
+  <div>
+    <input type="radio" id="ab" name="v">
+    <label for="ab">HTML</label>
+  </div>
+);
+

+
for 在 JS 中是保留字，JSX 元素使用了 htmlFor 代替

+
JSX defaultValue

+
非受控组件的属性，设置组件第一次挂载时的 value

+
<textarea defaultValue="Hello" />
+

+
<input>、<select> 和 <textarea> 支持 value 属性

+
JSX defaultChecked

+
非受控组件的属性，设置组件是否被选中

+
<input type="radio" defaultChecked />
+

+
类型为 checkbox 或 radio 时，组件支持 checked 属性

+
JSX className

+
属性用于指定 CSS 的 class

+
<div className="warp">...</div>
+

+
React 中使用 Web Components 使用 class 属性代替

+
JSX 条件渲染

+
+
import React from "react";
+
+function formatName(user) {
+  return user.firstName 
+    + ' ' 
+    + user.lastName;
+}
+
+export function Greeting(user) {
+  if (user) {
+    return (
+      <h1>你好, {formatName(user)}!</h1>
+    );
+  }
+  return (
+    <h1>你好, 先生。</h1>
+  );
+}
+

+
注意：组件必须总是返回一些东西。

+
使用

+
<Greeting firstName="三" lastName="张" />
+

+
JSX 三目运算符 / 与运算符 &&

+
export default function Weather(props) {
+  const isLoggedIn = props.isLoggedIn;
+  return (
+    <div>
+      <b>{isLoggedIn ? '已' : '未'}</b>登录。
+    </div>
+  );
+}
+

+

+
{isShow && <div>内容</div>}
+

+
JSX 组件

+
<Dropdown>
+  下拉列表
+  <Menu>
+    <Menu.Item>菜单一</Menu.Item>
+    <Menu.Item>菜单二</Menu.Item>
+    <Menu.Item>菜单三</Menu.Item>
+  </Menu>
+</Dropdown>
+

+
组件名称以大驼峰式命名。

+
JSX 元素变量

+
function Greeting(props) {
+  let button;
+  if (props.isLoggedIn) {
+    button = <UserGreeting />;
+  } else {
+    button = <GuestGreeting />;
+  }
+  return <div>{button}</div>;
+}
+

+
JSX 注释

+
function Student() {
+  const [count, setCount] = useState(0);
+  return (
+    <Fragment>
+      {/* 这里写注释 */}
+    </Fragment>
+  );
+}
+

+
组件

+
函数组件

+
+
import React from 'react';
+
+const UserName = () => <h1>Kenny</h1>;
+
+export default function UserProfile() {
+  return (
+    <div className="UserProfile">
+      <div>Hello</div>  
+      <UserName />
+    </div>
+  );
+}
+

+
注意：每个组件都需要一个根元素，更多说明。

+
Class 组件

+
class Welcome extends React.Component {
+  render() {
+    return <h1>{this.props.name}</h1>;
+  }
+}
+

+
Class 组件 API

+
+
额外的 API

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
:--
this.forceUpdate()强制重新渲染
this.setState({ ... })更新状态
this.setState(state =>{ ... })更新状态

+
属性

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
:--
defaultProps默认 props
displayName显示组件名称(用于调试)

+
实例属性

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
:--
this.props组件接受参数
this.state组件内状态

+
Pure 组件

+
import React, {PureComponent} from 'react'
+
+class MessageBox extends PureComponent {
+  ···
+}
+

+
嵌入内部组件

+
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
+const with = data => WrappedComponent => {
+  return class extends Component {
+    constructor(props) {
+      super(props);
+    }
+    render() {
+      return (
+        <WrappedComponent data={data} />
+      )
+    }
+  }
+}
+

+
使用高阶组件

+
const LowComponent = (props) => (
+  <div>{props.data}</div>
+);
+
+const MyComp = with('Hello')(LowComponent)
+

+
生命周期

+
Hooks

+
另见

+
+
© 2022 Kenny Wang, All rights reserved.

+
diff --git a/index.html b/index.html
index d41bc903..9f216184 100644
--- a/index.html
+++ b/index.html
@@ -36,7 +36,7 @@
   }

Quick Reference

为开发人员分享快速参考备忘清单(主要是方便自己)，在看到 Reference 快速参考备忘单，感觉非常简单，造轮子使命感突然来了，造个中文版本的，为了方便自己的技术栈查阅，立马撸起来 :)。

-

如果您发现此处的备忘单不合适，您可以通过提交 PR 来修复它或提供更好的备忘清单，只针对【中文】用户。以下是开源天使提供的一些备忘清单和快速参考 :)。

+

如果您发现此处的备忘单不合适，您可以通过提交 PR 来修复它或提供更好的备忘清单，只针对【中文】用户。以下是开源天使提供的一些备忘清单和快速参考 :)。

编程

@@ -58,6 +58,14 @@ JSON + + + + + + + +React diff --git a/style/style.css b/style/style.css index 93f610dd..32d6e40c 100644 --- a/style/style.css +++ b/style/style.css @@ -605,6 +605,10 @@ body:not(.home) .h2wrap > h2 a::after { box-shadow: 0 0 #0000, 0 0 #0000, 0 6px 8px rgba(102,119,136,0.03),0 1px 2px rgba(102,119,136,0.3); } +.h2wrap-body > .wrap .wrap-body > *:last-child { + border-radius: 0 0 0.5rem 0.5rem; +} + .code-highlight { display: block; overflow-x: auto; @@ -697,7 +701,7 @@ body:not(.home) .h2wrap > h2 a::after { color: var(--color-prettylights-syntax-entity-tag); } .token.maybe-class-name { - color: var(--color-prettylights-syntax-variable); + color: var(--color-prettylights-syntax-entity); } .token.property-access, .token.operator, .token.boolean, .token.number, .token.selector .token.class, .token.attr-name, .token.string, .token.char, .token.builtin { color: var(--color-prettylights-syntax-constant); @@ -733,6 +737,9 @@ body:not(.home) .h2wrap > h2 a::after { .token.rule, .token.regex, .token.important, .token.keyword { color: var(--color-prettylights-syntax-keyword); } +.token.module { + color: var(--color-prettylights-syntax-variable); +} .token.coord { color: var(--color-prettylights-syntax-meta-diff-range); }