三亚网络网站建设,西安seo外包行者seo,wordpress主题git下载失败,手机制作企业网站一、useState使用规则
1、useState 函数可以执行多次#xff0c;每次执行互相独立#xff0c;每调用一次为函数组件提供一个状态 2、useState只能出现在【函数组件】或者其他hook函数中 3、不能嵌套在if/for/其它函数中#xff08;react按照hooks的调用顺序识别每一个hook每次执行互相独立每调用一次为函数组件提供一个状态 2、useState只能出现在【函数组件】或者其他hook函数中 3、不能嵌套在if/for/其它函数中react按照hooks的调用顺序识别每一个hook 只能在最外层
二、setState-不可变值
import React from reactclass StateDemo extends React.Component {constructor(props) {super(props)// 第一state 要在构造函数中定义this.state {count: 0}}increase () {// 第二不要直接修改 state 使用不可变值// this.state.count // 错误this.setState({count: this.state.count 1 // √})}render() {return divp{this.state.count}/pbutton onClick{this.increase}累加/button/div}
}export default StateDemo操作数组、对象的的常用形式
// 不可变值函数式编程纯函数 - 数组
const list5Copy this.state.list5.slice()
list5Copy.splice(2, 0, a) // 中间插入/删除this.setState({list1: this.state.list1.concat(100), // 追加list2: [...this.state.list2, 100], // 追加list3: this.state.list3.slice(0, 3), // 截取list4: this.state.list4.filter(item item 100), // 筛选list5: list5Copy // 其他操作
})
// 注意不能直接对 this.state.list 进行 push pop splice 等这样违反不可变值// 不可变值 - 对象
this.setState({obj1: Object.assign({}, this.state.obj1, {a: 100}),obj2: {...this.state.obj2, a: 100}
})
// 注意不能直接对 this.state.obj 进行属性设置这样违反不可变值三、setState-可能是异步更新
// 回调函数中可以拿到最新的 state
this.setState({count:this.state.count 1
}, () {// 联想 Vue $nextTick - DOMconsole.log(count by callback, this.state.count) // 回调函数中可以拿到最新的 state !!!!!
})
console.log(count, this.state.count) // 异步的拿不到最新值 xxxxxxxxxxxxxxxsetTimeout 中 setState 是同步的, 可以拿到最新的 state
setTimeout(() {this.setState({count: this.state.count 1})console.log(count in setTimeout, this.state.count)
}, 0)自己定义的 DOM 事件setState 是同步的。在 componentDidMount 中
bodyClickHandler () {this.setState({count: this.state.count 1})console.log(count in body event, this.state.count) // 可以拿到最新的 state
}
componentDidMount() {// 自己定义的 DOM 事件setState 是同步的document.body.addEventListener(click, this.bodyClickHandler)
}
componentWillUnmount() {// 及时销毁自定义 DOM 事件document.body.removeEventListener(click, this.bodyClickHandler)// clearTimeout
}四、setState-可能会被合并
传入对象会被合并类似 Object.assign 。执行结果只一次 1 因为异步更新 Object.assign({aaa: 1}, {aaa: 1}) // {aaa: 1}
this.setState({count: this.state.count 1
})
this.setState({count: this.state.count 1
})
this.setState({count: this.state.count 1
})// 传入函数不会被合并, 因为函数无法合并是可执行的对象。执行结果是 3
this.setState((prevState, props) {return {count: prevState.count 1}
})
this.setState((prevState, props) {return {count: prevState.count 1}
})
this.setState((prevState, props) {return {count: prevState.count 1}
})五、React ≤ 17 VS React 18 import React from reactinterface isState {count: any
}class App extends React.Componentany, isState {constructor(props:any) {super(props)this.state {count: 0}}render() {return pspan666/span{this.state.count}/p}componentDidMount() {// count 初始值为 0this.setState({ count: this.state.count 1 })console.log(1, this.state.count) // 0 react18: 0 this.setState({ count: this.state.count 1 })console.log(2, this.state.count) // 0 react18: 0setTimeout(() {this.setState({ count: this.state.count 1 })console.log(3, this.state.count) // 2 react18: 1})setTimeout(() {this.setState({ count: this.state.count 1 })console.log(4, this.state.count) // 3 react18: 1})}
}export default App
