feat: add react.md cheatsheet.
This commit is contained in:
jaywcjlove
parent
5279d3082e
commit
0f5128ebd9
@ -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)<!--rehype:style=background: rgb(0 72 153/var(\-\-bg\-opacity));-->
|
||||
[JavaScript](./docs/javascript.md)<!--rehype:style=background: rgb(203 183 31/var(\-\-bg\-opacity));-->
|
||||
[JSON](./docs/json.md)<!--rehype:style=background: rgb(57 59 60/var(\-\-bg\-opacity));-->
|
||||
[React](./docs/react.md)<!--rehype:style=background: rgb(34 143 173/var(\-\-bg\-opacity));-->
|
||||
[TOML](./docs/toml.md)<!--rehype:style=background: rgb(132 132 132/var(\-\-bg\-opacity));-->
|
||||
[Markdown](./docs/markdown.md)<!--rehype:style=background: rgb(103 61 156/var(\-\-bg\-opacity));-->
|
||||
[TypeScript](./docs/typescript.md)<!--rehype:style=background: rgb(49 120 198/var(\-\-bg\-opacity));-->
|
||||
|
||||
@ -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
|
||||
```
|
||||
|
||||
### 权限模式
|
||||
|
||||
@ -425,6 +425,33 @@ H2 部分
|
||||
在 `Title 4` 标题添加 `col-span-2` 占位类
|
||||
|
||||
### 卡片列合并布局 8
|
||||
|
||||
```shell
|
||||
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
|
||||
┆ H3 Title 1 ┆
|
||||
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
|
||||
╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
|
||||
┆ 2 ┆ ┆ 3 ┆ ┆ 4 ┆ ┆ 5 ┆
|
||||
╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
|
||||
```
|
||||
|
||||
上面布局效果 Markdown 源码：
|
||||
|
||||
```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
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
```shell
|
||||
|
||||
787
docs/react.md
Normal file
787
docs/react.md
Normal file
@ -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(<App />);
|
||||
```
|
||||
|
||||
### 导入多个导出
|
||||
|
||||
```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 = <Hello />;
|
||||
```
|
||||
|
||||
使用 `import` 导入 `Hello` 组件，在示例中使用。
|
||||
|
||||
|
||||
### React 组件中的 CSS
|
||||
|
||||
```jsx
|
||||
import React from "react";
|
||||
import "./Student.css";
|
||||
|
||||
export const Student = (
|
||||
<div className="Student"></div>
|
||||
);
|
||||
```
|
||||
|
||||
注意：类属性 `className`
|
||||
|
||||
```jsx
|
||||
const divStyle = {
|
||||
backgroundImage: 'url(' + imgUrl + ')',
|
||||
};
|
||||
export const Student = (
|
||||
<div style={divStyle}></div>
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
### 属性
|
||||
|
||||
```jsx
|
||||
<Student name="Julie" age={23}
|
||||
pro={true} />
|
||||
```
|
||||
|
||||
函数组件 `Student` 中访问属性
|
||||
|
||||
```jsx
|
||||
function Student(props) {
|
||||
return <h1>Hello, {props.name}</h1>;
|
||||
}
|
||||
```
|
||||
|
||||
Class 组件 `Student` 中访问属性
|
||||
|
||||
```jsx
|
||||
class Student extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<h1>Hello, {this.props.name}</h1>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
`class` 组件使用 `this.props` 访问传递给组件的属性。
|
||||
|
||||
|
||||
### Children
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
```jsx
|
||||
function Example() {
|
||||
return (
|
||||
<AlertBox>
|
||||
<h1>您有待处理的通知</h1>
|
||||
</AlertBox>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
函数 `AlertBox` 组件
|
||||
|
||||
```jsx
|
||||
function AlertBox(props) {
|
||||
return (
|
||||
<div className="alert-box">
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```jsx
|
||||
{props.children}
|
||||
```
|
||||
|
||||
Class `AlertBox` 组件，与函数组件 `AlertBox` 组件相同
|
||||
|
||||
```jsx
|
||||
class AlertBox extends React.Component {
|
||||
render () {
|
||||
return (
|
||||
<div className="alert-box">
|
||||
{this.props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```jsx
|
||||
{this.props.children}
|
||||
```
|
||||
|
||||
`children` 作为子组件的的属性传递。
|
||||
|
||||
### State
|
||||
<!--rehype:wrap-class=row-span-3-->
|
||||
|
||||
函数中的 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 (
|
||||
<div>
|
||||
<p>您点击了 {count} 次</p>
|
||||
<button onClick={click}>
|
||||
点击我
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
使用 `setState` 更新状态，下面是函数组件读取状态
|
||||
|
||||
```jsx
|
||||
<p>您点击了 {count} 次</p>
|
||||
```
|
||||
|
||||
#### 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 (
|
||||
<div>
|
||||
<button onClick={this.click}>
|
||||
点击我
|
||||
</button>
|
||||
<p>您点击了{this.state.count}次</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
使用 `setState` 更新状态，`class` 组件中不能使用 <yel>~~hooks~~</yel>。下面是 `class` 组件读取状态
|
||||
|
||||
```jsx
|
||||
<p>您点击了{this.state.count}次</p>
|
||||
```
|
||||
|
||||
### 循环
|
||||
|
||||
```jsx
|
||||
const elm = ['one', 'two', 'three'];
|
||||
function Student() {
|
||||
return (
|
||||
<ul>
|
||||
{elm.map((value, index) => (
|
||||
<li key={index}>{value}</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
`key` 值在兄弟节点之间必须唯一
|
||||
|
||||
### 事件监听
|
||||
|
||||
```jsx
|
||||
export default function Hello() {
|
||||
function handleClick(event) {
|
||||
event.preventDefault();
|
||||
alert("Hello World");
|
||||
}
|
||||
|
||||
return (
|
||||
<a href="/" onClick={handleClick}>
|
||||
Say Hi
|
||||
</a>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 函数注入
|
||||
|
||||
```jsx
|
||||
function addNumbers(x1, x2) {
|
||||
return x1 + x2;
|
||||
}
|
||||
|
||||
const element = (
|
||||
<div>{addNumbers(2, 5)}</div>
|
||||
)
|
||||
```
|
||||
|
||||
### 嵌套
|
||||
|
||||
```jsx
|
||||
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
|
||||
|
||||
```jsx
|
||||
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 节点。
|
||||
|
||||
```jsx
|
||||
render() {
|
||||
return ReactDOM.createPortal(
|
||||
this.props.children,
|
||||
domNode
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案
|
||||
|
||||
默认值
|
||||
---
|
||||
|
||||
### Class 组件默认 props
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
```jsx
|
||||
class CustomButton extends React.Component {
|
||||
// ...
|
||||
}
|
||||
CustomButton.defaultProps = {
|
||||
color: 'blue'
|
||||
};
|
||||
```
|
||||
|
||||
#### 使用
|
||||
|
||||
```jsx
|
||||
<CustomButton /> ;
|
||||
```
|
||||
|
||||
不传值 `props.color` 将自动设置为 `blue`
|
||||
|
||||
### Class 组件默认 state
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
```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 <div>{color}</div>
|
||||
}
|
||||
```
|
||||
|
||||
### 函数组件默认 state
|
||||
|
||||
```jsx
|
||||
function CustomButton() {
|
||||
const [color, setColor]=useState('blue')
|
||||
return <div>{color}</div>
|
||||
}
|
||||
```
|
||||
|
||||
JSX
|
||||
---
|
||||
|
||||
### 介绍
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
`JSX` 仅仅只是 `React.createElement(component, props, ...children)` 函数的语法糖
|
||||
|
||||
```jsx
|
||||
<MyButton color="blue" shadowSize={2}>
|
||||
点击我
|
||||
</MyButton>
|
||||
```
|
||||
|
||||
会编译为
|
||||
|
||||
```js
|
||||
React.createElement(
|
||||
MyButton,
|
||||
{color: 'blue', shadowSize: 2},
|
||||
'点击我'
|
||||
);
|
||||
```
|
||||
|
||||
没有子节点
|
||||
|
||||
```jsx
|
||||
<div className="sidebar" />
|
||||
```
|
||||
|
||||
会编译为
|
||||
|
||||
```js
|
||||
React.createElement(
|
||||
'div',
|
||||
{className: 'sidebar'}
|
||||
)
|
||||
```
|
||||
|
||||
### JSX 点语法
|
||||
|
||||
```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
|
||||
|
||||
```jsx
|
||||
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);
|
||||
```
|
||||
|
||||
参考：[渲染元素](https://reactjs.org/docs/rendering-elements.html)
|
||||
|
||||
### JSX 属性
|
||||
|
||||
```jsx
|
||||
const element = (
|
||||
<img src={user.avatarUrl} />
|
||||
);
|
||||
|
||||
const element = (
|
||||
<button className="btn">
|
||||
点击我
|
||||
</button>
|
||||
);
|
||||
```
|
||||
|
||||
注意：类属性 `className`
|
||||
|
||||
### JSX 表达式
|
||||
|
||||
```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
|
||||
|
||||
```jsx
|
||||
const divStyle = {
|
||||
color: 'blue',
|
||||
backgroundImage: 'url(' + imgUrl + ')',
|
||||
};
|
||||
function MyComponent() {
|
||||
return <div style={divStyle}>组件</div>;
|
||||
}
|
||||
```
|
||||
|
||||
### JSX dangerouslySetInnerHTML
|
||||
|
||||
```jsx
|
||||
const markup = {__html: '我 · 你' };
|
||||
|
||||
const MyComponent = () => (
|
||||
<div dangerouslySetInnerHTML={markup} />
|
||||
);
|
||||
```
|
||||
|
||||
`dangerouslySetInnerHTML` 是 React 为浏览器 DOM 提供 `innerHTML` 的替换方案。
|
||||
|
||||
### JSX htmlFor
|
||||
|
||||
```jsx
|
||||
const MyComponent = () => (
|
||||
<div>
|
||||
<input type="radio" id="ab" name="v">
|
||||
<label for="ab">HTML</label>
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
||||
`for` 在 `JS` 中是保留字，JSX 元素使用了 `htmlFor` 代替
|
||||
|
||||
### JSX defaultValue
|
||||
|
||||
非受控组件的属性，设置组件第一次挂载时的 `value`
|
||||
|
||||
```jsx
|
||||
<textarea defaultValue="Hello" />
|
||||
```
|
||||
|
||||
`<input>`、`<select>` 和 `<textarea>` 支持 value 属性
|
||||
|
||||
### JSX defaultChecked
|
||||
|
||||
非受控组件的属性，设置组件是否被选中
|
||||
|
||||
```jsx
|
||||
<input type="radio" defaultChecked />
|
||||
```
|
||||
|
||||
类型为 `checkbox` 或 `radio` 时，组件支持 checked 属性
|
||||
|
||||
### JSX className
|
||||
|
||||
属性用于指定 `CSS` 的 `class`
|
||||
|
||||
```jsx
|
||||
<div className="warp">...</div>
|
||||
```
|
||||
|
||||
React 中使用 [Web Components](https://developer.mozilla.org/zh-CN/docs/Web/Web_Components) 使用 `class` 属性代替
|
||||
|
||||
### JSX 条件渲染
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
```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>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
注意：组件必须总是返回一些东西。
|
||||
|
||||
#### 使用
|
||||
|
||||
```jsx
|
||||
<Greeting firstName="三" lastName="张" />
|
||||
```
|
||||
|
||||
### JSX 三目运算符 / 与运算符 &&
|
||||
|
||||
```jsx
|
||||
export default function Weather(props) {
|
||||
const isLoggedIn = props.isLoggedIn;
|
||||
return (
|
||||
<div>
|
||||
<b>{isLoggedIn ? '已' : '未'}</b>登录。
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```js
|
||||
{isShow && <div>内容</div>}
|
||||
```
|
||||
|
||||
### JSX 组件
|
||||
|
||||
```jsx
|
||||
<Dropdown>
|
||||
下拉列表
|
||||
<Menu>
|
||||
<Menu.Item>菜单一</Menu.Item>
|
||||
<Menu.Item>菜单二</Menu.Item>
|
||||
<Menu.Item>菜单三</Menu.Item>
|
||||
</Menu>
|
||||
</Dropdown>
|
||||
```
|
||||
|
||||
组件名称以大驼峰式命名。
|
||||
|
||||
### JSX 元素变量
|
||||
|
||||
```jsx
|
||||
function Greeting(props) {
|
||||
let button;
|
||||
if (props.isLoggedIn) {
|
||||
button = <UserGreeting />;
|
||||
} else {
|
||||
button = <GuestGreeting />;
|
||||
}
|
||||
return <div>{button}</div>;
|
||||
}
|
||||
```
|
||||
|
||||
### JSX 注释
|
||||
|
||||
```jsx
|
||||
function Student() {
|
||||
const [count, setCount] = useState(0);
|
||||
return (
|
||||
<Fragment>
|
||||
{/* 这里写注释 */}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
组件
|
||||
----
|
||||
|
||||
### 函数组件
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
|
||||
const UserName = () => <h1>Kenny</h1>;
|
||||
|
||||
export default function UserProfile() {
|
||||
return (
|
||||
<div className="UserProfile">
|
||||
<div>Hello</div>
|
||||
<UserName />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
注意：每个组件都需要一个根元素，[更多说明](https://reactjs.org/docs/components-and-props.html)。
|
||||
|
||||
### Class 组件
|
||||
|
||||
```jsx
|
||||
class Welcome extends React.Component {
|
||||
render() {
|
||||
return <h1>{this.props.name}</h1>;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Class 组件 API
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
#### 额外的 API
|
||||
|
||||
:- | -
|
||||
:- | -
|
||||
`this.forceUpdate()` | 强制重新渲染
|
||||
`this.setState({ ... })` | 更新状态
|
||||
`this.setState(state =>{ ... })` | 更新状态
|
||||
|
||||
#### 属性
|
||||
|
||||
:- | -
|
||||
:- | -
|
||||
`defaultProps` | 默认 props
|
||||
`displayName` | 显示组件名称(用于调试)
|
||||
|
||||
#### 实例属性
|
||||
|
||||
:- | -
|
||||
:- | -
|
||||
`this.props` | 组件接受参数
|
||||
`this.state` | 组件内状态
|
||||
|
||||
|
||||
### Pure 组件
|
||||
|
||||
```jsx
|
||||
import React, {PureComponent} from 'react'
|
||||
|
||||
class MessageBox extends PureComponent {
|
||||
···
|
||||
}
|
||||
```
|
||||
### 嵌入内部组件
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
import UserAvatar from "./UserAvatar";
|
||||
|
||||
export default function UserProfile() {
|
||||
return (
|
||||
<div className="UserProfile">
|
||||
<UserAvatar />
|
||||
<UserAvatar />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
注意：假设 `UserAvatar` 在 `UserAvatar.js` 中声明。
|
||||
|
||||
### 嵌入外部组件
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
import CompName from 'component-name';
|
||||
|
||||
export default function UserProfile() {
|
||||
return (
|
||||
<div className="UserProfile">
|
||||
<CompName />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
注意：外部组件在 [npmjs.com](https://www.npmjs.com) 上找到，需要先安装导入。
|
||||
|
||||
### 高阶组件
|
||||
|
||||
```jsx
|
||||
import React, { Component } from 'react';
|
||||
// 高阶组件 with
|
||||
const with = data => WrappedComponent => {
|
||||
return class extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<WrappedComponent data={data} />
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
使用高阶组件
|
||||
|
||||
```jsx
|
||||
const LowComponent = (props) => (
|
||||
<div>{props.data}</div>
|
||||
);
|
||||
|
||||
const MyComp = with('Hello')(LowComponent)
|
||||
```
|
||||
|
||||
生命周期
|
||||
---
|
||||
|
||||
Hooks
|
||||
---
|
||||
|
||||
|
||||
另见
|
||||
----
|
||||
|
||||
- [反应生命周期方法图](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)
|
||||
7
scripts/assets/react.svg
Normal file
7
scripts/assets/react.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="1em" width="1em">
|
||||
<circle cx="12" cy="11.245" r="1.785"/>
|
||||
<path d="m7.002 14.794-.395-.101c-2.934-.741-4.617-2.001-4.617-3.452 0-1.452 1.684-2.711 4.617-3.452l.395-.1.111.391a19.507 19.507 0 0 0 1.136 2.983l.085.178-.085.178c-.46.963-.841 1.961-1.136 2.985l-.111.39zm-.577-6.095c-2.229.628-3.598 1.586-3.598 2.542 0 .954 1.368 1.913 3.598 2.54.273-.868.603-1.717.985-2.54a20.356 20.356 0 0 1-.985-2.542zm10.572 6.095-.11-.392a19.628 19.628 0 0 0-1.137-2.984l-.085-.177.085-.179c.46-.961.839-1.96 1.137-2.984l.11-.39.395.1c2.935.741 4.617 2 4.617 3.453 0 1.452-1.683 2.711-4.617 3.452l-.395.101zm-.41-3.553c.4.866.733 1.718.987 2.54 2.23-.627 3.599-1.586 3.599-2.54 0-.956-1.368-1.913-3.599-2.542a20.683 20.683 0 0 1-.987 2.542z"/>
|
||||
<path d="m6.419 8.695-.11-.39c-.826-2.908-.576-4.991.687-5.717 1.235-.715 3.222.13 5.303 2.265l.284.292-.284.291a19.718 19.718 0 0 0-2.02 2.474l-.113.162-.196.016a19.646 19.646 0 0 0-3.157.509l-.394.098zm1.582-5.529c-.224 0-.422.049-.589.145-.828.477-.974 2.138-.404 4.38.891-.197 1.79-.338 2.696-.417a21.058 21.058 0 0 1 1.713-2.123c-1.303-1.267-2.533-1.985-3.416-1.985zm7.997 16.984c-1.188 0-2.714-.896-4.298-2.522l-.283-.291.283-.29a19.827 19.827 0 0 0 2.021-2.477l.112-.16.194-.019a19.473 19.473 0 0 0 3.158-.507l.395-.1.111.391c.822 2.906.573 4.992-.688 5.718a1.978 1.978 0 0 1-1.005.257zm-3.415-2.82c1.302 1.267 2.533 1.986 3.415 1.986.225 0 .423-.05.589-.145.829-.478.976-2.142.404-4.384-.89.198-1.79.34-2.698.419a20.526 20.526 0 0 1-1.71 2.124z"/>
|
||||
<path d="m17.58 8.695-.395-.099a19.477 19.477 0 0 0-3.158-.509l-.194-.017-.112-.162A19.551 19.551 0 0 0 11.7 5.434l-.283-.291.283-.29c2.08-2.134 4.066-2.979 5.303-2.265 1.262.727 1.513 2.81.688 5.717l-.111.39zm-3.287-1.421c.954.085 1.858.228 2.698.417.571-2.242.425-3.903-.404-4.381-.824-.477-2.375.253-4.004 1.841.616.67 1.188 1.378 1.71 2.123zM8.001 20.15a1.983 1.983 0 0 1-1.005-.257c-1.263-.726-1.513-2.811-.688-5.718l.108-.391.395.1c.964.243 2.026.414 3.158.507l.194.019.113.16c.604.878 1.28 1.707 2.02 2.477l.284.29-.284.291c-1.583 1.627-3.109 2.522-4.295 2.522zm-.993-5.362c-.57 2.242-.424 3.906.404 4.384.825.47 2.371-.255 4.005-1.842a21.17 21.17 0 0 1-1.713-2.123 20.692 20.692 0 0 1-2.696-.419z"/>
|
||||
<path d="M12 15.313c-.687 0-1.392-.029-2.1-.088l-.196-.017-.113-.162a25.697 25.697 0 0 1-1.126-1.769 26.028 26.028 0 0 1-.971-1.859l-.084-.177.084-.179c.299-.632.622-1.252.971-1.858.347-.596.726-1.192 1.126-1.77l.113-.16.196-.018a25.148 25.148 0 0 1 4.198 0l.194.019.113.16a25.136 25.136 0 0 1 2.1 3.628l.083.179-.083.177a24.742 24.742 0 0 1-2.1 3.628l-.113.162-.194.017c-.706.057-1.412.087-2.098.087zm-1.834-.904c1.235.093 2.433.093 3.667 0a24.469 24.469 0 0 0 1.832-3.168 23.916 23.916 0 0 0-1.832-3.168 23.877 23.877 0 0 0-3.667 0 23.743 23.743 0 0 0-1.832 3.168 24.82 24.82 0 0 0 1.832 3.168z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
@ -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);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user