React的三大核心屬性是什么

今天小編給大家分享一下React的三大核心屬性是什么的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

1、State 屬性

React 把組件看成是一個狀態(tài)機（State Machines）。通過與用戶的交互，實現(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 <h5>{this.state.name}</h5>
    }
}
ReactDOM.render(<Student/>,document.getElementById('root'))

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

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

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

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

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

2、Props  屬性

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

props屬性的特點

1.每個組件對象都會有props（properties的簡寫）屬性

2.組件標簽的所有屬性都保存在props中

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

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

5.對props中的屬性值進行類型限制和必要性限制

類組件：

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ù)都是外界傳遞過來的；

• state中的數(shù)據(jù)都是組件私有的；（通過Ajax獲取回來的數(shù)據(jù)，一般都是私有數(shù)據(jù)）

• props中的數(shù)據(jù)都是只讀的，不能重新賦值；

• state中的數(shù)據(jù)，都是可讀可寫的；

• 子組件只能通過props傳遞數(shù)據(jù)；

3、Refs  屬性 

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

React文檔中再三強調(diào)，請不要過度使用refs，所以當我們可以用dom原生對象解決時，盡量不要使用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>
    )
}

以上就是“React的三大核心屬性是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關(guān)注億速云行業(yè)資訊頻道。