这篇文章，主要是为长期vue开发者，新接触react的前端开发人员，帮助你们快速了解两个框架之间的语法区别，能够更快的入手react框架，了解这些两个框架的相同点以及不同点，可帮助我们处理日常工作中很多看起来简单但是对新手来说很棘手的问题。如果你也是新入手react,那么可以接着往下看哦，如果有react大佬看到此篇文章，也欢迎提出意见或者建议！
注：react采用新的语法—JSX，允许开发者在JavaScript中书写HTML

1、生命周期

1.1 constructor() (created)

constructor()中完成了react数据的初始化，它接受两个参数：props和context,当想在函数内部使用这两个参数时，需要使用super()传入这两个参数
注意：只要使用了constructor()就必须写super(),否则会导致this指向问题

    constructor(props,context){
      super(props,context)
    }

1.2 componentWillMount() （beforeMounted）

componentWillMount()一般用的比较少，它更多的实在服务端渲染时使用。它代表的过程是组件已经经历了constructor()初始化数据后，但是还未渲染DOM时

1.3 componentDidMount() (mounted）

组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染

1.4 componentWillUnmount ()（beforeDestoryed）

在此处完成组件的卸载和数据的销毁
1、clear你在组件中所有的setInterval,setTimeOut
2、一处所有组件中监听的removeEventListener

2、更新过程

2.1 componentWillReceiveProps（props）

render()

render函数回插入jsx生成dom结构，react会生成一份虚拟Dom树，在每一次组件更新时，在此react会通过其diff算法比较更新前后的DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染

3、react常见问题：

3.1 路由跳转

   vue:   this.$router.push('/error')
   react:   this.props.history.push('/error')

注意：
在vue中子组件可直接使用this.$router.push('/error')跳转
而在react中子组件中使用路由跳转，需要作如下处理：

1、import { withRouter } from 'react-router-dom';
2、this.props.history.push('/error')
3、export default withRouter(Nav)

3.2 动态渲染数据

    vue:   <div v-if="show">你好啊</div>
   react:  { show ? <div>你好</div>  : "" }

如上是我举得简单例子，在动态渲染数据这块，vue做的比react好，react就麻烦一些
以下是我在react中动态渲染数据的几种写法，可供参考：

3.3 列表渲染

 例如渲染数据 let list = [1,2,3,4]

  vue: <div v-for="(item,index) in list" :key="index">{{item}}</div>
  react: {
                list.map(item=>{
                      return (
                            <div key={item.toString()}>{{item}}</div>
                          )
                })
         }

3.4 阻止冒泡

 vue:   <div @click.stop="getData()">获取数据</div>
react:  <div onClick={(e)=>{
            e.stopPropagation()
         }}>获取数据</div>

本文章会持续更新...