详解react中的state的简写方式

2024-12-14 01:00:44

前言

什么是state

我们都说React是一个状态机，体现是什么地方呢，就是体现在state上，通过与用户的交互，实现不同的状态，然后去渲染UI,这样就让用户的数据和界面保持一致了。state是组件的私有属性。

在React中，更新组件的state，结果就会重新渲染用户界面(不需要操作DOM),一句话就是说，用户的界面会随着状态的改变而改变。

PS: state 只能在本组件中去初始化，并且 state 只能被本组件去修改和仿问，不能被外部仿问和修改，所以也可以说，state 是组件私有的。

下面介绍下react的state的简写方式吧。

state是react中用来初始化的。this.state 应该被视为一个组件的私有属性，我们的react的state的写法方式式有两种的一种是我们在官网上看到的用constructor(构造器)

 constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

但是在类组件中在使用state时类会继承了React.Component

class Appt extends React.Component{
         //我们定义在这里的state就和上面的方法是一样的
         //	类中可以直接写赋值语句
              state={aff:1}

             render(){
                 console.log(this);
                 //这个this就继承了React.Component
                 // 这里的this是当前组件的实例对象
                 return (
                     <div>
                       123
                     </div>
                 )
             }
       }

       ReactDOM.render(
           <Appt/>,
           document.getElementById('app')
       )

相信大家都想看看这个this打印的是何物不急向下看

这个是我们的简写的state的打印this的结果我们接着看我们官网的方式打印的this的结果，

 class Appt extends React.Component{
        constructor(props) {
            super(props)
            console.log(this,11);
           // 这个是我们正常的一个初始化state的方法
            this.state={
                num: 456
            }
        }
             render(){
                 return (
                     <div>
                       123
                     </div>
                 )
             }
       }

       ReactDOM.render(
           <Appt/>,
           document.getElementById('app')
       )

打印结果是两种方式效果是一样的

State: 总结

state 是组件对象最重要的属性. 值是对象(可以包含多个key-value 的组合)

到此这篇关于react的state的简写方式的文章就介绍到这了,更多相关react的state内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

浅谈React之状态(State)

在React当中,当你更新组件的state,然后新的state就会重新渲染到页面中.在这个时候不需要你操作任何DOM.你也可以认为组件在React当中是一个状态机(State Machines).当用户进行操作时会实现不同的状态,然后再渲染到你的页面中,让你的页面与数据始终保持一致. 如何定义State 定义一个合适的State,是正确创建组件的第一步.State必须能代表一个组件UI呈现的完整状态集,即组件的任何UI改变,都可以从State的变化中反映出来:同时,State还必须是代表一个组件
React 三大属性之state的使用详解

