# 基础

## 目录

- [Inline Styling 行内 CSS 样式化](#1)
- [Conditional Render 条件渲染](#2)
- [React.Fragment](#3)
- [Composition 组件合成](#4)
- [Default Props 默认参数](#5)
- [Type Check with JSX](#6)
- [Mapping List 列表渲染](#7)
- [JSX](#8)

> `npx create-react-app appName` Javascript 模板

> `npx create-react-app appName --template typescript` Typescript 模板

## <span id="1">1. Inline Styling 行内 CSS 样式化</span>

除了用`className`来修改指定元素的样式化外, JSX 本身也支持行内 CSS.

- `style`为 object 类型, 因此需要`{{}}` 双括号解析表达式. 如果传入的为 object 则只需要一对括号.
- 非整型值的样式化例如 `px, em` 则需要双引号 `""`
- CSS 属性用驼峰格式替代`-`

JSX 行内 CSS 通常用于实现一些动态的 CSS. 例如下面的代码用户名的颜色取决于该用户的所属组. 其他的技巧例如动态触发动画等 (也可以搭配`Styled-Component`).

```jsx
const UserProfile = props => {
  const user_profile_style = {
    fontSize: 20,
    color: "#000",
  }

  // ADMIN组用户红色 默认黑色字体
  if (props.group === "ADMIN") {
    user_profile_style.color = "red"
  }

  return (
    <div>
      <img
        src="IMAGE-PATH"
        style={{ width: 100, height: 100, borderRadius: 50 }}
      />
      <p style={user_profile_style}>Kageyame Tobio</p>
    </div>
  )
}

export default UserProfile
```

## <span id="2">2. Conditional Render 条件渲染</span>

1. 使用 `if-else`分支

```jsx
const App = () => {
  const [loading, setLoading] = useState(true)

  if (loading) {
    return <p>Loading...</p>
  }
  return <div>Hello!</div>
}
```

2. 使用三元运算符 根据状态渲染不同的元素

```jsx
const App = () => {
  const [loading, setLoading] = useState(false)

  return <div>{loading ? <p>Loading</p> : <p>Hello</p>}</div>
}
```

3. 如果只需要判断是否要显示一些元素 则可以用 `&&`

```jsx
const App = () => {
  const [loading, setLoading] = useState(false)

  return <div>{!loading && <p>Hello</p>}</div>
}
```

4. 组件通过 state 决定是否渲染 `return null`

```jsx
const Notification = props => {
  if (!props.show) return null

  return (
    <div>
      <p>You received a message from {props.fromUser}</p>
    </div>
  )
}
```

## <span id="3">3. `React.Fragment`</span>

用于 group 一系列的子组件避免添加过多多余的节点, 例如 `<div>`

```jsx
const SubjectTableHeader = () => {
  return (
    <React.Fragment>
      <th>Title</th>
      <th>Rating</th>
      <th>Rank</th>
    </React.Fragment>
  )
}
```

或者可直接用 shortcut `<></>`来替代 `React.Fragment`

```jsx
const SubjectTableHeader = () => {
  return (
    <>
      <th>Title</th>
      <th>Rating</th>
      <th>Rank</th>
    </>
  )
}
```

## <span id="4">4. Composition 组件合成</span>

### 4.1 Containment 容器与`children`

当组件内的内容不确定时, 可通过`<Component></Component>`来传入具体的子内容.

更像是**样式化一个容器**, 然后里面所有的 children 都遵循该容器的样式化. 类似于原子设计理论中的`template`模板一层级.

比如下面的`Modal`组件, 我们有时候不确定里面的内容, 但我们确定的是**所有 Modal 的内容都共享一个样式化**, 例如 modal 的边界, 圆角等等...

虽然用`css`也可以实现样式化共享, 但创建这种容器组件我们可以**传递 props**或者在其基础上加入其他内容. 虽然我们不知道组件内有什么内容, 但我们知道必然有一个按钮用来返回主页. 而`css`单独共享样式化则需要每个`div`都写一个`button`组件

```jsx
const ModalLayout = props => {
  return (
    <div className="modal-layout">
      {props.children}
      <button>Return</button>
    </div>
  )
}

const App = () => {
  return (
    <div>
      <ModalLayout>
        <h3>Submitted Successfully!</h3>
      </Modal>

      <ModalLayout>
        <h3>Enter your information</h3>
        <input type="email" placeholder="Enter email" />
      </Modal>
    </div>
  )
}
```

### 4.2 自定义的组成 props 传递组件

如果容器的样式化较复杂, 例如涉及到位置的问题. 则可以通过`props`来传递相关的子组件来达到组件的合成.

这个例子比较特别的一点就是`props`除了用来传参数同时也可以传组件.

```jsx
const SubjectItemLayout = props => {
  return (
    <div>
      <h1>一些通用渲染的元素</h1>
      <div className="subject-item-layout">
        <div className="subject-item-left">{props.left}</div>
        <div className="subject-item-right">{props.right}</div>
      </div>
      {props.children}
    </div>
  )
}

const App = () => {
  return (
    <SubjectItemLayout left={<SubjectBanner />} right={<SubjectDetail />}>
      <button>Return</button>
    </SubjectItemLayout>
  )
}
```

## <span id="5">5. Default Props 默认参数</span>

设置默认`props`以防止组件传入的`props`为`null`.

```jsx
import {DEFAULT_USER_AVATAR} from './constant'

const ProfileCard = (props) => {
  return (
    <div>
      <img src={props.avatar} alt="user avatar" />
      <h5>{props.username}</h5>
    </div>
  )
}

ProfileCard.defaultProps = {
  avatar: DEFAULT_USER_AVATAR;
}

export default ProfileCard
```

## <span id="6">6. Type Check 类型检验</span>

[文档链接](https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes)

> npm install prop-types

只在开发环境中 warning, 如果开发环境不是 Typescript 则可以用来测接口。

```jsx
import PropTypes from "prop-types"

const Subject = props => {
  return (
    <div>
      <h3>Title: {props.title}</h3>
      <small>Category: {props.category}</small>
      <p>Rating: {props.rating}</p>
    </div>
  )
}

Subject.propTypes = {
  title: PropTypes.string.isRequired,
  category: PropTypes.oneOf(['ANIME', 'BOOK', 'MUSIC', 'GAME']) // 限制prop的值
  rating: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), // 限制prop的类型

}

export default Subject
```

## <span id="7">7. Mapping List 列表渲染</span>

> `<SubjectPreviewItem />`为一个预览条目组件 (包括条目名称, 图片..用来展示条目信息).

虽然也可以直接写`js`表达式但单独拿出来作为一个组件可提高可读性并且可重复利用.

```js
const subjects = [
  {
    subject_id: 51,
    name: "CLANNAD",
    name_cn: "CLANNAD",
    rating: 9.3,
  },
  // 其他条目....
]
```

```jsx
const SubjectList = props => {
  const subjects = props.subjects
  const subjectList = subjects.map(elem => (
    <SubjectPreviewItem key={elem.id} subject={elem} />
  ))

  return <div>{subjectList}</div>
}

const App = () => {
  return (
    <>
      <h1>所有番剧</h1>
      <SubjectList subjects={subjects} />
    </>
  )
}
```

## <span id="8">8. JSX Common Usage</span>

## Dot Notation 引用指定的组件

> 组件必须以大写字母开头. 如果用小写字母 React 则会默认为内置元素.

### 1. 按组件 Hierarchy 分类

例如**Atomic Design**中, 我们可以按分子(atoms)打包返回所有相关的组件. 然后可以用`<Atoms.Component />` 来渲染指定的组件.

```jsx
const Button = ({ label }) => <button>{label}</button>
const Logo = ({ imgUri }) => <img src={imgUri} />

const Atoms = {
  Button: Button,
  Logo: Logo,
}
```

**App.js**

```jsx
const App = () => {
  return (
    <>
      <Atoms.Button label="Submit" />
    </>
  )
}
```

### 2. 按组件的 Category 分类

利用 JS `[]`根据提供的**key**来渲染指定的组件.

```jsx
const storyComponents = {
  photo: PhotoStory,
  video: VideoStory,
}

const Story = ({ storyType, stories }) => {
  const Component = storyComponents[storyType]
  return <Component stories={stories} />
}
```

## `...` & Deconstruct Props

### 1. 向下传递`props`为整个 object

直接传递`props`尽可能避免再嵌一层`key`. 例如下面如果用`data={elem}`, 子组件中又还要先拆一层`props.data`

```jsx
const SUBJECTS = [
  { id: 1, name: "Haikyuu" },
  { id: 2, name: "CLANNAD" },
  { id: 3, name: "Fate Stay Night" },
]
const App = () => {
  const subjectList = SUBJECTS.map(elem => <Subject key={elem.id} {...elem} />)

  return (
    <>
      <h1>All Subjects</h1>
      {subjectList}
    </>
  )
}
```

### 2. 只传递部分 Props (Deconstruct)

假设我们只需要其中部分的信息, 可以 deconstruct props 只传递我们需要的

```jsx
const subjectList = SUBJECTS.map(elem => {
  // 虽然我们的假数据只有id和name (lol)
  const props = { id: elem.id, name: elem.name }
  return <Card key={props.id} {...props} />
})
```

### 3. 子组件 Deconstruct 传入的 Props

同第二点, 我们或者可以在子组件里 deconstruct 需要的 props

```jsx
const Subject = props => {
  // other则为剩下的
  const { name, name_cn, rating, ...other } = props

  return (
    <>
      <h1>{name}</h1>
      <h3>{name_cn}</h3>
      <small>{rating}</small>
    </>
  )
}
```

本文介绍React基础, 例如JSX常用语法, 组件合成, 列表渲染以及动态CSS

React Basics 

# React Hooks 与表单应用

## 目录

- [`input` 文本输入框](#1)
- [`radio` 单项选择器](#2)
- [`select option` 下拉列表](#3)
- [`checkbox` 多复选框](#4)
  - [数组下标选择](#4.1)
  - [Object 利用 key 选择](#4.2)

## <span id="1">1. `input` 文本输入框</span>

```jsx
const App = () => {
  const [form, setForm] = useState({
    age: null,
    email: "",
  })

  const handleChange = event => {
    const { name, value } = event.target
    setForm(prevState => ({
      ...prevState,
      [name]: value,
    }))
  }

  return (
    <form>
      <label>
        Age
        <input
          type="number"
          name="age"
          value={form.age}
          onChange={handleChange}
        />
      </label>
      <label>
        Email
        <input
          type="email"
          name="email"
          value={form.email}
          onChange={handleChange}
        />
      </label>
    </form>
  )
}
```

### <span id="2">2. `radio` 单选按钮</span>

```jsx
const CATEGORY_OPTIONS = ["Anime", "Book", "Game", "Real", "Music"]

const App = () => {
  const [form, setForm] = useState({
    category: "",
  })

  const handleChange = event => {
    const { name, value } = event.target
    setForm(prevState => ({
      ...prevState,
      [name]: value,
    }))
  }

  const categoryOptions = CATEGORY_OPTIONS.map(elem => (
    <>
      <input
        type="radio"
        name="category"
        value={elem}
        checked={form.category === elem}
        onChange={handleChange}
      />
      {elem}
      <br />
    </>
  ))

  return (
    <>
      {categoryOptions}
      <button onClick={() => console.log(form)}>提交</button>
    </>
  )
}
```

### <span id="3">3. `select` 下拉列表</span>

```jsx
const SOURCE_OPTIONS = [
  { key: "bilibili", name: "哔哩哔哩" },
  { key: "acfun", name: "AcFun" },
  { key: "youtube", name: "Youtube" },
  { key: "netflix", name: "Netflix" },
]

const App = () => {
  const [form, setForm] = useState({
    source: "bilibili",
  })

  const handleChange = event => {
    const { name, value } = event.target
    setForm(prevState => ({
      ...prevState,
      [name]: value,
    }))
  }

  const sourceOptions = SOURCE_OPTIONS.map(elem => (
    <option value={elem.key}>{elem.name}</option>
  ))

  return (
    <>
      <select name="source" value={form.source} onChange={handleChange}>
        {sourceOptions}
      </select>
      <button onClick={() => console.log(form)}>提交</button>
    </>
  )
}
```

### <span id="4">4. `checkbox` 复选框</span>

#### <span id="4.1">4.1 Array 下标更新`checked`</span>

```jsx
const SOURCE_OPTIONS = [
  { key: "bilibili", name: "哔哩哔哩" },
  { key: "acfun", name: "AcFun" },
  { key: "youtube", name: "Youtube" },
  { key: "netflix", name: "Netflix" },
]

const App = () => {
  const [source, setSource] = useState(
    SOURCE_OPTIONS.map(elem => ({
      ...elem,
      checked: false, // 初始化为全不选
    }))
  )

  const handleChange = indexToUpdate => {
    // copy原state 然后更新当前下标
    const updatedState = [...source]
    updatedState[indexToUpdate].checked = !updatedState[indexToUpdate].checked

    setSource(updatedState)
  }

  const sourceOptions = source.map((elem, index) => (
    <label key={elem.key}>
      <input
        type="checkbox"
        name={elem.key}
        onChange={() => handleChange(index)}
        checked={source[index].checked}
      />
      {elem.name}
      <br />
    </label>
  ))
  return (
    <>
      {sourceOptions}
      <button onClick={() => console.log(source)}>提交</button>
    </>
  )
}
```

### <span id="4.2">4.2 利用 Object 更新</span>

`Object`则可以直接对指定的`key`更新, 就不用下标了. 但如果给的数据是 array of objects, 则需要先转化成 Object.

同时更新 state 时也可以直接对每一层 copy.

```jsx
setSource(prevState => ({
  ...prevState,
  [name]: {
    ...prevState[name],
    checked: checked,
  },
}))
```

```jsx
const SOURCE_OPTIONS = [
  { key: "bilibili", name: "哔哩哔哩" },
  { key: "acfun", name: "AcFun" },
  { key: "youtube", name: "Youtube" },
  { key: "netflix", name: "Netflix" },
]

const App = () => {
  // 转化成Object 且每个元素初始化checked为不选
  const initSource = SOURCE_OPTIONS.reduce(
    (acc, elem) => ({ ...acc, [elem.key]: { ...elem, checked: false } }),
    {}
  )
  const [source, setSource] = useState(initSource)

  const handleChange = event => {
    const { name, checked } = event.target

    const updatedState = { ...source }
    updatedState[name].checked = checked
    setSource(updatedState)
  }

  const sourceOptions = Object.keys(source).map(elem => (
    <label key={elem}>
      <input
        type="checkbox"
        name={elem}
        onChange={handleChange}
        checked={source[elem].checked}
      />
      {source[elem].name}
      <br />
    </label>
  ))

  return (
    <>
      {sourceOptions}
      <button onClick={() => console.log(source)}>提交</button>
    </>
  )
}
```

使用React Hooks 使得表单填写逻辑的封装更简易, 本文演示常用HTML表单与Hooks的应用

React Hooks 和表单应用

# React Hooks API 演示

## 目录

- [useState()](#1)
  - [表单逻辑 Hooks](#1.1)
  - [计数器 Hooks](#1.2)
- [useEffect()](#2)
  - [API 请求 Hooks](#2.1)
- [useContext](#3)
- [useReducer](#4)

## <span id="1">1. useState() 管理组件状态</span>

useState()有两个参数，第一个为该 state 的值, 第二个是管理该状态的函数.

```jsx
import React, { useState } from "react"

const App = () => {
  const [authForm, setAuthForm] = useState({
    username: "",
    password: "",
  })

  const handleChange = event => {
    const { name, value } = event.target
    setAuthForm(prevState => ({
      ...prevState,
      [name]: value,
    }))
  }

  return (
    <>
      <input
        name="username"
        value={authForm.username}
        onChange={handleChange}
      />
      <input
        name="password"
        value={authForm.password}
        onChange={handleChange}
      />
    </>
  )
}

export default App
```

### <span id="1.1">1.1 表单逻辑 Hooks Demo</span>

例如上面的表单`authForm`, 可以单独封装为一个表单逻辑 Hooks 专门处理表单输入.

**useFrom.js**

```jsx
import { useState } from "react"

const useForm = initState => {
  const [form, setForm] = useState(initState)

  return [
    form,
    event => {
      setForm({
        ...form,
        [event.target.name]: event.target.value,
      })
    },
  ]
}

export default useForm
```

**App.js**

因为我们在`useForm`中返回的是一个数组, 因此命名不需要与`useForm`中的匹配, 我们是用下标取相对应的参数. (下标 0 第一个就是 state, 下标 1 为管理 state 的函数)

```jsx
import React, { useState } from "react"
import { useForm } from "./useForm"

export const App = () => {
  const [authForm, setAuthForm] = useForm({
    username: "",
    email: "",
    password: "",
  })

  return (
    <>
      <input name="username" value={authForm.username} onChange={setAuthForm} />
      <input name="password" value={authForm.password} onChange={setAuthForm} />
      <input name="email" value={authForm.email} onChange={setAuthForm} />
    </>
  )
}
```

### <span id="1.2">1.2 自定义 Counter Demo</span>

**useCounter.jsx**

```jsx
import React, { useState } from "react"

const useCounter = initState => {
  const [count, setCount] = useState(initState)

  const increment = (payload = 0) => {
    setCount(prevCnt => prevCnt + payload)
  }

  return [count, increment]
}

export default useCounter
```

**App.jsx**

```jsx
import React, { useState } from "react"
import useCounter from "./useCounter"

const App = () => {
  const [count, setCount] = useCounter(10)

  return (
    <div className="app-container">
      <p>{count}</p>
      <button onClick={setCount}>Increment</button>
    </div>
  )
}

export default App
```

## <span id="2">2. useEffect() 管理生命周期</span>

之前在 class 组件中可以利用`componentDidMount`以及其他函数来管理 state 的生命周期。现在可以利用 useEffect 来管理组件的渲染或者处理第三方 API 的请求数据。

`useEffect()`中有两个参数，第一个回调函数即要执行的操作。第二个参数为 effect 触发的依赖，当依赖发生变化时就会执行 useEffect。

Effect Dependencies `[]`可有**0 个或者多个参数**.

0 个参数 `[]` 类似于`componentDidMount`即组件第一次渲染时触发.

多个参数则只要任意一个依赖更新了则会触发 effect

```jsx
useEffect(() => {
  //action
}, [dependencies])
```

### <span id="2.1">2.1 API Data Fetching 封装 Hooks Demo</span>

如果是`POST`或者之后还需要`fetchSubject`, 返回的第二个参数也可以填入.

**useSubjectApi.js**

```jsx
import { useState, useEffect } from "react"

const useSubjectApi = subject_id => {
  const [subject, setSubject] = useState()
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(false)

  useEffect(() => {
    const fetchSubject = async () => {
      try {
        const response = await fetch(
          `https://api.bgm.tv/subject/${subject_id}?responseGroup=large`
        )
        const data = await response.json()
        setSubject(data)
      } catch (err) {
        setError(true)
      }
      setLoading(false)
    }
    fetchSubject()
  }, [URL])

  const res = {
    subject,
    loading,
    error,
  }

  return [res] // 这里只用来GET 所以只返回数据
}

export default useSubjectApi
```

**App.js**

```js
import React, { useState, useEffect } from "react"
import useSubjectApi from "./Hooks/useSubjectApi"

const App = () => {
  const [data] = useSubjectApi(51)

  if (data.error || data.loading) {
    return <p>Loading...</p>
  }

  const subject = data.subject
  return (
    <>
      <h1>{subject.name}</h1>
      <img src={subject.images.large} style={{ width: 150 }} />
    </>
  )
}

export default App
```

## <span id="3">3. useContext(): 跨组件传递状态</span>

1. 创建相关状态, 命名例如 `UserContext`, 可初始化状态或者初始化为`null`
2. 在需要的父级层面用`Provider`提供数据
3. 在需要状态的子级组件用`useContext`来作为`Consumer`接受数据

**UserContext.js**

```jsx
import { createContext } from "react"

export const UserContext = createContext(null)
```

以之前创建的`UserContext`作为提供者(**Provider**), **所有的子级组件**都可以用`useContext`来获取 Provider 的 state

**App.js**

```jsx
import React, { useState, useEffect } from "react"
import { UserContext } from "./Context/UserContext"
import Dashboard from "./Components/Dashboard"
import ProfileMenu from "./Components/ProfileMenu"

const App = () => {
  return (
    <UserContext.Provider
      value={{
        userName: "yang_tk",
        status: "online",
      }}
    >
      <>
        <ProfileMenu />
        <Dashboard />
      </>
    </UserContext.Provider>
  )
}

export default App
```

然后我们就可以在 ProfileMenu 和 Dashboard 中引用我们`UserNameContext`的 state

**ProfileMenu.js**

```jsx
import React, { useContext } from "react"
import { UserContext } from "../Context/UserContext"

const ProfileMenu = () => {
  const user = useContext(UserContext)

  return (
    <>
      <h1>This is profile menu</h1>
      <p>{user.userName}</p>
      <p>{user.status}</p>
    </>
  )
}

export default ProfileMenu
```

**Dashboard.js**

```jsx
import React, { useContext } from "react"
import { UserContext } from "../Context/UserContext"

const Dashboard = () => {
  const { userName } = useContext(UserContext)
  return (
    <>
      <h1>This is dashboard</h1>
      <p>Welcome back {userName}</p>
    </>
  )
}

export default Dashboard
```

## <span id="4">4. useReducer(): 状态管理</span>

首先来看一下 useReducer()的参数

```jsx
const [state, dispatch] = useReducer(reducer, initialState)
```

- **state** 即函数的状态值
- **dispath** 则是用来打包相关的行为
- **reducer** 即我们我们之后 Reducer 的函数
- **initialState** 为状态的初始值

**counterReducer.js**

```jsx
const counterReducer = (state, action) => {
  switch (action.type) {
    case "INCREMENT":
      return {
        ...state,
        count: state.count + 1,
      }
    case "DECREMENT":
      return {
        ...state,
        count: state.count - 1,
      }
    case "RESET":
      return {
        ...state,
        count: 0,
      }
    default:
      return state
  }
}

export default counterReducer
```

**App.js**

```jsx
import { counterReducer } from "./reducers/counterReducer"

const App = () => {
  const initState = {
    count: 0,
  }
  const [state, dispatch] = useReducer(counterReducer, initState)

  return (
    <>
      <button onClick={() => dispatch({ type: "increment" })}>Increment</button>
      <button onClick={() => dispatch({ type: "decrement" })}>Decrement</button>
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
      <p>{state.count}</p>
    </>
  )
}

export default App
```

React 最常用 Hooks 介绍: useState, useEffect, useContext, useReducer

React Hooks API

# Router 路由库

> npm install react-router-dom

## BrowserRouter

`<BrowserRouter>`作为 context provider, 其中的 children 可利用路由.

```jsx
import React from "react"
import ReactDOM from "react-dom"
import { BrowserRouter } from "react-router-dom"

import App from "./App"

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
)
```

## Link, Switch, Route

- 跳转链接, `to`为目标链接, DOM 中渲染为 `<a>`
- 默认情况下 `path`以传入到为起始, exact 则完全匹配
- `component`传入无法接收 props, 传入`children`则可以传入 props
- `Link`在哪里都可以 只是跳转链接
- `Switch`可以相像成`switch`流程控制, 即根据当前的 path 渲染相对应的组件.
- 通常写在一个单独的`Navigator.jsx`文件.

**Navigator.jsx**

```jsx
import { Link, Switch, Route } from "react-router-dom"
import Home from "./Home"
import About from "./About"

const Navigator = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route exact path="/about">
        <About />
      </Route>
    </Switch>
  )
}
```

**App.jsx**

```jsx
const App = () => {
  return (
    <div>
      {/* 共享的组件 即每个路径都渲染 一般为导航栏组件 */}
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>

      {/* 路由条件渲染组件  */}
      <Navigator />
    </div>
  )
}
```

## useParams

动态路由 分三步

1. `Route`中配置动态路由存储的变量, 之后用`useParams`提取
2. 动态生成`Link`
3. 详情页面 使用 `useParams`提取路由的变量

**Navigator.jsx**

```jsx
import { Link, Switch, Route } from "react-router-dom"

const Navigator = () => {
  return (
    <Switch>
      <Route exact path="/">
        <Home />
      </Route>
      <Route exact path="/subjects">
        <SubjectList />
      </Route>
      {/* 将路由的链接存储为subjectId */}
      <Route path="/subjects/:subjectId">
        <SubjectDetail />
      </Route>
    </Switch>
  )
}
```

**SubjectList.jsx**

```jsx
const SubjectList = () => {
  const [subject, setSubject] = useState([])

  useEffect(() => {
    // API请求获取数据
  }, [])

  return (
    <div>
      <h1>All Subjects</h1>

      {/* 动态生成 Link */}
      {subject.map(s => (
        <Link to={`/subjects/${s.id}`}>{s.title}</Link>
      ))}
    </div>
  )
}
```

**SubjectDetail.jsx**

```jsx
import { useParams } from "react-router-dom"

const SubjectDetail = () => {
  const param = useParams()
  const subjectId = param.subjectId
  // const {subjectId} = useParams 或者用Object Destruction

  useEffect(() => {
    // 根据id请求该Subject的详细信息
  })

  return <div>{/* UI */}</div>
}

export default SubjectDetail
```

## useHistory

动态跳转. 例如 longin 登录后自动跳转. 需要在函数中处理更改链接.

```jsx
import { useHistory } from "react-router-dom"

const Authentication = () => {
  const history = useHistory()

  const handleLogin = () => {
    // 账户验证...
    history.push("/") // 当前路径更改为 / 主页面
  }

  return (
    <form>
      <input placeholder="User name" />
      <input placeholde="Password" />
      <button onClick={handleLogin}>Log In</button>
    </form>
  )
}
```

## useLocation

获取当前 path 的信息如下

- `pathname`即当前的路径名, 如果需要判断当前路径名
- `search`即路径中的**Query String**, `?`之后的. 通常用于前端的 filter 或者排序展示特定的数据.

```json
{
  "pathname": "/subjects",
  "search": "?sort=date&page=1",
  "hash": "",
  "state": null,
  "key": "qd3dcd5"
}
```

```jsx
import { useLocation } from "react-router-dom"

const SubjectList = () => {
  const location = useLocation()

  return (
    <div>
      <h1>All Subjects</h1>
    </div>
  )
}
```

## Redirect

登录认证 自动跳转

对于每次`/private`路由, 如果 `isLoggedIn` true, 则渲染 `<Private />` 否则则自动跳转到 `/login`

```jsx
import { Link, Switch, Route, Redirect } from "react-router-dom"

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false)

  return (
    <div>
      <Link to="/">Home</Link>
      <Link to="/private">Private</Link>

      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route exact path="/private">
          {isLoggedIn ? <Private /> : <Redirect to="/login" />}
        </Route>
        <Route exact path="/login">
          <Login />
        </Route>
      </Switch>
    </div>
  )
}

export default App
```

如何使用第三方库 react-router 实现复杂页面切换以及动态页面链接

React Router

# Performance & Optimization

## 代码分割

> 视频推荐: [Code Splitting with React, React.lazy, and React Router v5](https://www.youtube.com/watch?v=0mQbxF-_S-M)
> 核心概念: Don't download code until that user needs it. 需要哪一块的 code 就下哪一块(chunk)

### 1. 动态导入模块 `import`

例如下面的`registerModule`文件. 只有当用户需要注册时才下载这个模块的文件.

**registerModule.js**

```js
const register = formData => {
  console.log(formData)
}

export { register }
```

**App.js**

```jsx
import("./modules/registerModule")
  .then(module => module.register(formData))
  .catch(err => console.log(err))
```

### 2. 懒加载组件 React.Lazy

> 不支持服务端渲染

需要懒加载的组件被`<Suspense>`包起来. 其中`fallback` props 为等待组件加载过程中渲染的元素, 且必须包括. (fallback 可以为 null 但必须 explicit 指定)

下面的 demo 如果用户没有浏览`本季排行`和`正在热播`页面, 这两个文件也不会下载. **只有当用户浏览时才下载该部分的 chunk**

```jsx
const Home = lazy(() => import("./pages/Home")) // import Home from './pages/Home'
const Air = lazy(() => import("./pages/Air"))
const Rank = lazy(() => import("./pages/Rank"))

const App = () => {
  return (
    <Router>
      <nav>
        <Link to="/">主页</Link>
        <Link to="/air">正在热播</Link>
        <Link to="/rank">本季排行</Link>
      </nav>

      <Suspense fallback={<Loading />}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/air" component={Air} />
          <Route exact path="/rank" component={Rank} />
        </Switch>
      </Suspense>
    </Router>
  )
}
```

## Memorization & Rendering

### 1. `React.memo()`

> **组件**的 memorization, 如果组件的 props 有更新则重渲染 否则利用上一次的

下面的演示用`<SnowBackground />`组件为一个背景渲染 1000 个粒子的雪花组件.

其中`<input />`每次文本输入框内更新则会使的`<App />`组件重新渲染. 同理`<SnowBackground />`组件由于是 child component 也会再渲染.

现在 1000 个粒子每次渲染也会卡顿以下, 不过最重要的是如果`<SnowBackground />`的`props`没有更新, 我们也**没有必要重新渲染这个组件**. 随着粒子个数的增多, 频繁的渲染自然会影响用户的体验.

```jsx
const SnowBackground = React.memo(() => {
  console.log("渲染雪花")
  return <Snow backgroundColor="#000" particles={1000} />
})

const App = () => {
  console.log("渲染 App")

  const handleChange = e => setSearch(e.target.value)

  return (
    <>
      <input type="text" value={search} onChange={handleChange} />
      <SnowBackground />
    </>
  )
}

export default App
```

### 2. `useMemo()`

> **值**的 memorization, 如果有**相关的 dependencies 更新** 则重新 call 函数取新的值.

**1. 函数时间复杂度太高 根据依赖的变更进行重计算**

`calculate()`是一个复杂度较高的函数, 但`<button>`的 toggle theme 同样使得每次渲染 App, 导致`calculate`再次渲染. 即使 toggle 和这个函数并没有联系.

在这里用`useMemo`记录这个函数的返回值, 如果`number`不变则下次还是用这个值, 否则再 recall `calculate()`函数

**2. Referential Equality 记录 reference value**

同理`themeStyle`是一个 object, 每次`<App />`的渲染也会重新渲染一个新的 themStyle object. 因为 js 中 object 为 reference value. 这一次跟上次的对比的 shallow 会导致 react 认为这个 object 不一样. 因此每次 input 更改时都会重新渲染.

```jsx
const calculate = n => {
  for (let i = 0; i < 1000000000; i++) {}
  console.log("计算")
  return n + 2
}

const App = () => {
  const [number, setNumber] = useState(0)
  const [dark, setDark] = useState(false)
  const result = useMemo(() => {
    return calculate(number)
  }, [number])

  const themeStyle = useMemo(() => {
    return {
      backgroundColor: dark ? "black" : "white",
      color: dark ? "white" : "black",
    }
  }, [dark])

  return (
    <>
      <input
        type="number"
        value={number}
        onChange={e => setNumber(parseInt(e.target.value))}
      />
      <button onClick={() => setDark(prevState => !prevState)}>
        Change Theme
      </button>
      <div style={themeStyle}>{result}</div>
    </>
  )
}

export default App
```

### 3. `useCallback()`

> **函数**的 memorization, 通常搭配 `React.memo()` 避免函数的重复渲染.

#### 1. 情景 1: `useCallback()` + `React.memo()` 解决组件重复渲染

下面的代码中, 我们的子组件`<Child />`使用`memo`来避免组件的重复渲染. 同时从父级传入一个`increment`函数来更新计数器.

**但是`memo`在这里并没有起到作用**, 我们的预期是每次点击按钮时只有父级组件重新渲染, `<Child />`有`memo`每次会对比 props 来决定是否要更新. 很明显我们的函数`increment()`并没有改变, 改变的只是`count`这个值.

这是因为 Javascript 中**函数也是对象(Object)**, 然后又因为**Referential Equality**的问题, 即使两个对象所有的属性完全相同也属于两个不同的对象. 这也就是为什么`memo`这里依旧重复渲染子组件.

然而可以想到之前我们用`useMemo`解决了**Referential Equality**的问题, 然而

- `useMemo()`返回的是**值**
  - 例如前面例子我们用`useMemo()`记忆化一个时间复杂度很高的函数返回结果
- `useCallback()`返回的是函数, 且可以接受参数的函数.
  - 我们用这个函数处理一些操作

因此这里我们用`useCallback()`和`memo`搭配来避免函数和子组件的重复渲染.

```jsx
import React, { useCallback, useState } from "react"

const Child = React.memo(props => {
  console.log("渲染子组件")

  const { increment } = props
  return (
    <>
      <button onClick={() => increment(5)}>Increment</button>
    </>
  )
})

const App = () => {
  console.log("App父级组件")
  const [count, setCount] = useState(0)

  const increment = useCallback(step => {
    setCount(prevState => prevState + step)
  }, [])

  return (
    <>
      <h1>Count: {count}</h1>
      <Child increment={increment} />
    </>
  )
}

export default App
```

随着项目规模的增大, 性能和优化也成了不可或缺的一部分. 本文主要演示一些常用的性能提升技巧

React 性能和优化

# React 异常处理

## 目录

- [Error Boundaries](#1)
- [Event Handlers](#2)

## <span id="1">1. Error Boundaries 组件</span>

> 官方文档: Only class components can be error boundaries.

在没有 Error Boundaries 之前, 如果某个组件扔出了错误, 则整个项目都会被影响.

但 Error Boundary 只有其子组件(child component tree)才会 catch 到异常, 而不会影响到其它组件的渲染.

例如下面在`App`组件中渲染的`Live2DWidget`组件(一个看板娘), 如果`Live2DWidget`由于某些原因出现异常, 我们更希望保持其他的 UI 例如`<Navbar />`而不是整个页面白掉.

```jsx
import React, { useState, useEffect, Component } from "react"

// 看板娘组件
const Live2DWidget = () => {
  const [status, setStatus] = useState("NORMAL")

  // 当status 不为NORMAL状态时 扔出异常
  if (status !== "NORMAL") {
    throw new Error("Error: 看板娘错误")
  }
  return (
    <>
      <h1> (｡･∀･)ﾉﾞ嗨</h1>
      <button onClick={() => setStatus("OFFLINE")}>点我</button> {/* 测试点击用 */}
    </>
  )
}

// 边界错误组件 可以用props来传递渲染的组件
class ErrorBoundary extends Component {
  constructor(props) {
    super(props)
    this.state = {
      error: null,
      errorInfo: null,
    }
  }

  componentDidCatch(error, errorInfo) {
    this.setState({
      error: error,
      errorInfo: errorInfo,
    })
  }

  render() {
    // 返回的UI
    if (this.state.errorInfo) {
      return this.props.display // 渲染异常展示组件
    }
    return this.props.children // 无异常则渲染原组件
  }
}

// 错误面板组件.
const ErrorModal = props => {
  return (
    <>
      <h1>{props.message}</h1>
      <button>关闭</button>
    </>
  )
}

const App = () => {
  return (
    <>
      <h1>Welcome back!</h1>
      <ErrorBoundary display={<ErrorModal message="看板娘错误" />}>
        <Live2DWidget />
      </ErrorBoundary>
    </>
  )
}

export default App
```

**总结**

1. `ErrorBoundary` 必须是 class-components
2. 如果异常则返回 fallback 的 UI
3. ErrorBoundary 只是负责 catch 且逻辑相同, 因此可以用 props 来传递 fallback 的 UI 而不是创建多个不同的 Error Boundary 组件
4. 异常只针对 child component tree, 对其他 UI 没影响

## <span id="2">2. Event Handler</span>

事件异常则可直接用`try / catch`处理.

```jsx
const App = () => {
  const [error, setError] = useState(false)

  const handleEditProfile = () => {
    try {
      // POST
    } catch (err) {
      setError(err)
      console.log(err)
    }
  }

  return (
    <>
      {error && <ErrorModal />}
      <h1>User info</h1>
      <button onClick={handleEditProfile}>Edit Profile</button>
    </>
  )
}
```

单页面应用的异常处理, React Boundary可以让我们对局部组件进行异常处理但仍保持其他组件的正常运行

React 异常处理

# ref 获取 DOM 节点

## 目录

- [useRef](#1)
- [forwardRef](#2)

## <span id="1">1. useRef</span>

`useRef`获取当前 DOM 节点, 例如用来`foucs`当前文本输入, 或者`control`媒体文件(audio)等

例如下面的 demo 获取当前媒体的 DOM 节点用以此来进行快进后退的操作.

其他的例如用户可以标注一个时间开始点或者范围, 然后下次从该位置开始播放等等.

```jsx
import React, { useRef } from "react"
import track from "../src/demo.mp3"

const App = () => {
  const audioRef = useRef(null)

  return (
    <>
      <audio src={track} ref={audioRef} controls />
      <button onClick={() => (audioRef.current.currentTime += 5)}>
        快进5秒
      </button>
      <button onClick={() => (audioRef.current.currentTime -= 5)}>
        后退5秒
      </button>
    </>
  )
}

export default App
```

**input ref**

```jsx
import React, {useState, useEffect, useRef} from 'react'

export const App = () => {
  const [name, setName] = useState('')
  const inputRef = useRef()

  const focusInput = () => {
    inputRef.current.focus()
  }

  return (
    <div>
      <input ref={inputRef} value={name} onChange={e => setName(e.target.value)}>
      <p>My name is {name}</p>
      <button onClick={focusInput}></button>
    </div>
  )
}
```

## <span id="2">2. `forwardRef` 传递 ref</span>

如果`useRef`是在父级组件声明, 且一些函数处理也在父级. 子级组件的 ref 可以通过`forwardRef`来获取.

**AudioPlayer.js**

```jsx
const AudioPlayer = (props, ref) => {
  return <audio src={props.track} ref={ref} controls />
}

export default forwardRef(AudioPlayer)
```

**App.js**

```jsx
const App = () => {
  const audioRef = useRef(null)

  return (
    <>
      <AudioPlayer track={track} ref={audioRef} />
      <button onClick={() => (audioRef.current.currentTime += 5)}>
        快进5秒
      </button>
      <button onClick={() => (audioRef.current.currentTime -= 5)}>
        后退5秒
      </button>
    </>
  )
}
```

在某些情况下有对DOM节点进行操作的需求 (音频播放控制), useRef 可以更方便的对DOM进行更改

React & DOM

Home

GoDaddy

Software Development Engineer

fabric.inc

Built large scale project with serverless compuation, collaborate with other teams to produce high quality code.

BCIT

Created multiple web porjects with peers by using html, css, and javascript. Proficient programming with C and Java.

Computer System Technology Diploma

Simon Fraser University

Achieved 3 times Dean's Honor Roll with excellent academic records. Enhanced my critical thinking by taking advance Economics courses.

Bachelor of Arts in Economics

Software Engineer

I am proficient with Adobe Illustrator, Photoshop, Xd to design elegent responsive layout. I also have a lot of music video project experience with Adobe Affects.

UI/UX Design

I am a full stack web developer with expereince of basic html, css, javascript, MySQL, MongoDB, React, and others tools to create dynamic websites.

Web Development

I am familiar with React Natvie for cross-platform development, and also have some project experience with Android and Swift ios development

Mobile Development

My person website built with Next.js and demonstrates some highlights of my previous projects. Sometimes I post leetcode notes and web development techniques. 

Overview

Live Demo

Usage

Personal Website

ProjectHub is a social networking application that brings aspirational developers together to collaborate and manage project progress.

Yang Li

Software Engineer

About Me

Skills

UI/UX Design

Web Development

Mobile Development

Experiences

Portfolio

Personal Website

Projecthub

Recent Blogs

React Basics

React Hooks 和表单应用

React Hooks API

Contact Me