使用 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 有了一点粗浅的认知吧。