1.react的特点
1.1声明是设计(react是面向数据编程 不需要去操作dom 数据驱动视图层的渲染)
1.2使用jsx语法 (jsx是javascript语法的扩展,可以与html混合使用)
1.3灵活(需要操作dom的是id为root的标签)
1.4使用虚拟dom,高效
1.5组件化开发
1.6单向数据流(父组件传递给子组件,子组件不等通过this.props来修改 只能让父组件自己去修改)
2.react和html的标签属性区别
1.react中for是jsfor循环中的关键字 所以所有的表单标签中的for改成htmlFor ( <labelhtmlFor="ipt">label</label>)
2.react中的类名使用className(class在js声明类是关键字)
3.react中style对象用{{width:'300px'}}
3.事件和state和setState
1.事件注册 : 事件类型={this.事件名.bing(this)} 在render同级注册事件
2.state:相当于小程序里面的date(管理数据的)(state={}放在超类同级用this.state={})
3.setState({})唯一能够修改state里的数据
4.实现累加
state={num:0}
<h1>{this.state.num}<h1/>>
this.setState({
num:this.state.num+1//这里不能用++,因num:num++相当于修改值之后赋值是直接修改了,而num的修改只能在setState里面修改
})
5.双向数据绑定
// 双向数据绑定
import React, { Component } from 'react'
export default class App9 extends Component {
constructor(p) {
super(p)
this.state = {
iptVal: ''
}
}
render() {
return (
<div>
<input type="text" value={this.state.iptVal} onChange={
this.changVal.bind(this)
} />
<button onClick={this.btnClick.bind(this)}>按钮</button>
</div>
)
}
// 输入框事件的获取
changVal(e) {
// 获取到输入的值之后修改state里面的值
// console.log(e.currentTarget.value);
this.setState({
iptVal: e.currentTarget.value
})
}
btnClick() {
// 实现双向数据绑定
console.log(this.state.iptVal);
}
}
6.修改数组(原理和num++是一样的,数组里面的方法大多数都是修改变原来数组的,相当于直接赋值,所以先深拷贝一份进行操作最后赋值)
// 修改数组
import React, { Component } from 'react'
export default class App10 extends Component {
state = {
ipt: '露娜',
arr: ['李白', '韩信', '玄策']
}
render() {
return (
<div>
{/*需求是往数组后面添加一项 */}
{
this.state.arr.map((item, index) => {//里面不能用for循环只能用数组的方法
return (
<li key={index}>{item}</li>
)
})
}
<button onClick={this.addFn.bind(this)}>添加一项</button>
</div>
)
}
addFn() {
let newArr = JSON.parse(JSON.stringify(this.state.arr))
newArr.push(this.state.ipt)
this.setState({
arr: newArr
})
}
}
8.验证数组只能在setState里面修改
state={num}
1.不在setState里面修改(发现视图层没有更新)
this.state.num=10
2.在setState里面修改
this.setState(){
num:20
9.key是id好还是index好
id好,id是唯一标识符,有id用id没有id用index