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
在 Title 4 标题添加 col-span-2 占位类
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
+┆ 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 合并栏
╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈╮
┆ 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 库。
+
+- React 官方文档 (reactjs.org)
+
+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 组件中不能使用 hooksclass 组件读取状态
+<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: '我 · 你' };
+
+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
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
+另见
+
+- 反应生命周期方法图
+
+
+
diff --git a/index.html b/index.html
index d41bc903..9f216184 100644
--- a/index.html
+++ b/index.html
@@ -36,7 +36,7 @@
}