vue、react对比
一、父子通信
1. 父组件通过props向子组件传值
vue:
父组件
<blog-post :title="My journey with Vue"></blog-post>
子组件接收
Vue.component('blog-post', {
props: {
title: {
type: String,
default: ''
}
},
template: '<h3>{{ title }}</h3>'
})
react:
父组件：
<StrategyTable
maxLength={2}
styleName="strategy-able"
onRowClick={this.onRowClick}
delayTime={500}
isRefresh={false}
/>
子组件：
import PropTypes from 'prop-types';
static propTypes = {
maxLength: PropTypes.number,
onRowClick: PropTypes.func,
delayTime: PropTypes.number,
isRefresh: PropTypes.bool,
}
static defaultProps = {
maxLength: -1,
onRowClick: () => {},
delayTime: 0,
isRefresh: true,
}
constructor(props) {
super(props);
this.state = {
maxLength: this.props.maxLength // 子组件通过 this.props.属性名 来获取父组件传来的参数
};
}
2. 子组件向父组件传参
vue:
子组件
<button @click="toParent">
Enlarge text
</button>
methods: {
toParent() {
this.$emit('enlarge-text', '我是传过来的值')
}
}
父组件
<blog-post
...
@enlarge-text="changeTxt"
></blog-post>
methods: {
changeTxt(val) {
//do something
console.log(val);
}
}
react：利用回调函数参数获取子组件传来的值。
父组件：
import React, { Component } from 'react';
export default class ListWrap extends Component {
getSunData = (val) => {
this.text = val;
}
render() {
return (
<div>
<sunComponent onRowClick={this.getSunData}/>
</div>
);
}
}
子组件：
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class sunComponent extends Component {
static propTypes = {
onRowClick: PropTypes.func,
}
static defaultProps = {
onRowClick: () => {},
}
toParentEvt() {
this.props.onRowClick('子组件信息')
}
render() {
return (
<div>
<ul>
<li onClick={this.toParentEvt}>我是子组件信息</li>
</ul>
</div>
);
}
}
3. 父组件访问子组件属性
vue:
父组件
<recodeList ref="recordChild"></recodeList>
this.$refs.recordChild.属性
this.$refs.recordChild.方法
react:
父组件：
import React, { Component } from 'react';
export default class ListWrap extends Component {
getChild= (ref) => {
this.childRef = ref;
}
render() {
return (
<div getChildRef={this.getChild}>
<sunComponent />
</div>
);
}
}
子组件：
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class sunComponent extends Component {
static propTypes = {
getChildRef: PropTypes.func,
}
static defaultProps = {
getChildRef: () => {},
}
componentDidMount() {
this.props.getChildRef(this)
}
4. react使用context实现跨级组件传值
context是一个全局变量,像是一个大容器,在任何地方都可以访问到,我们可以把要通信的信息放在context上,然后在其他组件中可以随意取到;
但是React官方不建议使用大量context,尽管他可以减少逐层传递,但是当组件结构复杂的时候,我们并不知道context是从哪里传过来的;而且context是一个全局变量,全局变量正是导致应用走向混乱的罪魁祸首.
对于父组件，也就是Context生产者，需要通过一个静态属性childContextTypes声明提供给子组件的Context对象的属性，并实现一个实例getChildContext方法，返回一个代表Context的纯对象 (plain object) 。
import React from 'react'
import PropTypes from 'prop-types'
class MiddleComponent extends React.Component {
render () {
return <ChildComponent />
}
}
class ParentComponent extends React.Component {
// 声明Context对象属性
static childContextTypes = {
propA: PropTypes.string,
methodA: PropTypes.func
}
// 返回Context对象，方法名是约定好的
getChildContext () {
return {
propA: 'propA',
methodA: () => 'methodA'
}
}
render () {
return <MiddleComponent />
}
}
而对于Context的消费者，通过如下方式访问父组件提供的Context。
import React from 'react'
import PropTypes from 'prop-types'
class ChildComponent extends React.Component {
// 声明需要使用的Context属性
static contextTypes = {
propA: PropTypes.string,
}
render () {
const {
propA,
methodA
} = this.context
console.log(`context.propA = ${propA}`) // context.propA = propA
console.log(`context.methodA = ${methodA}`) // context.methodA = undefined
return ...
}
}
子组件需要通过一个静态属性contextTypes声明后，才能访问父组件Context对象的属性，否则，即使属性名没写错，拿到的对象也是undefined。
几个可以直接获取Context的地方:
实际上，除了实例的context属性(this.context)，React组件还有很多个地方可以直接访问父组件提供的Context。比如构造方法：
constructor(props, context)
比如生命周期：
componentWillReceiveProps(nextProps, nextContext)
shouldComponentUpdate(nextProps, nextState, nextContext)
componetWillUpdate(nextProps, nextState, nextContext)
二、生命周期
vue:
1. beforeCreate
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
2. created
在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前尚不可用。
3. beforeMount
在挂载开始之前被调用
4. mounted
实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。
5. beforeUpdate
数据更新时调用，发生在虚拟 DOM 打补丁之前。
6. updated
数据更新后调用，发生在虚拟 DOM 打补丁之后。在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
注意 updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick：
updated: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been re-rendered
})
}
7. activated
被 keep-alive 缓存的组件激活时调用。
8. deactivated
被 keep-alive 缓存的组件停用时调用。
9. beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。
10. destroyed
实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
11. errorCaptured (2.5.0+ 新增)
类型：(err: Error, vm: Component, info: string) => ?boolean
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
beforeRouteEnter(to, from, next)：进入路由之前执行的函数
beforeRouteLeave(to, from, next)：离开路由之前执行的函数
react:
组件的生命周期可分成三个状态：
- Mounting：已插入真实 DOM
- Updating：正在被重新渲染
- Unmounting：已移出真实 DOM
生命周期的方法有：
- componentWillMount： 在渲染前调用,在客户端也在服务端。
- componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
- componentWillReceiveProps： 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
- shouldComponentUpdate ： 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。 - componentWillUpdate： 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
- componentDidUpdate： 在组件完成更新后立即调用。在初始化时不会被调用。
- componentWillUnmount： 在组件从 DOM 中移除之前立刻被调用。
三、路由
Vue：
路由模式： history、hash(默认)
路由跳转：
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<router-link :to="{ path: '/abc'}" replace></router-link>
router.push(location, onComplete?, onAbort?)
router.push(location).then(onComplete).catch(onAbort)
router.replace(location, onComplete?, onAbort?)
router.replace(location).then(onComplete).catch(onAbort)
router.go(n)
router.back()
router.forward()
参数：
{ name: xxx, params: {...}, query: {..} }或者{ path: xxx, query: {..} }
获取参数：this.$route.params、 this.$route.query
生命周期：
router.beforeEach((to, from, next) => {
/* 必须调用 `next` */
})
router.beforeResolve((to, from, next) => {
/* 必须调用 `next` */
})
router.afterEach((to, from) => {})
react:
路由模式： browserHistory、hashHistory、createMemoryHistory
路由跳转：
<Link to={`/users/${user.id}`} activeClassName="active">{user.name}</Link>
this.props.history.push({...})
this.props.history.replace({...})
this.props.history.go(n)
this.props.history.goBack()
this.props.history.goForward()
参数：
{ pathname: xxx, query: {..}, state: {...} }
获取参数：props.location.query、props.location.state
生命周期：
routerWillLeave(nextLocation)
