react组件三大属性(react组件constructor)

react组件三大属性(react组件constructor)div id navCategory div state 是组件对象最重要的属性 值是对象 可以包含多个 key value 的组合 组件被成为 状态机 通过更新组件的 state 来更新对应的页面显示 重新渲染组件 一 定义 state 访问 state 写法一 常用 简写 直接向 class

大家好,我是讯享网,很高兴认识大家。



 <div id="navCategory"></div> 

讯享网

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

组件被成为“状态机”,通过更新组件的state来更新对应的页面显示(重新渲染组件)。

一、定义state,访问state

写法一(常用、简写)

直接向class App添加state属性

写法二(了解)

使用构造器,初始化一个state属性

二、修改state

想要修改state中的数据,我们就需要自定义一个修改state的方法。

如何自定义这个方法并且调用?

关键点在于,this指向应为App这个类的实例对象

如何修改state对象中的数据?

state状态数据,不支持直接修改或更新!需要借助setState!

是纯js对象,在Vue中,data属性是利用 处理过的,更改data的数据的时候会触发数据的和,但是React中没有做这样的处理,如果直接更改的话,react是无法得知的,所以,需要使用特殊的更改状态的方法 。

实例:

修改state.isHot 的值。

此处被修改后的结果为:

setState可以更新state ,且更新是一种合并不是替换!


讯享网

特别注意:不能直接修改状态(state),可能会造成不可预期的后果!

扩展:

假如state属性中存有一个数组,如何修改这个数组的值呢?

切记不能写成这样!!

解决办法:

由于我们不能直接修改state中的数据,所以需要将 list 这个数组深复制一份,对复制得来的新数组进行修改并使用setState传入。

setState更新状态不总是异步的。

setState还接收第二个参数,第二个参数是回调函数,当状态和 dom更新完后就会被触发。

是从外部传入的,组件内部也可以通过一些方式来初始化的设置,属性不能被组件自己更改,但是你可以通过父组件主动重新渲染的方式传入新的 。

在组件上采用 的形式写下属性,子组件通过 获取属性。

使用展开运算符

注意:在原生js下,使用展开运算符展开一个对象,这种写法是会报错的。

但在babel和react的影响下,这种写法不会报错,展开运算符也可以展开一个对象了,但仅仅适用于标签语法中。

首先需要引入

写法一:

写在类的内部

写法二:

写在类的外部

对标签属性进行类型限制

对属性进行必要性限制

引入

写法一:

写在类的内部

写法二:

写在类的外部

例:

不能在子组件修改!!!

的主要作用是用于组件保存、控制、修改自己的可变状态。在组件内部初始化,可以被组件自身修改,而外部不能修改也不能访问。你可以认为 是一个局部的、只能被组件自身控制的数据源。 中状态可以通过 方法进行更新,会导致组件的重新渲染。

的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数,组件内部无法控制也无法修改。除非外部组件主动传入新的 ,否则组件的 永远保持不变。

没有 的组件叫无状态组件(stateless component),设置了state的叫做有状态组件(stateful component)。因为状态会带来管理的复杂性,我们尽量多地写无状态组件,尽量少地写有状态地组件。这样会降低代码维护地难度,也会在一定程度上增强组件的可复用性。

给标签设置ref=“username”

​ 通过这个获取this.refs.username,ref可以获取到应用的真实dom。

给组件设置ref=“username”

​ 通过这个获取this.refs.username,ref可以获取组件对象。

新的写法

调用后可以返回一个容器,该容器可以存储被Ref所标识的节点,该容器&ldquo;专人专用&rdquo;。

到此这篇关于React组件三大核心属性State props Refs介绍的文章就介绍到这了,更多相关React state props refs内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

小讯
上一篇 2025-06-10 11:38
下一篇 2025-04-30 14:04

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/153655.html