用 React 完成一个 todolist

尝试一下之前没有接触过的框架： React。

项目代码链接：GitHub

项目预览链接：Git Pages

测试账号：123

测试密码：456

通过使用 react 完成一个 TODOList，具有以下功能：

1.可以注册并登录，PC和移动端都可以使用

注册登录

2.可以添加/删除 todo 选项

添加/删除

3.标记 todo 已完成

selected

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 项目就初步构建并可以运行了：

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」。

helloworld

在 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()

mount

update：mount 之后，如果数据有任何变动，就会来到 update 过程

其中钩子函数：

componentWillReceiveProps(nextProps) - 我要读取 props 啦！

shouldComponentUpdate(nextProps, nextState) - 请问要不要更新组件？true / false

componentWillUpdate() - 我要更新组件啦！

render() - 更新！

componentDidUpdate() - 更新完毕啦！

unmount:当一个组件将要从页面中移除时，会进入 unmount 过程

其中钩子函数：

componentWillUnmount()

生命周期钩子函数

生命周期： commit

setState

尝试生命周期各个阶段 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 有了一点粗浅的认知吧。

使用 React 完成一个 TODOList