1.state

state是組件對象最重要的屬性，值是對象（可以包含多個key-value的組合）。

組件被成為“狀態(tài)機”，通過更新組件的state來更新對應(yīng)的頁面顯示（重新渲染組件）。

一、定義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開發(fā)-{this.state.myname}</h1>
      </div>
    )
  }
}

寫法二（了解）

使用構(gòu)造器，初始化一個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開發(fā)-{this.state.myname}</h1>
      </div>
    )
  }

二、修改state

想要修改state中的數(shù)據(jù)，我們就需要自定義一個修改state的方法。

如何自定義這個方法并且調(diào)用？

關(guān)鍵點在于，this指向應(yīng)為App這個類的實例對象

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

如何修改state對象中的數(shù)據(jù)?

state狀態(tài)數(shù)據(jù)，不支持直接修改或更新！需要借助setState！

setState

this.state 是純js對象，在Vue中，data屬性是利用object.defineProperty 處理過的，更改data的數(shù)據(jù)的時候會觸發(fā)數(shù)據(jù)的getter和setter，但是React中沒有做這樣的處理，如果直接更改的話，react是無法得知的，所以，需要使用特殊的更改狀態(tài)的方法 setState。

實例：

修改state.isHot 的值。

...
state = {isHot: true,wind: '微風(fēng)'}
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被修改后的結(jié)果為： state = {isHot: false, wind:'微風(fēng)'}

setState可以更新state ,且更新是一種合并不是替換！

特別注意：不能直接修改狀態(tài)（state），可能會造成不可預(yù)期的后果！

擴展：

假如state屬性中存有一個數(shù)組，如何修改這個數(shù)組的值呢？

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

切記不能寫成這樣!!

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

解決辦法：

由于我們不能直接修改state中的數(shù)據(jù)，所以需要將 list 這個數(shù)組深復(fù)制一份，對復(fù)制得來的新數(shù)組進行修改并使用setState傳入。

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

setState更新狀態(tài)不總是異步的。

setState還接收第二個參數(shù)，第二個參數(shù)是回調(diào)函數(shù)，當(dāng)狀態(tài)和 dom更新完后就會被觸發(fā)。

2.props

props是從外部傳入的，組件內(nèi)部也可以通過一些方式來初始化的設(shè)置，屬性不能被組件自己更改，但是你可以通過父組件主動重新渲染的方式傳入新的 props。

傳遞單個屬性

在組件上采用 key=value的形式寫下屬性，子組件通過 this.props獲取屬性。

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

const {name} = this.props

批量傳遞屬性

使用展開運算符

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

注意：在原生js下，使用展開運算符展開一個對象，這種寫法是會報錯的。

但在babel和react的影響下，這種寫法不會報錯，展開運算符也可以展開一個對象了，但僅僅適用于標簽語法中。

對props進行限制

首先需要引入

import PropTypes from 'prop-types'

寫法一：

寫在類的內(nèi)部

static propTypes = {
    '標簽屬性'：'限制'
}

寫法二：

寫在類的外部

類名.propTypes = {
	//...
}

對標簽屬性進行類型限制

import PropTypes from 'prop-types'
...
static propTypes = {
	name: PropTypes.string, //限制name屬性為字符串類型
	age: PropTypes.number, //限制age為數(shù)值
 	speak: PropTypes.func, //限制speak為函數(shù)
    isStudent: PropTypes.bool, //限制isStudent為布爾值
}

對屬性進行必要性限制

PropTypes.string.isRequired 

對props設(shè)置默認值

引入

import PropTypes from 'prop-types'

寫法一：

寫在類的內(nèi)部

static defaultProps = {
    標簽屬性：默認值
}

寫法二：

寫在類的外部

類名.defaultProps = {
	//...
}

例：

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

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

state與props的區(qū)別

state的主要作用是用于組件保存、控制、修改自己的可變狀態(tài)。state在組件內(nèi)部初始化，可以被組件自身修改，而外部不能修改也不能訪問。你可以認為 state是一個局部的、只能被組件自身控制的數(shù)據(jù)源。 state中狀態(tài)可以通過 this.setState方法進行更新，setState會導(dǎo)致組件的重新渲染。

props的主要作用是讓使用該組件的父組件可以傳入?yún)?shù)來配置該組件。它是外部傳進來的配置參數(shù)，組件內(nèi)部無法控制也無法修改。除非外部組件主動傳入新的 props，否則組件的 props永遠保持不變。

沒有 state的組件叫無狀態(tài)組件（stateless component），設(shè)置了state的叫做有狀態(tài)組件（stateful component）。因為狀態(tài)會帶來管理的復(fù)雜性，我們盡量多地寫無狀態(tài)組件，盡量少地寫有狀態(tài)地組件。這樣會降低代碼維護地難度，也會在一定程度上增強組件的可復(fù)用性。

3.ref

給標簽設(shè)置ref=“username”

? 通過這個獲取this.refs.username，ref可以獲取到應(yīng)用的真實dom。

給組件設(shè)置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調(diào)用后可以返回一個容器，該容器可以存儲被Ref所標識的節(jié)點，該容器“專人專用”。

到此這篇關(guān)于React組件三大核心屬性State props Refs介紹的文章就介紹到這了,更多相關(guān)React state props refs內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論