React 组件中的state和setState()你知道多少
更新时间：2022年03月18日 14:54:01 作者：cs_upupo
这篇文章主要为大家详细介绍了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'));总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
相关文章
这篇文章主要介绍了React中使用外部样式的3种方式(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
本文主要介绍了React组件中默认封装了很多属性，有的是提供给开发者操作的，其中有三个属性非常重要：state、props、refs。感兴趣的小伙伴可以参考阅读2023-03-03
这篇文章主要介绍了React中重新实现强制实施表单的流程步骤,就像设计人员一样,在添加逻辑之前,您需要为不同的状态“模拟”或创建“模拟”,例如,这里只是表单的视觉部分的模拟,文中通过代码示例讲解的非常详细,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了优雅的在React项目中使用Redux的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了react中的渲染机制以及相关的优化方案，内容包括react渲染步骤、concurrent机制以及产生作用的机会，简单模拟实现 concurrent mode，基于作业调度优先级的思路进行项目优化的两个hooks，感兴趣的小伙伴跟着小编一起来看看吧2023-07-07
react + vite + ts项目中优雅使用.svg文件
这篇文章主要为大家介绍了react + vite + ts项目中优雅使用.svg文件,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
React系列useSyncExternalStore学习详解
这篇文章主要为大家介绍了React系列useSyncExternalStore的学习及示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
React合成事件原理及实现(React18和React16)
本文主要介绍了React合成事件原理及实现,包含React18和React16两种版本,具有一定的参考价值,感兴趣的可以了解一下2025-02-02
react-native ListView下拉刷新上拉加载实现代码
本篇文章主要介绍了react-native ListView下拉刷新上拉加载实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
用表格进行页面布局,页面布局在各种浏览器的的兼容性, 本文主要介绍了详解React中合并单元格的正确写法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
最新评论