React三大屬性

props

• 組件是封閉的，接收外部數(shù)據(jù)應(yīng)該通過(guò)props來(lái)實(shí)現(xiàn)
• 函數(shù)組件通過(guò)參數(shù)props來(lái)接收數(shù)據(jù)，props是一個(gè)對(duì)象； 類(lèi)組件通過(guò)this.props接收數(shù)據(jù)。
• 傳遞數(shù)據(jù)：在組件標(biāo)簽上添加屬性

函數(shù)組件

const Hello = (props) => {
    console.log(props);
    return (
        <div>props:{props.name}</div>
    )
}
ReactDOM.render(<Hello name="mimi" />, document.getElementById('root'))

類(lèi)組件

class App extends React.Component {
    render() {
        console.log(this.props);
        return (
            <div>
                props: {this.props.name}
            </div>
        )
    }
}
ReactDOM.render(<App name="mimi" />, document.getElementById('root'))

在繼承類(lèi)的構(gòu)造函數(shù)中必須調(diào)用super函數(shù)，super代表父類(lèi)的構(gòu)造函數(shù)。ES6 要求，子類(lèi)的構(gòu)造函數(shù)必須執(zhí)行一次super函數(shù)，否則會(huì)報(bào)錯(cuò)。但是super函數(shù)內(nèi)的this指向的是當(dāng)前類(lèi)的實(shí)例。

構(gòu)造器是否接受 props，是否傳遞給 super，取決于是否希望在構(gòu)造器中通過(guò) this訪(fǎng)問(wèn)props。

• 當(dāng)構(gòu)造器中接收了props參數(shù)，super沒(méi)有傳遞props，此時(shí)this.props是undefined，當(dāng)然可以正常使用props（前邊不加this）
• 當(dāng)構(gòu)造器中接收了props參數(shù)，super也傳遞props，可以通過(guò)this.props拿到對(duì)象。

原因：類(lèi)組件會(huì)繼承React.Component，而Component的源碼是：

function Component(props, context, updater) {
  this.props = props;      //綁定props
  this.context = context;  //綁定context
  this.refs = emptyObject; //綁定ref
  this.updater = updater || ReactNoopUpdateQueue; //上面所屬的updater 對(duì)象
}

當(dāng)我們?cè)陬?lèi)組件中調(diào)用super，實(shí)際上是在執(zhí)行父類(lèi)的構(gòu)造函數(shù)，如果沒(méi)有將props傳入super函數(shù)，那么在子類(lèi)的構(gòu)造函數(shù)中，this.props是undefined。

為什么仍然可以在 render和其他方法中訪(fǎng)問(wèn) this.props。因?yàn)镽eact 會(huì)在構(gòu)造函數(shù)被調(diào)用之后，會(huì)把 props 賦值給剛剛創(chuàng)建的實(shí)例對(duì)象。

state

有狀態(tài)組件和無(wú)狀態(tài)組件

• 函數(shù)組件又叫做無(wú)狀態(tài)組件，函數(shù)組件沒(méi)有自己的狀態(tài)，只負(fù)責(zé)數(shù)據(jù)的靜態(tài)展示。
• 類(lèi)組件又叫做有狀態(tài)組件，類(lèi)組件有自己的狀態(tài)，負(fù)責(zé)更新UI，讓頁(yè)面動(dòng)起來(lái)。
• 狀態(tài)（state）就是數(shù)據(jù)，是組件內(nèi)部的私有數(shù)據(jù)，只能在組件內(nèi)部使用。

每個(gè)組件都有state,它的值是對(duì)象類(lèi)型；組件state屬性的初始化放在構(gòu)造方法中。

class App extends React.Component {
    constructor() {
        super();
        // 初始化state
        this.state = {
            count: 0
        }
    }
    render() {
        return (
            <div>計(jì)數(shù)器：{this.state.count}</div>
        )
    }
}
ReactDOM.render(<App2 />, document.getElementById('root'))

• 狀態(tài)是可變的:this.setState({要修改的數(shù)據(jù)})
• 注意不要直接通過(guò)this.state.x = y 修改state中的數(shù)據(jù)，這是錯(cuò)誤的寫(xiě)法.
• etState的作用：

1. 修改state
2. 更新UI

setState

執(zhí)行setState()的位置?

• 在react控制的回調(diào)函數(shù)中: （異步）
  • 生命周期勾子 ，react事件監(jiān)聽(tīng)回調(diào)（合成事件）
