React的增删功能-todoList实现

React作为当前最火的框架之一，学习和使用已有一段时间，在这里记录下学习React的心得，纯属个人观点。在学习React之前，了解过Vue,和angular，个人比较喜欢React的开发模式，之前的开发用的比较多jquery的模板（artTemplate,hogan）之类的，和React中的jsx原理类似，因此被吸引。

一、 React的准备工作

学习react有很多途径，可以看官网，可以看博客，可以看视频，这里比较推荐的做法是先看官网，了解基本知识后，做一些例子。然后再学习相关依赖，如Redux、Mobx之类的状态管理工具，之后的文章中会进一步讲解React相关依赖，有：Redux、Mobx、Redux-thunk、Redux-saga、immutable、react-transition-group、antd、styled-components、prop-types等。
开始学习React需要一定的开发基础，如：Es6、webpack等。我学习React使用的是create-react-app脚手架，

安装：`npm install -g create-react-app`

创建React应用： `create-react-app my-app`

$ create-react-app my-app
Creating a new React app in G:\GitHub\React-demo\my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

1、主要依赖react,react-dom,react-scripts

2、目录结构

3、运行 `npm start`

4、打包 `npm run build`

二、正式开发

1、使用react做一个输入框，点击提交在下面列表展示，点击对应的列表项，删除该项，如下：

2、项目的数据结构，首先分析需求，一个input框，一个button，一个列表。可以把input和button看成一个组件，列表看成一个组件。在state中的数据结构可以设置为：

    //state的数据结构
    this.state = {
        inputValue: '', //用于存放input的值
        list: []        //存放列表的值
    }

input框功能实现，原理：input框绑定onChange事件，每当输入字符时，改变this.state.inputValue的值，React中当state或props中的值改变，render函数会重新执行。实现如下：

 //方法一：改变this.state.inputValue值，通过事件返回的e.target.value,获取输入框中的值
 
 handleChange (e) {
     //同步setState
     this.setState({
         inputValue: e.target.value
     });
 }

 //方法二：在input框上设置ref属性，ref表示对组件真正实例的引用。
 //设置ref={(input) => {this.input = input}}表示，将当前input框中的value值，
 //绑定到this上，在handleChange方法中，便可以直接取input的值：this.input.value
  {this.input = input}}
 />
 handleChange (e) {
     const value = this.input.value;
     //异步setState，可以为异步方法，带有一个参数prevState,即为上一步state的内容，同时带有回调函数
     this.setState(() => ({
         inputValue: value
     }), () => {
         console.log('赋值完成！');
     });
 }

提交功能实现，原理：很容易就想到，当点击提交的时候，将input框中的值push到this.state.list即可。

 
 //提交添加UI列表
 handleSubmit () {
     this.setState((prevState) => ({
         list: [...prevState.list, prevState.inputValue],
         inputValue: ''
     }), () => { //回调函数
         console.log(this.ul.querySelectorAll('li').length);
     });
 }

将list的值在页面展示出来,可以通过map方法，循环li。

 this.state.list.map((item, index) => {
     return {item}
 })
 /*
     注：react中循环的时候，必须在每一项加上key的属性，不然控制台会报错，
     原因是：diff算法在循环的时候,会去匹配对应的key值。此处用index作为key值是不合理的做法，key值应该是唯一的，
     diff算法后面会详细讲到。
 */

点击li，删除当前li,原理：每一个li都有对应的index，点击li时，获取index，在list找到对应下标，然后delete即可。

 this.state.list.map((item, index) => {
     return {item}
 })
 //删除当前点击item
 handleDelete (index) {
     this.setState((prevState) => {
         const list = [...prevState.list];
         list.splice(index, 1);
         return {
             list: list
         }
     });
 }

三、总结

React的原理

    1. state改变
    2. jsx模板
    3. 数据 + 模板 生成虚拟dom（虚拟DOM就是一个js对象，用来描述真实的DOM）（损耗了性能）
    4. 用虚拟DOM结构生成真实的DOM，来显示
    5. state改变
    6. 数据 + 模板 生成新的虚拟DOM（极大的提升了性能）
    7. 比较原始虚拟DOM和新的虚拟DOM的区别，找到区别（diff算法）
    8. 直接操作DOM，改变不同之处

Diff算法

    1. 同层对比（变化前和变化后，虚拟DOM同一级进行对比）
    2. 列表（每个循环的列表都需要一个唯一的key，用于做对比，节约性能，因此用循环的index作为key是不靠谱的做法，浪费性能）
    3. 组件（一个React的APP有多个组件进行组成，diff对比组件的class）
    4. 绘制
        1). 当调用setState时，React将其标记为Dirty，然后事件轮询介绍时，React会查询dirty组件并重新绘制
        2). 当组件的setState方法被调用，组件会重新绘制它的子组件
    5. react事件委托（通过事件冒泡至document处，合成对象(SyntheticEvent)，当触发事件时，通过dispatchEvent分发函数分发）

生命周期函数（在某一时刻组件会自动执行调用的函数）

    1. initialization (constructor) 初始化
    2. Mounting (组件第一次挂载的流程)
        1). componentWillMount 在组件即将被挂载到页面的时刻执行，即render前执行
        2). render
        3). componentDidMount 在组件挂载到页面的时刻执行
    3. Updation
        1). componentWillReceiveProps 从父组件接收参数并且这个组件在之前就存在父组件中 （props）
        2). shouldComponentUpdate 在更新前调用，如果该组件返回true,往下执行，否则停止
        3). componentWillUpdate 在更新前调用，shouldComponentUpdate返回true之后
        4). render
        5). componentDidUpdate 更新之后调用
    4. Unmounting
        1). componentWillUnmount 即将被页面移除的时候执行

结束

本文使用react做了一个添加删除的功能，代码已放在GitHub上，有兴趣请狠狠的点击这儿。