深入理解React 三大核心屬性

更新時(shí)間：2022年02月21日 10:22:29 作者：s_kzn

本文主要介紹了React 三大核心屬性，主要包括State屬性，Props屬性，Refs屬性，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

1、State 屬性

React 把組件看成是一個(gè)狀態(tài)機(jī)（State Machines）。通過(guò)與用戶的交互，實(shí)現(xiàn)不同狀態(tài)，然后渲染 UI，讓用戶界面和數(shù)據(jù)保持一致。

React 里，只需更新組件的 state，然后根據(jù)新的 state 重新渲染用戶界面（不要操作 DOM）。

import React from 'react ';
import ReactDom from 'react-dom';
?
?
class Student extends React.Component{
? ? constructor() {
? ? ? ? super();
? ? ? ? this.state={
? ? ? ? ? ? name:'花少北'
? ? ? ? }
? ? }
? ? render() {
? ? ? ? this.state.name='老番茄';
? ? ? ? return <h4>{this.state.name}</h4>
? ? }
}
ReactDOM.render(<Student/>,document.getElementById('root'))

在React中，一個(gè)組件中要讀取當(dāng)前狀態(tài)需要訪問(wèn) this.state, 而 state 是可以被修改的，但是，要更新數(shù)據(jù)直接給 this.state 賦值是不可行的，必須要使用 setState（）

?this.setState() {
? ? ? ? name:'某幻'
? ? }

（1）setState 不會(huì)立刻改變React組件中state的值.

（2）setState 通過(guò)觸發(fā)一次組件的更新來(lái)引發(fā)重繪.

（3）多次 setState 函數(shù)調(diào)用產(chǎn)生的效果會(huì)合并。

2、Props 屬性

react中說(shuō)的單向數(shù)據(jù)流值說(shuō)的就是props，根據(jù)這一特點(diǎn)它還有一個(gè)作用：組件之間的通信。props本身是不可變的，但是有一種情形它貌似可變，即是將父組件的state作為子組件的props，當(dāng)父組件的state改變，子組件的props也跟著改變，其實(shí)它仍舊遵循了這一定律：props是不可更改的。

props屬性的特點(diǎn)

1.每個(gè)組件對(duì)象都會(huì)有props（properties的簡(jiǎn)寫）屬性

2.組件標(biāo)簽的所有屬性都保存在props中

3.內(nèi)部讀取某個(gè)屬性值：this.props.propertyName

4.作用：通過(guò)標(biāo)簽屬性從組件外向組件內(nèi)傳遞數(shù)據(jù)（只讀 read only）

5.對(duì)props中的屬性值進(jìn)行類型限制和必要性限制

類組件：

import React from 'react ';
import ReactDom from 'react-dom';
// 函數(shù)組件
function ?Student(props){
? ? return <p>{props.name} {props.address}</p>
}
?
const ?Stu={
? ? name:'某幻',
? ? ? ? address:'青島'
}
?
ReactDOM.render(<Student{...Stu} ></Student>,document.getElementById('root'))

函數(shù)組件：

import React from 'react ';
import ReactDom from 'react-dom';
class Student extends React.Component{
? ? render() {
? ? ?return(
? ? ? ? ?<p>{this.props.name} {this.props.address}</p>
? ? ?)
? ? }
}
const ?Stu={
? ? name:'某幻',
? ? ? ? address:'青島'
}
ReactDOM.render(<Student{...Stu} ></Student>,document.getElementById('root'))

props 屬性和 state 屬性的區(qū)別

props中的數(shù)據(jù)都是外界傳遞過(guò)來(lái)的；
state中的數(shù)據(jù)都是組件私有的；（通過(guò)Ajax獲取回來(lái)的數(shù)據(jù)，一般都是私有數(shù)據(jù)）
props中的數(shù)據(jù)都是只讀的，不能重新賦值；
state中的數(shù)據(jù)，都是可讀可寫的；
子組件只能通過(guò)props傳遞數(shù)據(jù)；

3、Refs 屬性

定義：組件內(nèi)的標(biāo)簽可以定義ref屬性類標(biāo)識(shí)自己，有點(diǎn)類似與JS中的id

React文檔中再三強(qiáng)調(diào)，請(qǐng)不要過(guò)度使用refs，所以當(dāng)我們可以用dom原生對(duì)象解決時(shí)，盡量不要使用refs 依照之前的寫法，首先是給出類組件和函數(shù)組件中refs的寫法

ref 的三種形式

（1）字符串形式

【官方不推薦】

class App extends React.Component{
? ? changeInput = ()=>{
? ? ? ? const {input} = this.refs
? ? }
? ? render() {
? ? ? ? return (
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <input type="text" placeholder={"please input your value"} onBlur={this.changeInput} ref={"input"}/>
? ? ? ? ? ? </div>
? ? ? ? )
? ? }
}

（2）函數(shù)回調(diào)形式

class App extends React.Component{
? ? changeInput = ()=>{
? ? ? ? console.log(this.inputRef);
? ? }
? ? render() {
? ? ? ? return (
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <input type="text" placeholder={"please input your value"} onBlur={this.changeInput} ref={(el)=>{this.inputRef = el}}/>
? ? ? ? ? ? </div>
? ? ? ? )
? ? }
}

（3）createRef 創(chuàng)建 ref 容器

【目前官方最推薦的一種】

class App extends React.Component{
? ? inputRef = React.createRef()
? ? changeInput = ()=>{
? ? ? ? console.log(this.inputRef.current);
? ? }
? ? render() {
? ? ? ? return (
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <input type="text" placeholder={"please input your value"} onBlur={this.changeInput} ref={this.inputRef}/>
? ? ? ? ? ? </div>
? ? ? ? )
? ? }
}

函數(shù)組件的寫法

function App(){
? ? const inputRef = useRef("")
? ? return (
? ? ? ? <div>
? ? ? ? ? ? <input type="text" placeholder={"please input your value"} ref={inputRef}/>
? ? ? ? </div>
? ? )
}

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

您可能感興趣的文章: