From 0f5128ebd98eadab940eb1a8035b817f90aaee07 Mon Sep 17 00:00:00 2001 From: jaywcjlove <398188662@qq.com> Date: Tue, 4 Oct 2022 00:56:09 +0800 Subject: [PATCH] feat: add `react.md` cheatsheet. --- README.md | 3 +- docs/chmod.md | 10 +- docs/quickreference.md | 27 ++ docs/react.md | 787 +++++++++++++++++++++++++++++++++++++++ scripts/assets/react.svg | 7 + scripts/style.css | 9 +- 6 files changed, 836 insertions(+), 7 deletions(-) create mode 100644 docs/react.md create mode 100644 scripts/assets/react.svg diff --git a/README.md b/README.md index 8167d8b..cb7aacf 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ Quick Reference 为开发人员分享快速参考备忘清单(主要是方便自己)，在看到 [Reference](https://github.com/Randy8080/reference) 快速参考备忘单，感觉非常简单，造轮子使命感突然来了，造个中文版本的，为了方便自己的技术栈查阅，立马撸起来 :)。 -如果您发现此处的备忘单不合适，您可以通过提交 PR 来修复它或提供更好的备忘清单，只针对【中文】用户。以下是开源天使提供的一些备忘清单和快速参考 :)。 +如果您发现此处的备忘单不合适，您可以通过提交 [PR](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md) 来修复它或提供更好的备忘清单，只针对【中文】用户。以下是开源天使提供的一些备忘清单和快速参考 :)。 ## 编程 @@ -12,6 +12,7 @@ Quick Reference [Dockerfile](./docs/dockerfile.md) [JavaScript](./docs/javascript.md) [JSON](./docs/json.md) +[React](./docs/react.md) [TOML](./docs/toml.md) [Markdown](./docs/markdown.md) [TypeScript](./docs/typescript.md) diff --git a/docs/chmod.md b/docs/chmod.md index 5259f27..6cd4029 100644 --- a/docs/chmod.md +++ b/docs/chmod.md @@ -64,11 +64,11 @@ drwxr-xr-x 2 root root 2 Jun 30 18:06 dir ```text 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.md b/docs/quickreference.md index 1757afe..528fcf7 100644 --- a/docs/quickreference.md +++ b/docs/quickreference.md @@ -425,6 +425,33 @@ H2 部分 在 `Title 4` 标题添加 `col-span-2` 占位类 ### 卡片列合并布局 8 + +```shell +╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ +┆ H3 Title 1 ┆ +╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ +╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮ +┆ 2 ┆ ┆ 3 ┆ ┆ 4 ┆ ┆ 5 ┆ +╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯ +``` + +上面布局效果 Markdown 源码： + +```markdown +H2 部分 +---- + +### Title 1 + +### Title 2 +### Title 3 +### Title 4 +### Title 5 +``` + +在 `H2 部分` 标题添加 `cols-4`，和 `Title 1` 添加 `col-span-4` 合并栏 + +### 卡片列合并布局 9 ```shell diff --git a/docs/react.md b/docs/react.md new file mode 100644 index 0000000..ef7c19c --- /dev/null +++ b/docs/react.md @@ -0,0 +1,787 @@ +React 备忘清单 +=== + +适合初学者的综合 React 备忘清单。 + + +入门 +---- + +### 介绍 + +React 是一个用于构建用户界面的 JavaScript 库。 + +- [React 官方文档](https://reactjs.org/) _(reactjs.org)_ + +```js +import React from 'react' +import {createRoot} from 'react-dom/client' +import App from './App' +``` + +----- + +```jsx +const elm = document.getElementById('app') +const root = createRoot(elm); +root.render(); +``` + +### 导入多个导出 + +```jsx +import React, {Component} from 'react' +import ReactDOM from 'react-dom' +``` + +----- + +```jsx +export class Hello extends Component { + ... +} +``` + +使用 `export` 或者 `export default` 导出 `Hello` 组件 + +```jsx +import { Hello } from './hello.js'; + +const Example = ; +``` + +使用 `import` 导入 `Hello` 组件，在示例中使用。 + + +### React 组件中的 CSS + +```jsx +import React from "react"; +import "./Student.css"; + +export const Student = ( +
+); +``` + +注意：类属性 `className` + +```jsx +const divStyle = { + backgroundImage: 'url(' + imgUrl + ')', +}; +export const Student = ( +
+); +``` + + +### 属性 + +```jsx + +``` + +函数组件 `Student` 中访问属性 + +```jsx +function Student(props) { + return

Hello, {props.name}

; +} +``` + +Class 组件 `Student` 中访问属性 + +```jsx +class Student extends React.Component { + render() { + return ( +

Hello, {this.props.name}

+ ); + } +} +``` + +`class` 组件使用 `this.props` 访问传递给组件的属性。 + + +### Children + + +```jsx +function Example() { + return ( + +

您有待处理的通知

+ + ) +} +``` + +函数 `AlertBox` 组件 + +```jsx +function AlertBox(props) { + return ( +
+ {props.children} +
+ ); +} +``` + +---- + +```jsx +{props.children} +``` + +Class `AlertBox` 组件，与函数组件 `AlertBox` 组件相同 + +```jsx +class AlertBox extends React.Component { + render () { + return ( +
+ {this.props.children} +
+ ); + } +} +``` + +---- + +```jsx +{this.props.children} +``` + +`children` 作为子组件的的属性传递。 + +### State + + +函数中的 State，Hook 是 React 16.8 的新增特性 + +```jsx +import { useState } from 'react'; + +function Student() { + // 声明一个叫 "count" 的 state 变量 + const [count, setCount] = useState(0); + const click = () => setCount(count + 1); + + return ( +
+

您点击了 {count} 次

+ +
+ ); +} +``` + +使用 `setState` 更新状态，下面是函数组件读取状态 + +```jsx +

