來學 React 吧之六＿React 基礎總結

本文為總結所有學到的 React 內容以及一些規範程式碼的工具，如 ESlint 及 propTypes

一、這一次的總結回顧了一些 React 底層的知識、舊有版本的語法及下半場學到目前為止的內容：

1. useEffect

2. render 機制

3. useCallback: 背後是用 useRef 實作的

4. useMemo

5. memo

6. Class component

7. useContext

建議把官方文件中文或英文版本全部看過一遍，知道有哪些東西

二、利用 propTypes 驗證 props

使用的目的是為了增進程式碼品質

1. 在根目錄底下建一個 eslintrc.json 的檔案

2. 在 eslintrc.json 裡面放入以下內容：

{
// 要先繼承 react-app 裡面原本的規則
  "extends": ["react-app"],
// 新增自己的規則 react/prop-types
  "rules": {
    "react/prop-types": "warn"
  }
}

3. 存擋以後，再重新跑一次 npm run start 就會發現多了很多警告提示。

React 官方文件解釋：

https://create-react-app.dev/docs/setting-up-your-editor

現在用的規則名稱叫做 "react/prop-types"

Prevent missing props validation in a React component definition (react/prop-types)

4. 接著根據錯誤提示來整理一下內容吧

a. 首先引入 import PropTypes from "prop-types";

b. 把錯誤提示提到的 prop-types 定義在檔案內容最下面：

TodoItem.propTypes = {
  className: PropTypes.string,
  todo: PropTypes.object,
  handleDeleteTodo: PropTypes.func,
  handleTodoIsDone: PropTypes.func,
};

註： 可以更詳細的把規則定義好

// 就表示 todo 是一定要傳的參數
todo: PropTypes.object.isRequired,

又或者更精準的定義 todo 裡面的內容：

TodoItem.propTypes = {
  className: PropTypes.string,
  todo: PropTypes.shape({
    id: PropTypes.number,
    content: PropTypes.string,
    isDone: PropTypes.bool,
  }),
  handleDeleteTodo: PropTypes.func,
  handleTodoIsDone: PropTypes.func,
};

c. 定義好以後，出現了錯誤訊息：Typo in static class property declaration react/no-typos

這是因為上面的 TodoItem.propTypes 我寫成 TodoItem.PropTypes，要特別注意大小寫喔

TodoItem.propTypes = {
...
}

5. 程式碼撰寫說明：

Typechecking With PropTypes

三、補充：以 state 為中心去思考

1. 以資料為中心去思考：資料改變會需要改變畫面，就是 state

2. 資料改變不會影響畫面的，就用 useRef 存起來，例如 id；要記得用 xxx.current

3. state 有兩種：

   去思考哪些資料是必備的，那些是可以被計算出來的

   a. state: 絕對必要的元素

   b. derived state: 可以由現有的 state 組合/計算而成

4. todos 可以是一個陣列，裡面的 todo 分別是一個個物件