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
应用：释放内存资源的过程
以上是 React 入门 Demo 实例总结 的全部内容， 来源链接： utcz.com/z/383007.html
