使用 React 完成一個 TODOList
用 React 完成一個 todolist
嘗試一下之前沒有接觸過的框架： React。
項目代碼鏈接：GitHub
項目預覽鏈接：Git Pages
測試賬號：123
測試密碼：456
通過使用 react 完成一個 TODOList，具有以下功能：
1.可以註冊並登錄，PC和移動端都可以使用
載入超時，點擊重試
2.可以添加/刪除 todo 選項
3.標記 todo 已完成
4.展示 todo 列表
項目初始化
1.首先全局安裝 react：cnpm i create-react-app
2.進入項目目錄下輸入：create-react-app react-todolist
(熟悉 vue-cli 的話他的作用和 vue init webpack xxx是一樣的)
3.進入項目目錄，運行 cnpm start，然後他就會自動打開 http://localhost:3000/
一個 react 項目就初步構建並可以運行了：
項目目錄
來看看運行命令後我們得到了一個什麼樣的項目骨架：
.
│ .gitignore
│ package-lock.json
│ package.json // 用於記錄項目及引用庫信息
│ README.md
├─public // 用於存放靜態資源
│ favicon.ico
│ index.html
│ manifest.json
│
└─src // 用於存放所有源代碼
App.css
App.js
App.test.js
index.css
index.js // 項目主入口
logo.svg
serviceWorker.js
在 package.json 中還配置了相關的 npm 腳本：
"scripts": {
"start": "react-scripts start", // 執行 npm start ,相當於 vue-cli 中的 npm run dev，webpack 熱啟動
"build": "react-scripts build", // 執行 npm build,相當於 vue-cli 中的 npm run build,打包構建文件
},
執行 npm build 後，項目會生成一個 build 文件夾(相當於 vue-cli build 後生成的 dist，存放用於發布的內容)：
build
├── asset-manifest.json
├── favicon.ico
├── index.html
└── static
├── css
│ ├── main.9a0fe4f1.css
│ └── main.9a0fe4f1.css.map
├── js
│ ├── main.19e75c9e.js
│ └── main.19e75c9e.js.map
└── media
└── logo.5d5d9eef.svg
Hello World
在項目目錄下的 src/index.js 文件中修改：
// before
ReactDOM.render(<App />, document.getElementById(root));
// after
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById(root)
);
再看看 http://localhost:3000/ ，我們已經用 react 成功寫出了「Hello World」。
在 public/index.html 中，有一個 id 為 「root」 的 div 節點，代碼的作用，就是將 h1 標籤及其內容插入到這個節點中，所以我們才能看到「Hello World」
部署
如果要把 react 項目部署到 GitHub Pages 的話，需要：
1.把 .gitignore 里的 build 一行刪除
2.在 package.json 中添加： "homepage": "https://no1harm.github.io/react-todolist/build" （後面的值為 gitpages 鏈接地址 + /build）
3.運行 cnpm build
4.重新 push 上 GitHub，可以看到項目的正常預覽了。
入門 / 熟悉基本概念
React 入門教程
- 把組件寫入單獨的文件：commit
- 利用 props 傳遞數據：commit
- state: commit
注意：
setState不會立刻改變React組件中state的值
函數式的setState用法，如：
function increment(state, props) {
return {count: state.count + 1};
}
function incrementMultiple() {
this.setState(increment);
this.setState(increment);
this.setState(increment);
}
>同樣是把狀態中的count加1，但是狀態的來源不是this.state，而是輸入參數state
具體可參見這裡：setState
- 改變 state:commit
- 生命周期（Lifecycle）
React 的生命周期包括三個階段：mount（掛載）、update（更新）和 unmount（移除）
mount：第一次讓組件出現在頁面中的過程。這個過程的關鍵就是 render 方法。React 會將 render 的返回值（一般是虛擬 DOM，也可以是 DOM 或者 null）插入到頁面中。
其中的鉤子函數：
constructor()
componentWillMount()
render()
componentDidMount()
update：mount 之後，如果數據有任何變動，就會來到 update 過程
其中鉤子函數：
componentWillReceiveProps(nextProps) - 我要讀取 props 啦！
shouldComponentUpdate(nextProps, nextState) - 請問要不要更新組件？true / false
componentWillUpdate() - 我要更新組件啦！
render() - 更新！
componentDidUpdate() - 更新完畢啦！
unmount:當一個組件將要從頁面中移除時，會進入 unmount 過程
其中鉤子函數：
componentWillUnmount()
生命周期： commit
- setState
嘗試生命周期各個階段 setState
在對應報錯信息，逐漸刪除在生命周期鉤子中的 setState 後，得出結論：
一般只在這幾個鉤子里 setState：
componentWillMount
componentDidMount
componentWillReceiveProps
在哪裡 setState
antd
問題：使用 antd 中的 Form .onSubmit 方法無效:
點擊提交按鈕，如果沒有執行 回調函數，原因是按鈕需要包含在 form 表單內並且設置 htmlType={「submit」}。
點擊提交未報錯設置的 rules 未進行判斷是因為在 handleSubmit 內要設置 form.validateFields 進行域名校驗。
因為之前使用的框架是 Vue，對 react 遠談不上了解，可能是先入為主的原因，個人還是比較喜歡 Vue（因為對新人比較友好，文檔也很全面。寫得順手了，用起 react 來竟然是有點無所適從…
不過這個 TODOList 總算是完成了，也算是對 react 有了一點粗淺的認知吧。
推薦閱讀：
