首页 > 其他分享 >07 - react 唯一修改state状态的方式 setState

07 - react 唯一修改state状态的方式 setState

时间:2023-04-29 22:33:06浏览次数:41  
标签:count 07 render react 修改 state setState

// setState 修改状态 如果是直接修改页面不会改变 使用 setState 修改数据 才会驱动视图的改变

// setState 的原理:修改玩状态之后会调用 render 函数

import ReactDom from "react-dom"

import { Component } from "react"

class App extends Component {
 // 自增函数
 addFn () {
  console.log(123)
  // 不要直接修改 state 的状态 是无效的
  this.state.a = 12
  console.log(this.state.a)
  this.setState({
   count: this.state.count + 1
  })
 }
 state = {
  count: 10,
  a: 1,
 }
 render () {
  return (<div>
   <h1>计数器:{this.state.count}</h1>
   {
    // bind 绑定当前的this 然后返回新的函数
    // 或者使用箭头函数 因为箭头函数本身没有this 使用父级的this指向
   }
   <button onClick={this.addFn.bind(this)}>加一</button>
  </div >)
 }
}
// 把租价渲染到页面
ReactDom.render(<App />, document.querySelector("#root"))

直接修改state的值,页面并不会自动更新UI ;

标签:count,07,render,react,修改,state,setState
From: https://www.cnblogs.com/zhulongxu/p/17364581.html

相关文章

  • MFC-SetItemState选中指定行
     BOOLb1=mylist4.SetItemState(1,LVIS_SELECTED|LVIS_FOCUSED,LVIS_SELECTED|LVIS_FOCUSED);//选中指定行/*参数1:intnItem行号,-1可将状态更改应用于所有项参数2:UINTnState状态LVIS_SELECTED选中状态LVIS_FOCUS......
  • vue3源码-一、响应式原理reactive的实现
    reactive的实现使用:使用reactive()函数创建一个响应式对象。import{reactive}from'vue'exportdefault{//`setup`是一个专门用于组合式API的特殊钩子函数setup(){conststate=reactive({count:0})//暴露state到模板return{......
  • 06 - react的类组件中的状态state render函数 this指向问题 事件绑定
    //注册事件importReactDomfrom"react-dom"import{Component}from"react"//类组件中的状态通过this.state.xxx来获取状态classHelloextendsComponent{//事件对象eventhandleClick(e){console.log(this)//udnefiend使用箭头函数解决this......
  • react的类组件和函数组件 -- 状态 state
    //函数组件是无状态的既没有数据的类似vue组件中的data数据//类组件是有状态的组件是有数据的是双向绑定的数据是数据驱动视图的负责UI的视图更新(单个组件的私有数据组件之间的数据是独立的)importReactDomfrom"react-dom"import{Component}from"react......
  • 07客户端登录
    07客户端登录在开始实现客户端登录前,我将之前的代码做了以下重构。IConfig重新命名为ServiceProxyConfigClientBase重命名为AbpServiceBase文件名改为api\AbpServiceBase.ts将ServiceProxyConfig独立到api\ServiceProxyConfig.ts文件中修改了使用nswag生成客户端的配......
  • 完整实现React day10
    update流程与mount流程的区别。对于beginWork:需要处理ChildDeletion的情况需要处理节点移动的情况(abc->bca)对于completeWork:需要处理HostText内容更新的情况需要处理HostComponent属性变化的情况对于commitWork:对于ChildDeletion,需要遍历被删除的子树对于Update,需......
  • react- hooks 之 useMemo
    1.传入数组的变量需要在使用前进行定义,const[issueType,setIssueType]=useState('1');constissueDisable=useMemo(()=>{console.log('issueType改变啦',issueType,dataSource,haveDetaildataSource);},[issueType,dataSource,haveDetailda......
  • 中级软件设计师软考备考资源;解决org.apache.ibatis.binding.BindingException: Invali
    中级软件设计师软考备考资源软考资源在百度网盘上org.apache.ibatis.binding.BindingException:Invalidboundstatement(notfound)问题即在mybatis中dao接口与mapper配置文件在做映射绑定的时候出现问题,简单说,就是接口与xml要么是找不到,要么是找到了却匹配不到。这是一个很容易......
  • 第八届河南省赛 zzuoj 10407: B.最大岛屿
    10407:B.最大岛屿TimeLimit:1SecMemoryLimit:128MBSubmit:29Solved:17[Submit][Status][WebBoard]Description神秘的海洋,惊险的探险之路,打捞海底宝藏,激烈的海战,海盗劫富等等。加勒比海盗,你知道吧?杰克船长驾驶着自己的的战船黑珍珠1号要......
  • React中的另一种状态管理方案Valtio
    React中的状态管理是开发人员需要解决的问题。总有一些新库给你选择,而选择合适的库可能是一项困难的工作状态管理一直是React中开发人员需要解决的问题,如何有条理的组织数据,如何快速的在项目中集成,这些都是我们做项目时选择技术的标准。Redux一直是我们react项目中不二的状态管......