state和props
state:
- 使用setState来更新state可以触发dom更新
- 类组件中，state的更新化只能在construct中
- state的更新是异步的：调用setState后，state不会立刻改变，是异步操作。
setState是同步还是异步？ 同步执行，异步处理数据
那么怎么获取更新之后的值？
setState有第二个回调参数,在回调函数里面可以获取更新后的数据
setState({}, () => {
dom更新后的数据
})
当代码中存在连续setState时，对于下面这种setState方式只会取最后一个setState的值
<button
onClick={() => {
this.setState({count: this.state.count + 1})
this.setState({count: this.state.count + 2})
}}
>add</button>
每次点击时 count 增加多少？
每次会加2。且此时this.state.count依赖的值并不会是 第一个执行setState 加1之后的值。而是这个生命周期的初始值
那么怎么处理会使其都执行，且依赖之前的setState？
将setState的参数换成函数
<button
onClick={() => {
this.setState((state, props) => ({count: this.state.count + 1}))
this.setState((state, props) => ({count: this.state.count + 2}))
}}
>add</button>
其函数第一个参数是前一个setState之后的state值。第二个参数是props,(前一个props还是当前的props?)
注意:不要依赖当前的state，计算下一个state
props:
- 从父组件传递给子组件的数据
- 所有的props都是只读的
事件处理
react中，事件处理函数中不能通过返回false来阻止默认行为。
对于事件处理函数，通常是将其提取出为class的方法，
此时必须注意this的指向问题,有两个处理方法：
(1)、在construct中使用bind绑定this
class C extends React.component {
constructor() {
this.eventHandle = this.eventHandle.bind(this)
}
}
(2)、使用类字段和箭头函数
class C extends React.component {
eventHandle = (e) => {}
}
事件对象
react中事件对象是合成对象。可以使用e.nativeEvent访问原生事件对象
得知道：
- e.target是事件发生的元素。
- e.currentTarget是事件绑定的元素
