vue和react
1. 数据渲染 vue是使用template模板进行渲染,react使用的是jsx语法,对组件进行渲染 vue模板中使用{{ this.data }} 双括号包着变量,代表变量表示的值。外面那层表示需要通过js进行解析,里面那层表示一个对象,即变量是通过对象形式定义的。 ?<h1>site :?{{site}}</h1> 接下来我们看看如何定义数据对象。 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中进行定义。
<HeadBar @toggleMenu="toggleMenu"></HeadBar>
????methods: {
????????toggleMenu() {
????????????this.setNavCollapsed(!this.navCollapsed)
????}
? ?react中绑定的方法通过 ?组件中onClick={this.methodName}.若使用extends方法创建的组件,并且使用es6的箭头语法则不需要绑定this上下文,如果是普通方法定义,则需要bind绑定this的上下文 如使用createClass创建组件的话也不需要绑定this
? ?<span onClick={this.logout}>退出登录</span>
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,但它有以下优点:
? 5.值传递 vue父组件传递给子组件的值,在子组件props[]中定义获取,在模板中直接使用即可。 ? 子组件想要改变父组件的值,需要通过父组件绑定方法
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定义方法对其进行修改。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |