React 入门 Demo 实例总结

学习一门语言，貌似最基础的demo练习就是实现CRUD操作。所以决定做一个react入门总结。

首先，在实现crud操作前我们需要了解，React是如何操作修改数据，先看一个简单的demon，react是如何实现数据双向绑定（我理解的数据双向绑定）

一、简单的双向绑定

这里面有几点需要注意的：

1. constructor：如果在react中需要添加state默认值，或者绑定事件，需要写在constructor方法中。

2. super(props)：在这里调用super是因为在ES6中，子类的constructor中必须先调用super才能引用this，使用super(props)的目的是在constructor中可以使用this.props，因为我们这里Main虽然是一个子组件，但是却没有传参数给它所以不需要使用this.props调取父标签传递的参数，所以super(props)可以去掉。在什么样的情况一定需要：

比如外标签是<Main name='testName'></Main>，那么在Main组件中的constructor中就可以通过this.props.name来获取。

3. 组件创建：react创建组件有三种方法，分别是：

     1>. 无状态组件：定义方式就是通过 function XXX(){} ， 无状态组件的特点是创建速度快，不需要实例化性能损耗少，但是在无状态组件中不能使用生命周期。

     2>. ES5方式定义组件：定义方式通过 React.createClass， 特点是组件具有生命周期，创建组件需要实例化，因此会有相应的性能损耗，相比较ES6定义方式在mounting阶段多了两个钩子函数 getDefaultProps()  getInitialState() 分别用于定义props,state，位于componentWillMount阶段前发生。

     3>. ES6方式定义组件：定义方式通过extends React.Component， 特点与ES5创建方式类似不同是没有getDefaultProps()  getInitialState() 这两个钩子函数，可以通过setSate直接赋值。

4. this指向：我们在render中调用方法的时候需要通过bind绑定this的指向，因为在component中this指向的是globle。

5. setState：在react中state中的值不支持直接赋值，必须通过setState的形式提交修改，setState是异步的。

二、实现 Retrieve（查询） 操作  

这一部分定义，调用了几个方法：

changeValue：用于改变input框输入值时触发调用，通过event.target.value获取当前输入值，通过setState修改value值

queryData：用于点击查询后调取后台接口，调用时绑定this指向，通过this.state.value获取value调用异步方法向后台请求（注：getList是封装后的axio数据请求）

componentDidMount：react生命周期，Mounting阶段在render渲染前调用，因为这里的的<Table></Table>是一个表格组件，我期望在页面刷新的同时加载出表格初始数据，因此需要在dom渲染前完成调用。

（注意：react是JSX语法规则，组件创建时会出现class字段，所以在标签使用中它用className代替html中的class属性）

（注：因为react是JSX语法规则，所以如果要实现类似vue中的v-for指令需要结合数组map方法，如下：

react在列表循环过程中必须有特殊属性key，且唯一）

三、React生命周期

    

       react生命周期（组件从创建到消失的整个过程）分为三个阶段  mounting（实例化期）     updating（存在期）    unmounting（销毁期）

1.  实例化阶段（mounting）

mounting阶段就是component被render解析生成对应的DOM节点，并被插入浏览器的DOM结构的一个过程（组件从无到有的过程）。

(注：getDefaultProps()，getDefaultState()是react ES5版本的，在reactES6版本中已经被废弃，不建议使用，是用于初始化定义state，props的默认值)

1>. componentWillMount

该方法在首次渲染（调用render方法）之前调用，在这一阶段组件还未开始实例化，类似于vue生命周期中的created

项目应用：用于做一些组件初始化前需要调用的数据处理，也可以在这一阶段触发loading事件。

2>. componentDidMount

这个方法在首次渲染（调用render方法）之后调用，在这一阶段组件已经实例化完成，类似于vue生命周期中的mounted

应用：dom加载完成后，发起axios请求，拿回数据，结束loading事件。

2.  存在期（updating）

一个mounted的React Components被重新render的过程

（只有state,props确实被改变了react才会改变对应的Dom结构，这句话）

1>. componentWillReceiveProps

当一个mounted要接收新的props时会被调用,函数参数就是将要接收的props，应用例如，子组件表格从父组件获取props，并在每次props更新后随之更新表格数据。

2>. shouldComponentUpdate

是否有必要跟新dom结构，参数是新的props对象，和新的state对象，分别对比this.props和this.state返回true为跟新，返回false为不更新

3>. componentWillUpdate

如果shouldComponentUpdate返回为true则调用，组件更新前调用，首次render不调用

4>. componentDidUpdate

componentWillUpdate之后执行，组件重新render后调用，首次render不调用

3. 销毁期（unmounted）

一个mounted的React Components对应的DOM节点被从Dom节点移除的过程

componentWillUnmount

component销毁阶段，类似于vue中的destroyed

应用：释放内存资源的过程