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

条件渲染&循环渲染&表单&状态提升

react

class Demo extends React.Component {
  constructor(prop) {
    super();
    this.state = {content:[], inputVal:"", demo1prop:1}
  }
  componentDidMount(){
    // 模拟请求
    setTimeout(() => {
      this.setState({
        content: [1,2,3,4]
      })
    }, 1000)
  }
  // 条件渲染&循环渲染：条件语句按需渲染，后台无数据则loading，有数据则map循环渲染,vue里的v-if，v-for指令
  // 受控表单input：受控表单input，vue里面的v-model双向数据绑定
  render(){
    const { content, inputVal, demo1prop } = this.state;
    const {children , namedChild } = this.props;
    return content.length?(
     <div>
       <input value = {inputVal} onChange = {(e)=>{this.setState({inputVal:e.target.value})}}></input>
       <div>受控input的value:{ inputVal }</div>
       <div>后台给的内容： {content.map( c => <span key={c}>内容{ c }</span>)}</div>
       <div>children:<div>{children}</div>{namedChild}</div>
       <Demo1 prop={demo1prop} changePropFn={(value) =>{this.setState({demo1prop:value})}}/>
     </div>
    ):(<React.Fragment>loading...</React.Fragment>)
  }
}

// 子组件将自身的状态提升为父组件的状态，并用属性的形式实现传值和通信。对比vue里面的v-model，sync, $emit
function Demo1 (props){
  const {prop, changePropFn} = props;
   return(<div onClick = {()=>{changePropFn(2)}}>
      Demo1内容:{prop}
   </div>)
}

ReactDOM.render(
  // 对比vue里面的this.$slot[name]和this.$slot.default
  <Demo namedChild="i am named child">i am default child</Demo>,
  document.getElementById("app")
);

vue

const Demo = Vue.component("Demo",{
    render(){
        const {content, inputValue} = this;
        // jsx条件以及循环渲染同react。template写法有v-if，v-for语法糖指令。
        // 表单input受控同react，template写法有v-model语法糖。
        // 状态提升，有v-model，sync，$emit,传入prop等多种方式。
        return(
            content
            ?<div>
                <div>内容：{content.map( c => <span key={c}>内容{ c }</span>)}</div>
                <input value = {inputValue}  onChange = {(e)=>{this.inputValue=e.target.value;console.log(1)}}></input>
                <div>受控input: {inputValue}</div>
            </div>
            :<span>loading...</span>
        )
    },
    mounted() {
        setTimeout(() => {
            this.content = [1,2,3,4]
        },1000)
    },
    data(){
        return {
            content:[],
            inputValue:""
        }
    }
})