3.vue和react一起学 (*^_^*)

对比以下react和vue组件的属性和状态

react

首先看下react中类组件和函数组件区别：

	state状态	props属性	lifecycle生命周期
类组件	有	有	有
函数组件	无	有	无

此处主要学习state和props，lifecycle后面再去学习。
可以看看以下demo中react中类组件和函数组件中各自的属性，状态实现。
// react-vue-props-state\react-state-props\react-component.js

// 类组件
class Son extends React.Component {
   
  constructor(){
   
    super()
    this.state = {
   
      knowledge: 0,
      experience: 0
    };
    this.advance.bind(this)
  }

  advance({
   type, payload}){
   
    const {
    knowledge, experience} = this.state;
    switch(type){
   
     case "advanceKnowledge":
       this.setState({
   knowledge:knowledge+payload})
       break
     case "advanceExperience":
      this.setState({
   experience:experience+payload})
     default:
      break
    }
  }

  render(){
   
    const {
    idCard:{
    name, fatherName } } = this.props;
    const {
    knowledge, experience } = this.state;
    return(<div >
        我叫{
    name }, 我的老爸是 {
   fatherName}
        <div>
          <button onClick={
   this.advance.bind(this,{
   type:"advanceKnowledge", payload:1})}>学习</button>
          <button onClick={
   this.advance.bind(this,{
   type:"advanceExperience", payload:1})}>课外活动</button>
        </div>
        <div>
          我参加过 {
   experience} 场课外活动,
          我读过