使用 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，可以看到项目的正常预览了。
入门 / 熟悉基本概念
注意：
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
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：
componentWillMount
componentDidMount
componentWillReceiveProps
antd
问题：使用 antd 中的 Form .onSubmit 方法无效:
点击提交按钮，如果没有执行 回调函数，原因是按钮需要包含在 form 表单内并且设置 htmlType={“submit”}。
点击提交未报错设置的 rules 未进行判断是因为在 handleSubmit 内要设置 form.validateFields 进行域名校验。
因为之前使用的框架是 Vue，对 react 远谈不上了解，可能是先入为主的原因，个人还是比较喜欢 Vue（因为对新人比较友好，文档也很全面。写得顺手了，用起 react 来竟然是有点无所适从…
不过这个 TODOList 总算是完成了，也算是对 react 有了一点粗浅的认知吧。
