state

有狀態組件和無狀態組件

• 函數組件又叫做無狀態組件，函數組件沒有自己的狀態，只負責數據的靜態展示。
• 類組件又叫做有狀態組件，類組件有自己的狀態，負責更新UI，讓頁面動起來。
• 狀態（state）就是數據，是組件內部的私有數據，只能在組件內部使用。

每個組件都有state,它的值是對象類型；組件state屬性的初始化放在構造方法中。

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

• 狀態是可變的:this.setState({要修改的數據})
• 注意不要直接通過this.state.x = y 修改state中的數據，這是錯誤的寫法.
• etState的作用：

1. 修改state
2. 更新UI

setState

執行setState()的位置?

• 在react控制的回調函數中: （異步）
  • 生命周期勾子 ，react事件監聽回調（合成事件）
• 非react控制的異步回調函數中: （同步）??????
• 定時器回調 ，原生事件監聽回調 ， promise回調

setState是異步還是同步？

setState的“異步”并不是說內部由異步代碼實現，其實本身執行的過程和代碼都是同步的。只是在 React 的?setState?函數實現中，會根據?isBatchingUpdates(默認是 false) 變量判斷是否直接更新?this.state?還是放到隊列中稍后更新。然后有一個?batchedUpdate?函數，可以修改?isBatchingUpdates?為 true，當 React 調用事件處理函數之前，或者生命周期函數之前就會調用?batchedUpdate?函數，這樣的話，setState 就不會同步更新 this.state，而是放到更新隊列里面后續更新。

這樣你就可以理解為什么原生事件和?setTimeout/setinterval?里面調用 this.state 會同步更新了，因為通過這些函數調用的 React?沒辦法去調用 batchedUpdate 函數將 isBatchingUpdates 設置為 true，那么這個時候 setState 的時候默認就是 false，那么就會同步更新。

props和state屬性的區別

props 是組件對外的接口，state 是組件對內的接口。

主要區別：

• State是可變的，是一組用于反映組件UI變化的狀態集合。
• 而Props對于使用它的組件來說，是只讀的，要想修改Props，只能通過該組件的父組件修改。

refs

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

?我們在日常寫React代碼的時候，一般情況是用不到Refs這個東西，因為我們并不直接操作底層DOM元素，而是在render函數里去編寫我們的頁面結構，由React來組織DOM元素的更新。凡事總有例外，總會有一些很奇葩的時候我們需要直接去操作頁面的真實DOM，這就要求我們有直接訪問真實DOM的能力，而Refs就是為我們提供了這樣的能力。

React.createRef

React.createRef調用后可以返回一個容器，該容器可以存儲被ref所標識的節點，該容器是專人專用的:

class App extends React.Component {
  inputRef = React.createRef();
  showData = () => {
    let input = this.inputRef.current;
    console.log(input.value)
  }
  render() {
    return (
      

        
        提示
      
    )
  }
}

ref的綁定

class Person extends React.Component{
    constructor(){
        super();
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(){
        // 使用原生的 DOM API 獲取焦點
        this.refs.myInput.focus();
    }
    render(){
        return (
            

                
                
            
        );    
    }
}
ReactDOM.render(, document.getElementById('root'));

• 當 ref 屬性用于?HTML 元素時，使用 React.createRef()或者React.useRef() 創建的 ref 接收底層 DOM 元素作為其 current 屬性。
• 當 ref 屬性用于?class 組件時，ref 對象接收組件的掛載實例作為其 current 屬性。
• 你不能在函數組件上使用 ref 屬性，因為他們沒有實例。函數組件可以使用useRef()，它所返回的對象在組件的整個生命周期內不變。

總結