首页 > 资讯 > 前端开发 > JavaScript >React组件三大核心属性StatepropsRefs介绍

470

分享到

React组件三大核心属性StatepropsRefs介绍

React state props refs React组件属性 2023-02-15 09:02:25 470人浏览八月长安

摘要

目录1.statesetState2.props1.传递单个属性2.批量传递属性对props进行限制对props设置默认值state与props的区别3.ref1.state sta

1.state

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

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

一、定义state，访问state

写法一（常用、简写）

直接向class App添加state属性

import React, { Component } from 'react'
export default class App extends Component {
    // ====定义state写法一====
    state = {
        isCollect: false,
        myname:"Kerwin"
    }
  render() {
    return (
      <div>
        <h1>欢迎来到react开发-{this.state.myname}</h1>
      </div>
    )
  }
}

写法二（了解）

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

import React, { Component } from 'react'
export default class App extends Component {
    // ====定义state写法二====
   	constructor(){
        super()
        this.state = {
            isCollect:false,
            myname:"Kerwin"
        }
    } 
  render() {
    return (
      <div>
        <h1>欢迎来到react开发-{this.state.myname}</h1>
      </div>
    )
  }

二、修改state

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

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

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

...
render(){
    {}
    <button onClick={this.handleAddClick}>add</button>
    {}
    <button onClick={this.handleDelClick(index)}>delete</button>
}
handleAddClick= ()=>{}
handleDelClick(){}

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

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

setState

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

实例：

修改state.isHot 的值。

...
state = {isHot: true,wind: '微风'}
render(){
    return (
    	<div>
        	<h1 onClick={this.changeWeather}>天气：{this.state.isHot}-{this.state.wind}</h1>
        </div>
    )
}
...
changeWeather = ()=>{
    const isHot = this.state.isHot
    this.setState({isHot:!isHot})
}
...

此处state被修改后的结果为： state = {isHot: false, wind:'微风'}

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

特别注意：不能直接修改状态（state），可能会造成不可预期的后果！

扩展：

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

state = {
    list: ['aaa','bbb','ccc']
}

切记不能写成这样!!

const newlist = this.state.list
newlist.push('DDD')

解决办法：

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

//法一
const newlist = [...this.state.list]
//法二
const newlist = this.state.list.concat()
//法三
const newlist = this.state.list.slice()
//...

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

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

2.props

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

1.传递单个属性

在组件上采用 key=value的形式写下属性，子组件通过 this.props获取属性。

<Person name="Alice"></Person>

const {name} = this.props

2.批量传递属性

使用展开运算符

const p = {name:'Alice',age:23,sex:'女'}
...
<Person {...p}></Person>

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

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

对props进行限制

首先需要引入

import PropTypes from 'prop-types'

写法一：

写在类的内部

static propTypes = {
    '标签属性'：'限制'
}

写法二：

写在类的外部

类名.propTypes = {
	//...
}

对标签属性进行类型限制

import PropTypes from 'prop-types'
...
static propTypes = {
	name: PropTypes.string, //限制name属性为字符串类型
	age: PropTypes.number, //限制age为数值
 	speak: PropTypes.func, //限制speak为函数
    isStudent: PropTypes.bool, //限制isStudent为布尔值
}

对属性进行必要性限制

PropTypes.string.isRequired

对props设置默认值

引入

import PropTypes from 'prop-types'

写法一：

写在类的内部

static defaultProps = {
    标签属性：默认值
}

写法二：

写在类的外部

类名.defaultProps = {
	//...
}

例：

import PropTypes from 'prop-types'
...
static propTypes = {
	age:18 //默认age为18
}

props 不能在子组件修改!!!

state与props的区别

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

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

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

3.ref

给标签设置ref=“username”

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

给组件设置ref=“username”

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

新的写法

myRef = React.createRef()
...
<div ref={this.myref}>hello</div>
<button onClick={()=>{
         //访问
        console.log(this.myref.current)
    }}></button>

React.createRef调用后可以返回一个容器，该容器可以存储被Ref所标识的节点，该容器“专人专用”。

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

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: React组件三大核心属性StatepropsRefs介绍

本文链接: https://www.lsjlt.com/news/196112.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

React组件三大核心属性StatepropsRefs介绍

目录1.statesetState2.props1.传递单个属性2.批量传递属性对props进行限制对props设置默认值state与props的区别3.ref1.state sta...

99+

2023-02-15

React state props refs React组件属性
React组件封装中三大核心属性详细介绍

目录1、介绍2、state概念演示3、props概念props与state区别4、refs概念refs种类5、父子组件什么是父子组件父子组件之间传值1、介绍 React组件中默认封装...

99+

2024-04-02
React组件实例三大属性statepropsrefs使用详解

目录一、 State1.概念2.State的简单用法3. JS绑定事件4.react 绑定事件5.react this指向问题6.修改state值7.代码简写二、props...

99+

2024-04-02
深入理解React三大核心属性

目录1、State属性2、Props 属性3、Refs 属性（1）字符串形式（2）函数回调形式（3）createRef创建ref容器1、State 属...

99+

2024-04-02
React的三大核心属性是什么

今天小编给大家分享一下React的三大核心属性是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。1、State 属性Rea...

99+

2023-06-29
React组件三大属性之state,props,refs

目录1.1基本理解和使用1.1.1 使用React开发者工具调试1.1.2 定义组件的方式1.1.3 注意1.1.4 渲染类组件标签的基本流程1.2 组件实例的三大核心属性之一：st...

99+

2024-04-02
阿里云数据库核心组件介绍

阿里云数据库的核心组件包括数据存储引擎、SQL执行引擎、监控系统和安全防护等。这些组件协同工作，为用户提供稳定、高效的数据处理服务。数据存储引擎数据存储引擎是数据库的核心部分，负责存储和管理数据。阿里云数据库采用分布式架构，每个节点都有一...

99+

2024-01-25

阿里组件核心
vue组件三大核心的示例分析

这篇文章主要介绍了vue组件三大核心的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。一、属性 1.自定义属性propsprop 定义...

99+

2024-04-02
如何Knative中的Build、Serving 和 Eventing三大核心组件

本篇文章给大家分享的是有关如何Knative中的Build、Serving 和 Eventing三大核心组件，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。作者 | 阿里云智能事...

99+

2023-06-04
Vue.jS组件参数名命名与组件属性转化的简单介绍

这篇文章主要介绍“Vue.jS组件参数名命名与组件属性转化的简单介绍”，在日常操作中，相信很多人在Vue.jS组件参数名命名与组件属性转化的简单介绍问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方...

99+

2024-04-02