0


【React】组件三大核心属性

📘前言

🚩🚩🚩
💎个人主页: 阿选不出来
💨💨💨
💎个人简介: 一名大二在校生,学习方向前端,不定时更新自己学习道路上的一些笔记.
💨💨💨
💎目前开发的专栏: JS 🍭Vue🍭React🍭
💨💨💨

【React】组件三大核心属性

📖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

  1. 给标签设置ref=“username”​ 通过这个获取this.refs.username,ref可以获取到应用的真实dom。
  2. 给组件设置ref=“username”​ 通过这个获取this.refs.username,ref可以获取组件对象。
  3. 新的写法myRef = React.createRef()...<div ref={this.myref}>hello</div><button onClick={()=>{ //访问 console.log(this.myref.current) }}></button>
React.createRef

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


本文转载自: https://blog.csdn.net/m0_63300737/article/details/128889052
版权归原作者 阿选不出来 所有, 如有侵权,请联系我们删除。

“【React】组件三大核心属性”的评论:

还没有评论