入門React的這些重要知識點你都知道嗎

Posted on by

1、State 屬性

React 把組件看成是一個狀態機（State Machines）。通過與用戶的交互，實現不同狀態，然後渲染 UI，讓用戶界面和數據保持一致。

React 裡，隻需更新組件的 state，然後根據新的 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中，一個組件中要讀取當前狀態需要訪問 this.state, 而 state 是可以被修改的，但是，要更新數據直接給 this.state 賦值是不可行的，必須要使用 setState（）

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

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

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

（3）多次 setState 函數調用產生的效果會合並。

2、Props  屬性

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

props屬性的特點

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

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

3.內部讀取某個屬性值：this.props.propertyName

4.作用：通過標簽屬性從組件外 向組件內傳遞數據（隻讀 read only）

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

類組件：

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

  函數組件：

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 屬性的區別

  • props中的數據都是外界傳遞過來的；
  • state中的數據都是組件私有的；（通過Ajax獲取回來的數據，一般都是私有數據）
  • props中的數據都是隻讀的，不能重新賦值；
  • state中的數據，都是可讀可寫的；
  • 子組件隻能通過props傳遞數據；

3、Refs  屬性 

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

React文檔中再三強調，請不要過度使用refs，所以當我們可以用dom原生對象解決時，盡量不要使用refs 依照之前的寫法，首先是給出類組件和函數組件中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）函數回調形式

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 創建 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>
        )
    }
}

函數組件的寫法

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

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!   

推薦閱讀：