React|React 组件中的state和setState()你知道多少
目录
- state的基本使用
- setState()修改状态
- 解决方法:
- 总结
state的基本使用 状态(state)即数据,是组件内部的私有数据,只能在组件内部使用
state的值是对象,可以通过this.state来获取状态。
setState()修改状态 状态是可变的,可以通过this.setState({要修改的数据})来改变状态
注意:跟vue语法不同,不要直接修改state中的值,这时错误的!
//正确 this.setState({count:this.state.count+1 })//错误this.state.count+=1
最后结合以上内容,写了一个简单的累加器,但是在此之前,我们需要解决this在自定义的方法中的指向问题,否则this指向会为undefined,我们一般希望this指向组件实例。
解决方法:
1.箭头函数
利用箭头函数自身不绑定this的特点
class App extends React.Component{state={count:0, }render(){// 箭头函数中的this指向外部韩静,此处指向render()方法return (总数:{this.state.count})}}ReactDOM.render(,document.getElementById('root'));
但是这种方法会导致JSX语法中代码过于繁杂,不利于表明项目结构,一般不推荐使用。
2.Function.prototype.bind()
利用ES5中的bind方法,将事件处理程序中的this与组件示例绑定到一起
class App extends React.Component{constructor(){super()//super()必须写,这时ES6语法中class的一个要求//此时可将state放到constructor()中this.state={count:0, }this.add=this.add.bind(this)//将this指向绑定到实例}//事件处理程序add(){this.setState({count:this.state.count+1})}render(){// 箭头函数中的this指向外部韩静,此处指向render()方法return (总数:{this.state.count})}}ReactDOM.render(,document.getElementById('root'));
【React|React 组件中的state和setState()你知道多少】3.class的示例方法
利用箭头函数形式的class实例方法,此方法比较简洁,强烈推荐
注意:该语法是实验性语法,但是由于脚手架中babel的存在,可以直接使用
class App extends React.Component{state={count:0, }add=()=>{this.setState({count:this.state.count+1})}render(){// 箭头函数中的this指向外部韩静,此处指向render()方法return (总数:{this.state.count})}}ReactDOM.render(,document.getElementById('root'));
总结 本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!
推荐阅读
- Python内置数据类型中的集合详解
- k8s监控数据组件Pod自动化进行扩缩容HPA
- C++中的运算符和表达式
- 带你从内存的角度看Python中的变量
- Map-Reduce|Map-Reduce 思想在 ABAP 编程中的一个实际应用案例
- 七天接手react项目|七天接手react项目 —— 生命周期&受控和非受控组件&Dom 元素&Diffing 算法
- Java中的内存泄露问题和解决办法
- 前端(react)上传到阿里云OSS存储|前端(react)上传到阿里云OSS存储 实例
- svelte-popup|svelte-popup 基于svelte.js移动端弹窗组件
- Loss|对比学习(Contrastive Learning)中的损失函数