vue和react

1. 数据渲染

vue是使用template模板进行渲染，react使用的是jsx语法，对组件进行渲染

　　vue模板中使用{{ this.data }} 双括号包着变量，代表变量表示的值。外面那层表示需要通过js进行解析，里面那层表示一个对象，即变量是通过对象形式定义的。

　　接下来我们看看如何定义数据对象。

　　data 用于定义属性，实例中有三个属性分别为：site、url、alexa。

　　methods 用于定义的函数，可以通过 return 来返回函数值。

　　{{ }} 用于输出对象属性和函数返回值。

<div id="vue_det">     <h1>site : {{site}}</h1>     <h1>url : {{url}}</h1>     <h1>{{details()}}</h1> </div>

　　react渲染的值是通过单大括号{ this.data }表示的。本来就是js语法进行渲染的，所以直接包着一层表示变量（对象形式）进行渲染。

　　<Menu.Item key="setting:1">你好 - {this.props.user.userName}</Menu.Item>

2.vue中

因为变量是在data中定义的或者是从父组件通过props传递过来的

2.方法绑定

vue中绑定的方法通过模板中@click="methodName"，在methods中进行定义。

methods: {

toggleMenu() {

this.setNavCollapsed(!this.navCollapsed)

}

react中绑定的方法通过组件中onClick={this.methodName}.若使用extends方法创建的组件，并且使用es6的箭头语法则不需要绑定this上下文，如果是普通方法定义，则需要bind绑定this的上下文

　　如使用createClass创建组件的话也不需要绑定this

　　screenFull = () => {

　　if (screenfull.enabled) {

　　screenfull.request();

　　　　}

};

3.改变渲染的方法

vue 是根据data的里面的值，当data中定义的变量代表的值或者从父组件传递过来的值props改变的时候，组件会重新的被渲染

react是根据state中的值，当state中定义的变量代表的值或者从父组件中传递过来的值props，或者从管理数据的redux传递给组件state的值（相当于state的值）发生改变的时候，组件会重新被渲染

4.组件渲染方法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

react使用的是jsx语法

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX，但它有以下优点：

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。

5.值传递

vue父组件传递给子组件的值，在子组件props[]中定义获取，在模板中直接使用即可。

子组件想要改变父组件的值，需要通过父组件绑定方法

父组件---使用 $on(eventName) 监听事件
子组件---使用 $emit(eventName) 触发事件

子组件template
<span v-if="item.IsEnable && biddingType === 2" class="success" @click="confim(item)">确定中标</span>
子组件方法
    methods: {
        confim(item) {
            this.$emit('confimBid', 'bid', item)
        }
    }

父组件template
<biddingStaff  @confimBid="showDialog" :biddingType="biddingDetailObj.BiddingType"></biddingStaff>

父子间方法
        showDialog(type, item) {
            this.optype = type
            if (item) {
                this.confirmInfo = item
            } else {
                this.confirmInfo = this.biddingDetailObj
            }
            this.showConfimDialog = true
        },

react父组件传递给子组件的是，在子组件中通过this.props.data使用

子组件传递给父组件的值也是在子组件通过绑定一个方法，在父组件中直接使用

6.生命周期

vue 在created(不能操作DOM el还没有被挂在) / mounted 请求数据

react在 componentMounted 请求数据

6.管理数据

vue是通过vuex管理数据的。 https://www.cnblogs.com/first-time/p/6815036.html

各个类型的 API各司其职，mutation 只管存，你给我（dispatch）我就存；action只管中间处理，处理完我就给你，你怎么存我不管；Getter 我只管取，我不改的。　action放在了 methods 里面，说明我们应该把它当成函数来用（讲道理，钩子函数也应该可以的） mutation是写在store里面的，这说明，它就是个半成品，中间量，我们不应该在外面去操作它。getter写在了 computed 里面，这说明虽然 getter我们写的是函数，但是我们应该把它当成计算属性来用。

state

mutation

action

getter

react是通过redux管理数据的。https://www.cnblogs.com/xianyulaodi/p/5621959.html

state

action :actionType actions

reducer

容器组件通过

const mapStateToProps = (state) => {
    return {
        ...state.taskTplReducer
    };
}

const mapDispatchToProps = (dispatch) =>{
    return { actions: bindActionCreators(actions, dispatch) };
}

export default connect(mapStateToProps, mapDispatchToProps)(TaskTplView);

redux的执行过程：定义actionType，action，reducer，组件

action中请求数据的方法，请求之后通过type值传递给reducer，在reducer中通过type拿到值，通过state传递到容器组件或者组件的state。容器组件通过mapStateToProps，将redux的state值传递给组件的props。通mapDispatchToProps映射到组件中，在组件中直接通过this.props.action.methodName()调用，this.props.data进行使用。

如果是想要修改redux中props的值，只能通过action定义方法对其进行修改。

猜你喜欢