我要评论react异步数据更新不及时问题
最近在学习react的过程中，遇到了个问题，当我使用usestate这个hook的时候，发现我们这个方法更新数据他是异步更新的，数据不会及时同步上我们的页面，在仔细的研究下，找到了以下
解决方法
const [value,setvalue] = usestate([]);
const changevalue = ()=>{
setvalue(data)
console.log(value) //在此处输出会出现不及时更新问题，不会同步到页面上
}
//利用useeffect这个hook来监听数据的变化再去输出或者是调用
useeffect(()=>{
console.log(value)//这样就可以解决更新不及时的问题啦
},[value])react异步更新、寻找dom
1.react异步更新
react异步更新指的是this.setstate()是异步更新的，异步更新之后怎么获取更新之后值
有两种方法：
1.1 componentdidupdate生命周期函数获取更新之后的值
componentdidupdate:已经更新生命周期函数中打印state中的数据是更新后的值
componentdidupdate(prevprops, prevstate) {
console.log(2, prevstate.name, this.state.name) // 张三, 李四
}1.2 在this.setstate()的回调函数中获取更新后的值
this.setstate的第二个参数是可选的回调，是异步更新完成时的回调，在该回调函数中获取更新后的值
this.setstate({
name: "李四"
}, ()=>{
// this.setstate的第二个参数是可选的回调, 是异步更新完成时的回调 (与小程序setdata相同)
console.log(3, this.state.name) // 李四
// 注意: this.setstate数据更新属于异步更新, 此处打印是更新前的值
console.log(1, this.state.name) // 张三2.react查找dom
在react组件中获取dom元素的三种方式：
2.1 给标签设置ref属性
给标签设置ref属性，通过this.refs调用(老版本语法，将要废除)
<h1 ref="myh1"></h1> this.refs.myh1
2.2 在构造器中创建ref全局变量
在构造器中创建ref全局变量，在标签中ref属性动态绑定这个全局变量，通过全局变量的current字段调用
constructor(props) {
super(props);
this.d2 = react.createref()
}
<div ref={this.d2}>2</div>
console.log(this.d2.current);2.3 在标签ref属性绑定函数
在标签ref属性绑定函数，在函数中定义全局变量赋值，通过全局变量调用
<h3 ref={ ele => this.myh3 = ele }></h3>
this.myh3注意：
1.在父组件中用ref获取子组件对象，必须保证子组件是类组件，函数式组件获取结果是undefined
2.父组件中子组件标签绑定ref属性，父组件使用ref获取子组件对象后，可以对子组件状态数据和函数执行调用和修改
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论