vue与react的一些常用区别

自己感觉的区别

vue ----------------------react

data                      state 对象，组件的属性(state的修改必须使用setState方法执行)

computed                  没有了

props                     外部接收到了属性this.props直接可以访问

components                直接引入,首字母大写，直接当成标签使用

methods                   组件类的对象方法(自定义的对象方法，this为undefined)

生命周期方法
创建
constructor()  
构造函数。初始化属性和方法了
componentWillMount()
//组件将要挂载
render()
//挂载
componentDidMount()
//组件将要挂载完毕

注意：数据请求在componentWillMount这个方法之后执行
     使用state：任意的方法中都可以
  使用props：componentWillMount这个方法之后使用

更新
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

销毁
componentWillUnmount()
 
捕获异常
componentDidCatch()

vue指令 react中单向数据绑定（js数据绑定在dom结构上）

v-model                 <input value={this.state.val} onChange={this.inputChange.bind(this)}/>
inputChange(event){
this.setState({val: event.target.value});
}

v-if                     let divDom = this.state.show ? <div className="box"></div> : ''

v-show                  let divDom2 = this.state.show ? <div className="box2"></div> : <div className="box2" style={{display: 'none'}}></div>;

v-for                   <ul>
{
this.state.arr.map((item, index)=>{
return <li key={index}>{item}</li>
})
}
</ul>

组件与组件间的通讯                              react

父组件传子组件                                      属性方式传值
<App title={"hello"}/>
<AppHeader name={this.state.username}></AppHeader>
内部访问  this.props.title       this.props.name

子组件传父组件                                     自定义事件作为属性传给子组件使用，子组件调用props上的属性，执行事件，从而执行了父级的事件。
父组件调用子组件时：<AppHeader modify={this.modifyName.bind(this)}></AppHeader>
子组件传值时：this.props.modify('XXXXX');

代码

import React, { Component } from 'react'
import PropTypes from 'prop-types';

//let isPropsUpdate = false;

export default class AppHeader extends Component{

constructor(){
super();
this.state = {
num : 20,
val: 123,
show: true,
arr: [1,2,8,4,5,6]
}
}

render(){
console.log('header render ----挂载');
//v-if
let divDom = '';
let divDom2 = <div className="box2" style={{display: 'none'}}></div>;

if(this.state.show){
divDom = <div className="box"></div>;
divDom2 = <div className="box2"></div>;
}

return (
<header>
<h1>
{this.props.name}
</h1>

<button onClick={this.modifyName.bind(this)}>修改name值为:王五</button>

<p>
{this.state.num}
<button onClick={this.updateNum.bind(this)}>
修改
</button>
</p>
//v-moudle
<input value={this.state.val} onChange={this.inputChange.bind(this)}/>
<br/>
//v-show
<button onClick={this.btnAction.bind(this)}>{this.state.show?'显示':'隐藏'}</button>
{divDom}
{divDom2}
//v-for
<ul>
{//当成js解析
this.state.arr.map((item, index)=>{
return <li key={index}> {item} </li>
})
}
</ul>

</header>
)
}

updateNum(){
this.setState({num: 40});
}
btnAction(){
this.setState({show: !this.state.show});
}
inputChange(event){
console.log(event.target.value)
//由于数据是单向绑定的，输入框的值修改不了，只有直接修改绑定的值，dom结构的显示才能变化
this.setState({val: event.target.value});

}