一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 留言板
  • 工具
  • 友链
  • biaoblog

    专注web开发技术分享

    React学习记录

    技术 182 2019-07-12 17:55

    1.安装脚手架

    $ npm i creat-react-app
    

    2.创建项目,到想要创建的目录下

    $ creat-react-app demo01
    

    3.启动项目

    $ npm start
    

    注:webpack版本需要4.29.6

    4.JSX的了解:js与xml的结合,简单理解为:当遇到<,JSX就当作HTML解析,遇到{就当JavaScript解析

    5.示例组件 代码:

    import React,{Component,Fragment } from 'react'
    class App extends Component{
    //js的构造函数
    constructor(props){
    super(props) //调用父类的构造函数,固定写法
    this.state = {
    inputValue: "sss",
    list:["头部按摩","精油推背"]
    }
    }
    render(){
    return(
    // 在事件中想要去获取到组件的实例化对象 需要绑定this 》 onChange={this.inputChange.bind(this)
    // 在遍历循环的时候需要绑定key key={index+item}
    <Fragment>
    <div>
    <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
    <button onClick={this.addList.bind(this)}> 增加服务 </button>
    </div>
    <ul>
    {this.state.list.map((item,index)=>{
    return <li key={index+item} onClick={this.removeList.bind(this,index)}>{item}</li>
    })}
    </ul>
    </Fragment>
    )
    }
    inputChange(e){
    this.setState({
    inputValue:e.target.value
    })
    }
    addList(){
    // console.log(this.state.inputValue)
    // 在
    let list = this.state.list.concat(this.state.inputValue)
    console.log(list)
    this.setState({
    // ...拓展运算符 ...this.state标识拓展,后面跟的是添加的内容
    // list:[...this.state.list,this.state.inputValue],
    // list:list,
    list:list,
    inputValue:''
    })
    }
    removeList(index){
    console.log(index)
    let list = this.state.list
    list.splice(index,1)
    // setState个人感觉是专门针对修改数据进行操作的 在之前可以对数据进行格式化 也可以在setState里面进行修改 但不方便..例如addList函数里面的拓展运算符
    this.setState({
    list:list
    })
    }
    }
    export default App;
    

    6.关于以上组件相关知识点的整理:

    (1)其中用到es6的赋值结构和拓展预算符:

    扩展运算符用三个点号表示,功能是把数组或类数组对象展开成一系列用逗号隔开的值
    import React,{Component,Fragment } from 'react'
    相当于:
    import React from 'react'
    const Component = React.Component
    

    (2) 其中用到es6的赋值结构:

    list:[...this.state.list,this.state.inputValue],...this.state标识拓展,后面跟的是添加的内容
    

    (3)在事件中想要去获取到组件的实例化对象 需要绑定this : onChange={this.inputChange.bind(this)

    (4)setState({})是对数据进行操作的大门,不可以像vue直接赋值。setState个人感觉是专门针对修改数据进行操作的 在之前可以对数据进行格式化 也可以在setState里面进行修改 但不方便..例如addList函数里面的拓展运算符


    文章评论

    评论列表(0