React 组件中的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 ( <div> <span>总数:{this.state.count}</span> <button onClick={()=>{ this.setState({ count:this.state.count+1 }) }}>点击+1</button> </div> ) } } ReactDOM.render(<App/>,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 ( <div> <span>总数:{this.state.count}</span> <button onClick={this.add}>点击+1</button> </div> ) } } ReactDOM.render(<App/>,document.getElementById('root'));
3.class的示例方法
利用箭头函数形式的class实例方法,此方法比较简洁,强烈推荐
注意:该语法是实验性语法,但是由于脚手架中babel的存在,可以直接使用
class App extends React.Component{ state={ count:0, } add=()=>{ this.setState({ count:this.state.count+1 }) } render(){ // 箭头函数中的this指向外部韩静,此处指向render()方法 return ( <div> <span>总数:{this.state.count}</span> <button onClick={this.add}>点击+1</button> </div> ) } } ReactDOM.render(<App/>,document.getElementById('root'));
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注猪先飞的更多内容!
原文出处:https://blog.csdn.net/yueye_wu/article/details/123553016
相关文章
- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧...2021-06-21关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误(解决方案)
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误,本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06- 思路其实没有那么复杂,把地图想成一个盒子容器,地图中心点想成盒子中心点;扎点在【地图中心点】不会动,当移动地图时,去获取【地图中心点】经纬度,设置某个位置的时候,将经纬度设置为【地图中心点】即可...2021-06-20
- 这篇文章主要介绍了React Native 启动流程简析,文以 react-native-cli 创建的示例工程(安卓部分)为例,给大家分析 React Native 的启动流程,需要的朋友可以参考下...2021-08-18
- 这篇文章主要为大家详细介绍了React列表栏及购物车组件使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-28
- 这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29
- 高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React 高阶组件HOC使用小结,一起看看吧...2021-06-13
关于antd tree和父子组件之间的传值问题(react 总结)
这篇文章主要介绍了关于antd tree 和父子组件之间的传值问题,是小编给大家总结的一些react知识点,本文通过一个项目需求实例代码详解给大家介绍的非常详细,需要的朋友可以参考下...2021-06-02- 这篇文章主要介绍了react hooks入门详细教程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06
- 这篇文章主要介绍了React中使用setInterval函数的实例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06
- useState 通过在函数组件里调用它来给组件添加一些内部 state,React 会在重复渲染时保留这个 state,接下来通过一个示例来看看怎么使用 useState吧...2021-06-04
- 本文主要介绍了react为什么不推荐使用index作为key,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-07-22
- 这篇文章主要介绍了react+ts实现简单jira项目,本文通过图文实例相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-07-30
- 这篇文章主要介绍了一百多行代码实现react拖拽hooks,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-21
- 这篇文章主要介绍了react自动化构建路由的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-23
- 这篇文章主要介绍了React中组件之间通信的方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-07-27
- 这篇文章主要介绍了一文帮你理解PReact10.5.13源码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-04
- 这篇文章主要介绍了React Class组件生命周期,包括react组件的两种定义方式和class组件不同阶段生命周期函数执行顺序,本文给大家介绍的非常详细,需要的朋友可以参考下...2021-08-14