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});
		
	}
	

 

最后分享一个公众号二维码，写一些散文和影评等，欢迎关注。