您点击了 {count} 次

+``` + +#### Class 中的 State + +```jsx +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 ( +
+ +

您点击了{this.state.count}次

+
+ ); + } +} +``` + +使用 `setState` 更新状态，`class` 组件中不能使用 ~~hooks~~。下面是 `class` 组件读取状态 + +```jsx +

您点击了{this.state.count}次

+``` + +### 循环 + +```jsx +const elm = ['one', 'two', 'three']; +function Student() { + return ( +
    + {elm.map((value, index) => ( +
  • {value}
    • + ))} +
+ ); +} +``` + +`key` 值在兄弟节点之间必须唯一 + +### 事件监听 + +```jsx +export default function Hello() { + function handleClick(event) { + event.preventDefault(); + alert("Hello World"); + } + + return ( + + Say Hi + + ); +} +``` + +### 函数注入 + +```jsx +function addNumbers(x1, x2) { + return x1 + x2; +} + +const element = ( +
{addNumbers(2, 5)}
+) +``` + +### 嵌套 + +```jsx +import { useState } from 'react' +import Avatar from './Avatar'; +import Profile from './Profile'; + +function Student() { + const [count, setCount] = useState(0); + return ( +
+ + +
+ ); +} +``` + +### Fragment + +```jsx +import { Fragment } from 'react' +import Avatar from './Avatar'; +import Profile from './Profile'; + +const Student = () => ( + + + + +) +``` + +从 @v16.2.0 开始，`Fragment` 可用于返回多个子节点，而无需向 DOM 添加额外的包装节点。 + +### Portals + +React 并*没有*创建一个新的 `div`。它只是把子元素渲染到 `domNode` 中。`domNode` 是一个可以在任何位置的有效 DOM 节点。 + +```jsx +render() { + return ReactDOM.createPortal( + this.props.children, + domNode + ); +} +``` + +提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案 + +默认值 +--- + +### Class 组件默认 props + + +```jsx +class CustomButton extends React.Component { + // ... +} +CustomButton.defaultProps = { + color: 'blue' +}; +``` + +#### 使用 + +```jsx + ; +``` + +不传值 `props.color` 将自动设置为 `blue` + +### Class 组件默认 state + + +```jsx +class Hello extends Component { + constructor (props) { + super(props) + this.state = { visible: true } + } +} +``` + +在构造 `constructor()`中设置默认状态。 + +```jsx +class Hello extends Component { + state = { visible: true } +} +``` + +### 函数组件默认 props + +```jsx +function CustomButton(props) { + const { color = 'blue' } = props; + return
{color}
+} +``` + +### 函数组件默认 state + +```jsx +function CustomButton() { + const [color, setColor]=useState('blue') + return
{color}
+} +``` + +JSX +--- + +### 介绍 + + +`JSX` 仅仅只是 `React.createElement(component, props, ...children)` 函数的语法糖 + +```jsx + + 点击我 + +``` + +会编译为 + +```js +React.createElement( + MyButton, + {color: 'blue', shadowSize: 2}, + '点击我' +); +``` + +没有子节点 + +```jsx +
+``` + +会编译为 + +```js +React.createElement( + 'div', + {className: 'sidebar'} +) +``` + +### JSX 点语法 + +```jsx +const Menu = ({ children }) => ( +
{children}
+); + +Menu.Item = ({ children }) => ( +
{children}
+); + + + 菜单一 + 菜单二 + +``` + +### JSX Element + +```jsx +let element =

Hello, world!

; +let emptyHeading =

; + +const root = ReactDOM.createRoot( + document.getElementById('root') +); +const element =

Hello, world

; +root.render(element); +``` + +参考：[渲染元素](https://reactjs.org/docs/rendering-elements.html) + +### JSX 属性 + +```jsx +const element = ( + +); + +const element = ( + +); +``` + +注意：类属性 `className` + +### JSX 表达式 + +```jsx +let name = 'Josh Perez'; +let element =

Hello, {name}

; + +function fullName(firstName, lastName) { + return firstName + ' ' + lastName; +} +let element = ( +

+ Hello, {fullName('Julie', 'Johnson')} +

+); +``` + +### JSX style + +```jsx +const divStyle = { + color: 'blue', + backgroundImage: 'url(' + imgUrl + ')', +}; +function MyComponent() { + return
组件
; +} +``` + +### JSX dangerouslySetInnerHTML + +```jsx +const markup = {__html: '我 · 你' }; + +const MyComponent = () => ( +
+); +``` + +`dangerouslySetInnerHTML` 是 React 为浏览器 DOM 提供 `innerHTML` 的替换方案。 + +### JSX htmlFor + +```jsx +const MyComponent = () => ( +
+ + +
+); +``` + +`for` 在 `JS` 中是保留字，JSX 元素使用了 `htmlFor` 代替 + +### JSX defaultValue + +非受控组件的属性，设置组件第一次挂载时的 `value` + +```jsx +