React学习记录

1.安装脚手架

代码语言：javascript复制

$ npm i creat-react-app

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

代码语言：javascript复制

$ creat-react-app demo01

3.启动项目

代码语言：javascript复制

$ npm start

注：webpack版本需要4.29.6

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

5.示例组件 代码：

代码语言：javascript复制

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的赋值结构和拓展预算符：

代码语言：javascript复制

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

（2） 其中用到es6的赋值结构：

代码语言：javascript复制

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

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

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

ecmascript react

0 人点赞