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使用refs操作DOM方法详解
React核心就在于虚拟DOM，也就是在React中不总是直接操作页面真实的DOM元素，并且结合Diffing算法，可以做到最小化页面重绘，有些时候不可避免的我们需要一种方法可以操作我们定义的元素标签，并作出对应的修改。在React中提供了一种访问DOM节点的方式，也就是这里的refs
2022-11-11
React之如何在Suspense中优雅地请求数据
Suspense 是 React 中的一个组件，直译过来有悬挂的意思，能够将其包裹的异步组件挂起，直到组件加载完成后再渲染，本文详细介绍了如何在Suspense中请求数据，感兴趣的小伙伴可以参考阅读本文
2023-04-04
React配置Redux并结合本地存储设置token方式
这篇文章主要介绍了React配置Redux并结合本地存储设置token方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-01-01
React组件之多选Checkbox实例
这篇文章主要介绍了React组件之多选Checkbox实例,具有很好的参考价值,希望对大家有所帮助,
2023-10-10
在React中用canvas对图片标注的实现
本文主要介绍了在React中用canvas对图片标注的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-05-05
React+Redux实现简单的待办事项列表ToDoList
这篇文章主要为大家详细介绍了React+Redux实现简单的待办事项列表ToDoList，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
React forwardRef的使用方法及注意点
React.forwardRef的API中ref必须指向dom元素而不是React组件，通过一段示例代码给大家介绍了React forwardRef使用方法及注意点还有一些特殊情况分析，感兴趣的朋友跟随小编一起看看吧
2021-06-06
React组件的用法概述
React组件用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)，这篇文章主要介绍了React组件的用法和理解,需要的朋友可以参考下
2023-02-02
一看就懂的ReactJs基础入门教程-精华版
现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS，ReactJs的虚拟DOM（Virtual DOM）和组件化的开发深深的吸引了我，下面来跟我一起领略ReactJs的风采吧~~ 文章有点长，耐心读完，你会有很大收获哦
2021-04-04
React SSR样式及SEO的实践
这篇文章主要介绍了React SSR样式及SEO的实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10