React之初学

由于工作需求，需要短时间掌握react开发，这里会记录我对react的使用的知识点（持续记录...）

之前使用的VUE，可能本文会从使用vue各种api的角度上去学习react的api的使用

v-model 在哪里？

react中没有v-model这样的语法糖，但是我们可以简单去实现它

import React, { Component } from 'react'

class list extends Component {
    constructor(props){
        super(props)
        this.state = {
            name:'邓俊',
        }
    }
    nameHandleChange(e){
        this.setState({
            name:e.target.value //数据修改
        })
    }
    render() {
        return (
            <div>
                <p>{this.state.name}</p> //数据展示
                <div><input onChange={this.nameHandleChange.bind(this)} defaultValue={this.state.name}/></div> //数据绑定
            </div>
        )
    }
}

export default list

如何实现v-if ？

v-if也就是在jsx中写if...else...，我们简单点，就可以使用三目运算符来实现

import React from 'react';
import './App.css';
import List from './list/list'

function App() {
  let [show,setShow] = React.useState(true) //定义一个state变量
  let changeShow = (showB)=>{
    setShow(!showB) //切换
  }
  return (
    <div className="App">
      <p>APP</p>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
      <button onClick={()=>changeShow(show)}>{show ? '关闭' : '展示'}</button>
      {show ? <List></List> : null} //v-if
      
    </div>
  );
}

export default App;

如何实现v-for ？

可以使用map遍历数组的方式实现v-for生成相同组件

import React from 'react';
import './App.css';
import List from './list/list'

function App() {
  let [liArr,setLiVal] = React.useState([
    {val:1},
    {val:2},
    {val:3},
    {val:4},
  ])
  let createLi = (liVal)=>{
  return <li>{liVal.val}</li> //生成li
  }
  return (
    <div className="App">
      <p>APP</p>
      <ul>
      {liArr.map(item=>createLi(item))}//map遍历 配合createLi就是v-for
      </ul>
      
    </div>
  );
}

export default App;