React中很多地方需要用到数据,这在React中被叫做状态,我们需要一个专门管理状态的方法,于是state相关的就诞生了.state应该被要求有两个基本功能,一,能够存储一定的值,从而能被react使用,二,能够再它改变的时候被React监听到并且重新渲染.这里分别介绍一下在类和函数组件中state的写法: 类组件 class ClassComponent extends React.Component{ constructor(props){ super(props) } //可写可不写 r
浅析React 对state的理解

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

一.实现组件的方法: 组件名称首字母必须大写 1.通过JS函数方式实现组件 <div id="app"></div> <script type="text/babel"> var ReactDiv = document.getElementById('app'); function GetReactComp(){ return <p>我是react组件</p> } const hellocomp = <
详解react中的state的简写方式

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

一.是什么我们将组件间通信可以拆分为两个词: 组件通信回顾Vue系列的文章,组件是vue中最强大的功能之一,同样组件化是React的核心思想相比vue,React的组件更加灵活和多样,按照不同的方式可以分成很多类型的组件而通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的,广义上,任何信息的交通都是通信组件间通信即指组件通过某种方式来传递信息以达到某个目的二.如何通信组件传递的方式有很多种,根据传送者和接收者可以分为如下: 父组件向子组件传递子组件向父组件传
详解React中共享组件逻辑的三种方式

废话少说,这三种方式分别是:render props.高阶组件和自定义Hook.下面依次演示假设有一个TimeOnPage组件专门用来记录用户在当前页面停留时间,像这样: const TimeOnPage = () => { const [second, setSecond] = useState(0); useEffect(() => { setTimeout(() => { setSecond(second + 1); }, 1000); }, [second]); return
详解React中key的作用

要了解React中key的作用,可以从key的取值入手,key的取值可以分为三种,不定值.索引值.确定且唯一值在下面的代码中,key的取值是不定值(Math.random()) 问题: 点击按钮的时候,span的颜色会变成红色吗? import React, { useState } from 'react'; function App() { const [initMap, setInitMap] = useState([1,2,3,4]); const handleClick = () =
详解React中的不可变值

什么是不可变值函数式编程是指程序里面的函数和表达式都能像数学中的函数一样,给定了输入值,输出是确定的.比如 let a = 1; let b = a + 1; => a = 1 b = 2; 变量b出现,虽然使用了变量a的值,但是没有修改a的值. 再看我们熟悉的react中的代码,假如初始化了this.state = { count: 1 } componentDidMount() { const newState = { ...state, count: 2 }; // { count: 2
详解React中Props的浅对比

上一周去面试的时候,面试官我PureComponent里是如何对比props的,概念已经牢记脑中,脱口而出就是浅对比,接着面试官问我是如何浅对比的,结果我就没回答上来. 趁着周末,再来看看源码里是如何实现的. 类组件的Props对比类组件是否需要更新需要实现shouldComponentUpdate方法,通常讲的是如果继承的是PureComponent则会有一个默认浅对比的实现. // ReactBaseClasses.js function ComponentDummy() {} Compo
详解React中的this指向

打算记流水账一般细数一下 React 中的 this 指向问题,具体流程按事件三要素:起因,经过,结果.哈哈哈哈哈! 起因: 众所周知,React 的设计是响应式的,使用者无需操纵 DOM,操纵数据,页面就会渲染更新. 数据一变就更新,是更新所有的 DOM 吗?当然不是,哪些变了就重新渲染哪些.那就要对数据变化前后的 DOM 进行比较.直接对比真实 DOM 吗?这样性能会很低,React 比较的是虚拟 DOM,虚拟 DOM 也是对象,只不过相较真实 DOM而言,少了很多属性,更"轻".
详解react hooks组件间的传值方式(使用ts)

目录父传子子传父跨级组件(父传后代) 父传子通过props传值,使用useState来控制state的状态值父组件 Father.tsx里: 子组件 Child.tsx里: 展示效果: 子传父跟react的方式一样,像子组件传入回调函数,通过接收子组件的返回值,再去更新父组件的state 父组件,Father.tsx里: 子组件,Child.tsx里: 展示效果: 子传父优化版,使用useCallback存放处理事件的函数父组件,Father.tsx里: 子组件,Child.tsx
详解Python中matplotlib模块的绘图方式

目录 1.matplotlib之父简介 2.matplotlib图形结构 3.matplotlib两种画绘图方法方法一:使用matplotlib.pyplot 方法二:面向对象方法 1.matplotlib之父简介 matplotlib之父John D. Hunter已经去世,他的一生辉煌而短暂,但是他开发的的该开源库还在继续着辉煌.国内介绍的资料太少了,查阅了一番整理如下: 1968 出身于美国的田纳西州代尔斯堡. 之后求学于普林斯顿大学. 2003年发布Matplotlib 0.1版,初衷
详解C++ 中的三种继承方式

public 方式继承基类成员对派生类的可见性对派生类来说,基类的公有成员和保护成员可见,基类的公有成员和保护成员作为派生类的成员时,它们都保持原有的状态;基类的私有成员不可见,基类的私有成员仍然是私有的,派生类不可访问基类中的私有成员. 基类成员对派生类对象的可见性对派生类对象来说,基类的公有成员是可见的,其他成员是不可见的. 所以,在公有继承时,派生类的对象可以访问基类中的公有成员,派生类的成员函数可以访问基类中的公有成员和保护成员. 简单来说,派生类能访问基类的public, prote

详解react中的state的简写方式

前言

什么是state

State: 总结

相关推荐

随机推荐