有状态组件和无状态组件

函数组件又叫做无状态组件,类组件又叫做有状态组件。
状态又叫做数据
函数组件没有自己的状态,只负责静态页面的展示。
我们可以理解为纯ui展示。()
类组件有自己的状态,扶着更新UI,会让页面动起来.

state的基本使用

state就是数据,是组件内部的私有数据。
只能够在组件内部使用。 state的值是一个对象,表示一个组件中可以有多个数据。

设置值state使用this.setState

语法:this.setState({ count:新值 })
只会更改state中count的值。
并不会将state中其他值进行初始化。
千万不要直接更改state中的值。这是错误的。
必须通过 this.setState
this.state.count=10 直接更改错误的
那么state的两个作用:1修改state中的值. 2更新ui
import React from 'react'; //这个是react这个包,我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom class ShowCont extends React.Component {
// 简化语法初始化state(推荐)
// state = {
// count:0
// } // 另外一种
constructor() {
super()
this.state = {
count:0
}
} // 点击事件
render() {
return (
<div>
{/* 注意这里不要写成 {this.state} 否者会报错 */}
<span>计数值 {this.state.count}</span>
<button onClick={() => {
//如果这里的代码很多怎么抽离出来呢??
this.setState({
count:this.state.count+1
})
}}>+</button>
</div>
)
}
}
ReactDOM.render(<ShowCont/>, document.getElementById('root'))

如何将事件中的代码抽取出来 (第一种:箭头函数中的this)

import React from 'react'; //这个是react这个包,我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom class ShowCont extends React.Component {
state = {
count:100
} onIncrement() {
this.setState({
count:this.state.count+10
})
}
// 点击事件
<!-- 第一种:箭头函数中的this,利用箭头函数中自身不绑定this的特点 -->
render() {
return (
<div>
<span>计数值 {this.state.count}</span>
{/* 箭头函数中的this指向外部环境,此处为render()里面的方法。
而render中的方法就是组件中的实例 */}
<button onClick={()=>this.onIncrement()}>+</button>
</div>
)
}
} ReactDOM.render(<ShowCont/>, document.getElementById('root'))

Function.protype.bind()改变this的指向 (第二种)

import React from 'react'; //这个是react这个包,我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom class ShowCont extends React.Component {
state = {
count:100
} <!-- 点击按钮的时候肯定是先执行的constructor -->
constructor() {
super()
this.state = {
count:0
}
this.onIncrement=this.onIncrement.bind(this)
} // 事件处理程序
onIncrement() {
this.setState({
count:this.state.count+10
})
} // 点击事件
render() {
return (
<div>
{/* 注意这里不要写成 {this.state} 否者会报错 */}
<span>计数值 {this.state.count}</span>
<button onClick={this.onIncrement}>+</button>
</div>
)
}
} ReactDOM.render(<ShowCont/>, document.getElementById('root'))

第三种 (推荐使用)

import React from 'react'; //这个是react这个包,我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom class ShowCont extends React.Component { state = {
count:0,
} // 事件处理程序
onIncrement=() =>{
this.setState({
count:this.state.count+10
})
}
// 点击事件
render() {
return (
<div>
{/* 注意这里不要写成 {this.state} 否者会报错 */}
<span>计数值 {this.state.count}</span>
<button onClick={this.onIncrement}>+</button>
</div>
)
}
} ReactDOM.render(<ShowCont/>, document.getElementById('root'))

