vue、react 对比学习

一、前提

我用的比较多的是vue，虽然react是和vue差不多时间开始学的，但是使用频率较少，所以，最近想把react全家桶温习一次。我觉得 对比学习 是一种非常有效的学习方法，能从已知知识延伸到新知识，重点突出异同。这里我只列举了一些vue中我常用的语法，然后用react来实现。更多具体的东西还是参考 官方文档 比较好。

二、vue 、react 对比           

                   

1. 文件结构

   • 在vue单文件组件中，划分为3部分：template、script、style 。template放模板，script放 js 代码，style放css
   • 在react中 js 文件和 css 文件是分开存放的

     

     

2. 更新组件状态

   1. vue中  直接 this.XXX = AAA 即可
   2. react中需要 this.setState({ XXX: AAA }) ，否则无法更新状态

3. {{ }} <----> {  }

   1. vue中想在html里插入 内容需要用 {{ }} 双大括号                                            
   2. 在react 中则用 { } 一个大括号                                                           

4. v-bind(:) <----> {  }

   1. 在vue中，要绑定属性、绑定prop的话需要用 v-bind (缩写是 ： 一个冒号)     
   2. 在react中 还是使用 {  }                                                         

5. v-on(@) <----> onChange...

   1. 在vue中，要绑定事件要用 v-bind （缩写 @）。例如点击事件
   2. react里则使用类似dom里的事件名，但为驼峰写法。例如 onChange 

6. v-model <----> onChange 和 value  

   1. v-model 直接实现了双向绑定                                                         
   2.  react因为是单向数据流，所以需要自己实现双向绑定 

7. v-for  <----> map

  1. v-for 实现循环

        

  2. react 可以用 map实现