React 组件中的state和setState()你知道多少

2024-08-05 22:48:11

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中setState源码

React作为一门前端框架,虽然只是focus在MVVM中的View部分,但还是实现了View和model的绑定.修改数据的同时,可以实现View的刷新.这大大简化了我们的逻辑,只用关心数据流的变化,同时减少了代码量,使得后期维护也更加方便.这个特性则要归功于setState()方法.React中利用队列机制来管理state,避免了很多重复的View刷新.下面我们来从源码角度探寻下setState机制. 1 还是先声明一个组件,从最开始一步步来寻源: class App extends Comp
详解react setState

setState是同步还是异步自定义合成事件和react钩子函数中异步更新state 以在自定义click事件中的setState为例 import React, { Component } from 'react'; class Test extends Component { constructor(props) { super(props); this.state = { count: 1 }; } handleClick = () => { this.setState({ count:
深入理解React State 原理

目录问题:setState 到底是同步还是异步的? 类组件state setState原理揭秘函数组件state 问题:setState 到底是同步还是异步的? 如果对 React 底层有一定了解,可以回答出 batchUpdate 批量更新概念,以及批量更新被打破的条件. 答案:有时是同步,有时是异步. 在合成事件和生命周期函数里是异步的在原生事件和 setTimeout.promise里是同步的造成setState的异步并不是由内部的异步代码引起的,在本身的执行过程
详解react中的state的简写方式

前言什么是state 我们都说React是一个状态机,体现是什么地方呢,就是体现在state上,通过与用户的交互,实现不同的状态,然后去渲染UI,这样就让用户的数据和界面保持一致了.state是组件的私有属性. 在React中,更新组件的state,结果就会重新渲染用户界面(不需要操作DOM),一句话就是说,用户的界面会随着状态的改变而改变. PS: state 只能在本组件中去初始化,并且 state 只能被本组件去修改和仿问,不能被外部仿问和修改,所以也可以说,state 是组件私有的.
深入掌握 react的 setState的工作机制

react 是单向数据流,若想要改变已有组件的外观,我们只能通过更改组件的 props 或者更新组件的 state.在 react 项目的代码中我们操作最多的就是 this.setState 方法.下面对 setState 方法进行详细的说明.  setState要点:react 框架为了提高性能,会对 state 的更新进行收集.合并.再进行一次批量的状态更新.这种机制常常导致一些意想不到的情况. setState 有两种调用形式: 向 setState 传递对象 s
浅析React 对state的理解

如何定义复杂组件(类组件)与简单组件(函数组件)? 是否具有状态(state) 引出问题,什么是状态? 举个例子,今天考试,考砸了,因为我状态不好,是状态影响了我的行为. 组件中的状态,驱动了页面更新,换句话说,组件状态中存着数据,数据的改变,驱动页面的更新. 这里要了解,state状态是谁身上的状态?state状态是组件实例对象身上的状态,不是组件类本身身上的,是由这个类缔造的实例身上的. (class)组件实例上三大属性之一:state 显示内容实现一个需求,通过点击页面,炎热/凉爽切换
React 组件中的state和setState()你知道多少

目录 state的基本使用 setState()修改状态解决方法: 总结 state的基本使用状态(state)即数据,是组件内部的私有数据,只能在组件内部使用 state的值是对象,可以通过this.state来获取状态. setState()修改状态状态是可变的,可以通过this.setState({要修改的数据})来改变状态注意:跟vue语法不同,不要直接修改state中的值,这时错误的! //正确 this.setState({ count:this.state.count+1
react学习笔记之state以及setState的使用

在react中通过 state 以及 setState() 来控制组件的状态. state state 是 react 中用来存储组件数据状态的,可以类比成 vue 中的 data. 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说,就是用户界面会随着state变化而变化. 2.state工作
React 组件中的 bind(this)示例代码

React 组件中处理 onClick 类似事件绑定的时候,是需要显式给处理器绑定上下文(context)的,这一度使代码变得冗余和难看. 请看如下的示例: class App extends Component { constructor() { super(); this.state = { isChecked: false }; } render() { return ( <div className="App"> <label > check me: &
react组件中过渡动画的问题解决

目录一.是什么二.如何实现 CSSTransition SwitchTransition TransitionGroup 一.是什么在日常开发中,页面切换时的转场动画是比较基础的一个场景当一个组件在显示与消失过程中存在过渡动画,可以很好的增加用户的体验在react中实现过渡动画效果会有很多种选择,如react-transition-group,react-motion,Animated,以及原生的CSS都能完成切换动画二.如何实现在react中,react-transition-g
react组件中的constructor和super知识点整理

1.react中用class申明的类一些小知识如上图:类Child是通过class关键字申明,并且继承于类React. A.Child的类型是? typeofChild === 'function' , 其实就相当于ES5用function申明的构造函数 function Child() { //申明构造函数 } B.Child类调用时候( new Child() ),会优先执行,并且自动执行Child的constructor函数. constructor() { console.log('执
在React 组件中使用Echarts的示例代码

在完成一个需求的时候碰到一个场景需要使用柱状图.涉及到可视化,第一反应当然是Echarts了.平时用js加载Echarts组件很方便,但是在React中就要费下神了.各种连蒙带猜实现了.edmo里的这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法. 我们在使用ECharts之前要先安装ECharts,在以往的开发模式中,我们很多使用就是把官网中的ECharts的核心js文件
React组件中的this的具体使用

React组件的this是什么通过编写一个简单组件,并渲染出来,分别打印出自定义函数和render中的this: import React from 'react'; const STR = '被调用,this指向:'; class App extends React.Component{ constructor(){ super() } //测试函数 handler() { console.log(`handler ${STR}`,this); } render(){ console.log
React组件封装中三大核心属性详细介绍

目录 1.介绍 2.state 概念演示 3.props 概念 props与state区别 4.refs 概念 refs种类 5.父子组件什么是父子组件父子组件之间传值 1.介绍 React组件中默认封装了很多属性,有的是提供给开发者操作的,其中有三个属性非常重要:state.props.refs. 2.state 概念 state是类组件的一个默认属性,用于标识类组件的状态,负责更新UI,让页面动态变化,当state变化时,组件将被重新渲染. 函数组件没有对象属性(babel默认开启了局
编写React组件项目实践分析

当我刚开始写React的时候,我看过很多写组件的方法.一百篇教程就有一百种写法.虽然React本身已经成熟了,但是如何使用它似乎还没有一个"正确"的方法.所以我(作者)把我们团队这些年来总结的使用React的经验总结在这里.希望这篇文字对你有用,不管你是初学者还是老手. 开始前: 我们使用ES6.ES7语法如果你不是很清楚展示组件和容器组件的区别,建议您从阅读这篇文章开始如果您有任何的建议.疑问都清在评论里留言基于类的组件现在开发React组件一般都用的是基于类的组件.下面我们就来
详解在React.js中使用PureComponent的重要性和使用方式

一.介绍PureComponent React 15.3在2016.06.29发布了,这个版本最值得关注的是支持了 React.PureComponent ,它取代了之前的 pure-render-mixin .在本文中,我们将讨论 PureComponent 的重要性和使用场景. React.PureComponent最重要的一个用处就是优化React应用,这很容易快速地实现.使用 React.PureComponent 对性能的提升是非常可观的,因为它减少了应用中的渲染次数. PureCom

React 组件中的state和setState()你知道多少

目录

state的基本使用

setState()修改状态

解决方法：

总结

相关推荐

随机推荐