React类组件中事件绑定this指向的三种方式的更多相关文章

  1. 转 Velocity中加载vm文件的三种方式

    Velocity中加载vm文件的三种方式   velocitypropertiespath Velocity中加载vm文件的三种方式:    方式一:加载classpath目录下的vm文件 Prope ...

  2. Velocity中加载vm文件的三种方式

    Velocity中加载vm文件的三种方式: a.  加载classpath目录下的vm文件 /** * 初始化Velocity引擎 * --VelocityEngine是单例模式,线程安全 * @th ...

  3. Action 中获取表单数据的三种方式

    (尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/53138905  冷血之心的博客) Action 中获取表单提交数据 ...

  4. vue中通过路由跳转的三种方式

    原文:https://blog.csdn.net/qq_40072782/article/details/82533477 router-view 实现路由内容的地方,引入组件时写到需要引入的地方需要 ...

  5. SpringBoot学习笔记(6)----SpringBoot中使用Servlet,Filter,Listener的三种方式

    在一般的运用开发中Controller已经大部分都能够实现了,但是也不排除需要自己实现Servlet,Filter,Listener的方式,SpringBoot提供了三种实现方式. 1. 使用Bean ...

  6. Maven中解决jar包冲突的三种方式

    首先我们在idea中创建一个maven工程,我们只关注pom.xml以及External Libraries中导入的jar包 导入spring-beans.jar <dependency> ...

  7. FastAPI中声明参数为必需的三种方式

    前提 有时候我们定义一些参数的时候,需要声明这个参数为必需,请求者必须传递该参数.FatstAPI中声明参数为必需的方式有三种,分别为:不设默认值.  "..." 和 " ...

  8. 为什么需要在 React 类组件中为事件处理程序绑定this?

    https://juejin.im/post/5afa6e2f6fb9a07aa2137f51 事件绑定作为回调函数参数传递给函数,丢失其上下文,执行的是默认绑定,不是隐式绑定 类声明和类表达式的主体 ...

  9. Latex中如何设置字体颜色(三种方式)

    1.直接使用定义好的颜色 \usepackage{color} \textcolor{red/blue/green/black/white/cyan/magenta/yellow}{text} 其中t ...

  10. WPF中控制窗口显示位置的三种方式

    首先新建一个WPF工程,在主界面添加一个按钮,并给按钮添加点击事件button1_Click,然后新建一个用于测试弹出位置的窗口TestWindow.1.在屏幕中间显示,设置window.Window ...

随机推荐

  1. [ERROR] Error executing Maven. [ERROR] 1 problem was encountered while building the effective settings

    原因: maven 的配置文件 setting.xml 有错. 比如在配置文件中多了一行: 导致配置文件的格式不正确.

  2. ImproperlyConfigured('SQLite 3.8.3 or later is required Centos升级SQLite

    遇到这个错误可以选择给django降级,不建议 这里选择升级SQLite 1.查看版本 sqlite3 --version 2.Centos7安装最新的sqlite3 wget https://www ...

  3. PPT 动画-多层旋转(圆角三角形)

    多层旋转动画 插入若干个三解形 然后将页面切换成[平滑](Office 2019~ 365 才有这功能,或者 iSlide 平滑过渡)

  4. 42 干货系列从零用Rust编写负载均衡及代理,wmproxy中配置tcp转websocket

    wmproxy wmproxy已用Rust实现http/https代理, socks5代理, 反向代理, 静态文件服务器,四层TCP/UDP转发,七层负载均衡,内网穿透,后续将实现websocket代 ...

  5. Codeforece : 1360C. Similar Pairs(水题)

    https://codeforces.com/contest/1360/problem/C We call two numbers xx and yy similar if they have the ...

  6. 活动回顾|阿里云云原生 Serverless 技术实践营 深圳站回放&PPT下载

    11月24日"阿里云云原生 Serverless 技术实践营"深圳站圆满落幕.活动受众以关注  Serverless 技术的开发者.企业决策人.云原生领域创业者为主,活动形式为演讲 ...

  7. shell 编程中 awk ,wc ,$0,$1 等 命令的使用总结

    本文为博主原创,转载请注明出处: 1. awk 的常用场景总结 2. wc 常用场景总结 3. $0,$1,$# 的使用总结 4. seq 的使用总结 5. 获取用户输入 read 使用 1. awk ...

  8. Blazor开发小游戏?趁热打铁上!!!

    大家好,我是沙漠尽头的狼. 网站使用Blazor重构上线一天了,用Blazor开发是真便捷,空闲时间查查gpt和github,又上线一个 正则表达式在线验证工具 和几个在线小游戏,比如 井字棋游戏.扫 ...

  9. 【C/C++】知识点笔记

    1 - 联合体内嵌结构体初始化赋值 union { struct { int i; float f; char *p; }; int o; } obj3 = { 1, 2.2, "sk&qu ...

  10. 【MicroPython】生成micropython版本头文件 - py\makeversionhdr.py

    用法 $ python makeversionhdr.py mpversion.h 实现 带git仓 get_version_info_from_git 使用git指令:   git describe ...