Vue和React的区别_怎么看本地用的是vue还是react

Vue和React的主要区别

1.作者不同

vue是尤雨溪的个人项目

react 是Facebook团队完成的项目
1
2
3

2.生命周期

vue:

  beforeCreate                                         
    1. 组件创建前触发，目的是为了组件的生命周期 和 组件中的事件做准备
    2. 数据没有获得，真实dom也没有渲染出来
    3. 可以进行数据请求，提供了一次数据修改的机会
    4. 执行一次

    created  
    1. 组件创建结束
    2. 数据得到了，真实dom没有渲染出来
    3. 可以进行数据请求，提供了一次数据修改的机会
    4. 执行了一次

    beforeMount 
    1. 组件挂载前 
    2. 任务： 判断el   判断 template
        如果el没有，那么我们需要手动挂载，如果有，那么判断template
        如果template有，那么进行render函数
        如果template没有，那么通过 outerHTML 手动书写模板
    3. 数据可以获得，但是真实dom还没有渲染
    4. 可以进行数据请求，也提供了一次数据修改的机会
    5. 执行一次

    mounted 
    1. 组件挂载结束
    2. 数据获得了，真实dom也获得了
    3. 可以进行数据请求，也就可以修改数据
    4. 执行了一次
    5. 可以进行真实dom的操作了（ 可以进行第三方库的实例化了 ）

     2: 运行中( 触发条件：数据更新 )
    beforeUpdate
    1. 更新前
    2. 重新渲染 VDOM , 然后通过diff算法比较两次vdom,生成patch 补丁对象
    3. 这个钩子函数更多的是内部进行一些操作，我们就不在多干预了
    4. 可以触发多次

    updated
    1. 更新结束
    2. 真实dom得到了，数据也得到了（ 更新后的 ）
    3. 动态数据获取（  第三方库实例化  ）

    beforeDestory
    组件销毁前调用

    destoryed
    组件销毁后调用

   react( 常用的 )：
   
   componentWillMount：组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，
   此时可以修改state。（建议用componentDidMount替代） 

   render：react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。
   render()`方法必须是一个纯函数，他不应该改变`state`，也不能直接和浏览器进行交互，
   应该将事件放在其他生命周期函数中。 
   
   componentWillUndate:组件更新结束之前执行，在初始化render不执行。

   componentDidUndate:组件更新结束之后执行，在初始化render不执行

   componentDidMount:组件渲染之后调用，只调用一次。

   componentWillReceiveProps：组件初始化时不调用，组件接受新的props时调用。

   componentWillUnmount：组件将要卸载时调用，一些事件监听和定时器需要在此时清除。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

3.模板和 JSX

  react：
  HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，
  它允许 HTML 与 JavaScript 的混写

  vue:
  Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
  Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
1
2
3
4
5
6
7

4.状态管理机制

react：
redux(最主要使用)
哪里需要使用redux:
1:用户使用的方式复杂
2.不同身份的用户有不同的使用方式( 例如用户和管理员 )
3.多个用户之间可以协作
4.与服务器有大量交互或者使用WebSocket
5.View(视图层)要从多个来源获取数据


vue:
 vuex:
 主要应用于中大型项目
1
2
3
4
5
6
7
8
9
10
11
12
13

5.组件传值方式

 react:

 父到子:父组件自定义属性，子通过props来获取父的属性值

 子到父:父组件将自己的某个方法传递给子组件，子组件通过`this.props`接收到父组件的方法，
 并通过回调的方式来实现

 非父子组件通信：ref链

 跨级组件通信: 层层组件传递props/context


vue:
父到子：通过props属性实现

子到父：通过自定义事件实现

同级组件通信
1.ref链
2.bus事件总线
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20