# 基础

## 目录

- [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进行更改