React.js 赋值并使DOM更新

React.js 赋值并使DOM更新

  1. useState 不能过多定义使用,建议定义一个全局使用,类似微信小程序定义数据
  2. var [data, setState] = useState({ … obj }) 把所有数据定义在里面 类似微信小程序定义数据和更新数据方式
  3. setState(res => ({ …res, data })); 浅拷贝刷新整个数据 Demo自动随异步着更新
  4. 取值则 data.xxx
  5. 赋值则 data.xxx = xxxx
  6. 再次引用刷新 setState(res => ({ …res, data })); //固定方法无需改变,类似微信更新数据 this.setState()
  7. useState 不能过多定义使用,所以这个方法最佳
import React, { useState,useReducer } from 'react'; //导入
function App() {
  var [data, setState] = useState<any>({ name:'xx'  });//把所有数据定义在里面
  data.name = '你好'; //赋值
  //useState 不能过多定义使用,建议定义一个全局使用,类似微信小程序定义数据

  setState(res => ({ ...res, data }));//刷新整个数据 //必须更新第一层数据才触发更新DEMO
  
  //数组追加
  setState(State => ({ ...State, listData: [...lists, ...newlists] }));
  //删除数组
  data.listData.splice(index, 1)
  setState(State => ({ ...State, listData: JSON.parse(JSON.stringify(listData)) }))
}

//更新对象类
setUser(res => ({ ...res, name:"xxxx" }))
//更新数组
setList({ ...arrlist});
setList([ ...arrlist]);
548 Views
分享你的喜爱
linwute
linwute

我要像梦一样自由,像大地一样宽容;
在艰辛放逐的路上,点亮生命的光芒;
我要像梦一样自由,像天空一样坚强;
在曲折蜿蜒的路上,体验生命的意义;

留下评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注