1、在react中想让视图更新 必须让render函数重新执行 必须调用 setState这个方法
2、setState 其实是把参数对应的这个对象合并到 this.state 中 如果有相同的 属性名 会直接覆盖掉
3、setState(对象,函数) 必须传一个对象 也可以传一个函数 函数会在数据更新后执行
4、vue DOM更新是异步的
5、setState 这个函数执行是同步的 里面的数据更新是异步的 不论写再多的setState 里面的数据都会合并在一起 最终执行一次
import React from 'react';
import reactDOM from "react-dom"
// 在react中想让视图更新 必须让render函数重新执行 必须调用 setState这个方法
// setState 其实是把参数对应的这个对象合并到 this.state 中 如果有相同的 属性名 会直接覆盖掉
// setState(对象,函数) 必须传一个对象 也可以传一个函数 函数会在数据更新后执行
// vue DOM更新是异步的
// setState 这个函数执行是同步的 里面的数据更新是异步的 不论写再多的 setState 里面的数据都会合并在一起 最终执行一次
class App extends React.Component {
constructor() {
super()
this.state = {
name: "清欢",
ary: [1, 2, 3, 4],
arr: [5, 6, 7, 8, 9]
}
}
// this.state 也可以写在外面 写在外面也是私有属性 写在外面不加 this 即可
// state = {
// name: "清欢",
// ary: [1, 2, 3, 4],
// arr: [5, 6, 7, 8, 9]
// }
add(ary) {
ary.push(100)
console.log(ary);
this.setState({})
}
merge(arr) {
arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr);
// 把 this.state 中的 arr 地址 合并掉(顶替/覆盖)
this.setState({
arr: arr,
qqq: 123,
name: "小猪" // 数据更新是异步
}, function () {
// 数据更新后会执行该函数
console.log(this.state.name)
})
this.setState({
aaa: arr
})
this.setState({
bbb: arr
})
console.log(this.state.name)
console.log(this.state);
}
minus() {
this.state.arr.pop()
// 也可以直接更改数据 下面重新调用 this.setState({}) 方法 让 render函数执行
this.state.name = "小猪"
this.setState({})
}
render() {
let { name, ary, arr, qqq } = this.state
console.log(ary);
console.log(arr);
return <div>
<h1>{name}---{qqq}</h1>
<ul>
{ary.map(item => <li key={item}>{item}</li>)}
</ul>
<ul>
{arr.map(item => <li key={item}>{item}</li>)}
</ul>
{/* 事件 事件名 = {对应的函数体} 函数体一般都在原型上 */}
{/* 用bind改变this指向 让它指向自己的实例 */}
<button onClick={this.add.bind(this, ary)}>添加</button>
{/*
render 函数体中的this 就是当前的实例;
箭头函数中的this 是上级作用域的;
函数执行 点 前边是谁 this就是谁
*/}
<button onClick={(arr) => { this.merge(arr) }}>合并</button>
<button onClick={() => { this.minus() }}>删除</button>
</div>;
}
}
reactDOM.render(<>
<App />
</>, document.querySelector("#root"))