• 非react控制的異步回調(diào)函數(shù)中: （同步）      
• 定時(shí)器回調(diào) ，原生事件監(jiān)聽(tīng)回調(diào) ， promise回調(diào)

setState是異步還是同步？

setState的“異步”并不是說(shuō)內(nèi)部由異步代碼實(shí)現(xiàn)，其實(shí)本身執(zhí)行的過(guò)程和代碼都是同步的。只是在 React 的 setState 函數(shù)實(shí)現(xiàn)中，會(huì)根據(jù) isBatchingUpdates(默認(rèn)是 false) 變量判斷是否直接更新 this.state 還是放到隊(duì)列中稍后更新。然后有一個(gè) batchedUpdate 函數(shù)，可以修改 isBatchingUpdates 為 true，當(dāng) React 調(diào)用事件處理函數(shù)之前，或者生命周期函數(shù)之前就會(huì)調(diào)用 batchedUpdate 函數(shù)，這樣的話(huà)，setState 就不會(huì)同步更新 this.state，而是放到更新隊(duì)列里面后續(xù)更新。

這樣你就可以理解為什么原生事件和 setTimeout/setinterval 里面調(diào)用 this.state 會(huì)同步更新了，因?yàn)橥ㄟ^(guò)這些函數(shù)調(diào)用的 React 沒(méi)辦法去調(diào)用 batchedUpdate 函數(shù)將 isBatchingUpdates 設(shè)置為 true，那么這個(gè)時(shí)候 setState 的時(shí)候默認(rèn)就是 false，那么就會(huì)同步更新。

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

props 是組件對(duì)外的接口，state 是組件對(duì)內(nèi)的接口。

主要區(qū)別：

• State是可變的，是一組用于反映組件UI變化的狀態(tài)集合。
• 而Props對(duì)于使用它的組件來(lái)說(shuō)，是只讀的，要想修改Props，只能通過(guò)該組件的父組件修改。

refs

refs是彈性文件系統(tǒng)，在React中可以獲取React元素或DOM元素。

 我們?cè)谌粘?xiě)React代碼的時(shí)候，一般情況是用不到Refs這個(gè)東西，因?yàn)槲覀儾?strong>不直接操作底層DOM元素，而是在render函數(shù)里去編寫(xiě)我們的頁(yè)面結(jié)構(gòu)，由React來(lái)組織DOM元素的更新。凡事總有例外，總會(huì)有一些很奇葩的時(shí)候我們需要直接去操作頁(yè)面的真實(shí)DOM，這就要求我們有直接訪(fǎng)問(wèn)真實(shí)DOM的能力，而Refs就是為我們提供了這樣的能力。

React.createRef

React.createRef調(diào)用后可以返回一個(gè)容器，該容器可以存儲(chǔ)被ref所標(biāo)識(shí)的節(jié)點(diǎn)，該容器是專(zhuān)人專(zhuān)用的:

class App extends React.Component {
  inputRef = React.createRef();
  showData = () => {
    let input = this.inputRef.current;
    console.log(input.value)
  }
  render() {
    return (
      <div>
        <input ref={this.inputRef} type="text" />
        <button onClick={this.showData}>提示</button>
      </div>
    )
  }
}

ref的綁定

class Person extends React.Component{
    constructor(){
        super();
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(){
        // 使用原生的 DOM API 獲取焦點(diǎn)
        this.refs.myInput.focus();
    }
    render(){
        return (
            <div>
                <input type="text" ref="myInput" />
                <input
                    type="button"
                    value="點(diǎn)我輸入框獲取焦點(diǎn)"
                    onClick={this.handleClick}/>
            </div>
        );    
    }
}
ReactDOM.render(<Person />, document.getElementById('root'));

• 當(dāng) ref 屬性用于 HTML 元素時(shí)，使用 React.createRef()或者React.useRef() 創(chuàng)建的 ref 接收底層 DOM 元素作為其 current 屬性。
• 當(dāng) ref 屬性用于 class 組件時(shí)，ref 對(duì)象接收組件的掛載實(shí)例作為其 current 屬性。
• 你不能在函數(shù)組件上使用 ref 屬性，因?yàn)樗麄儧](méi)有實(shí)例。函數(shù)組件可以使用useRef()，它所返回的對(duì)象在組件的整個(gè)生命周期內(nèi)不變。

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!