React的三大屬性你都知道嗎
React三大屬性
props
- 組件是封閉的,接收外部數據應該通過props來實現
- 函數組件通過參數props來接收數據,props是一個對象; 類組件通過this.props接收數據。
- 傳遞數據:在組件標簽上添加屬性
函數組件
const Hello = (props) => { console.log(props); return ( <div>props:{props.name}</div> ) } ReactDOM.render(<Hello name="mimi" />, document.getElementById('root'))
類組件
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'))
在繼承類的構造函數中必須調用super函數,super代表父類的構造函數。ES6 要求,子類的構造函數必須執行一次super函數,否則會報錯。但是super函數內的this指向的是當前類的實例。
構造器是否接受 props,是否傳遞給 super,取決於是否希望在構造器中通過 this訪問props。
- 當構造器中接收瞭props參數,super沒有傳遞props,此時
this.props
是undefined
,當然可以正常使用props(前邊不加this) - 當構造器中接收瞭props參數,super也傳遞props,可以通過this.props拿到對象。
原因:類組件會繼承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 對象 }
當我們在類組件中調用super,實際上是在執行父類的構造函數,如果沒有將props傳入super函數,那麼在子類的構造函數中,this.props是undefined。
為什麼仍然可以在 render和其他方法中訪問 this.props
。因為React 會在構造函數被調用之後,會把 props 賦值給剛剛創建的實例對象。
state
有狀態組件和無狀態組件
- 函數組件又叫做無狀態組件,函數組件沒有自己的狀態,隻負責數據的靜態展示。
- 類組件又叫做有狀態組件,類組件有自己的狀態,負責更新UI,讓頁面動起來。
- 狀態(state)就是數據,是組件內部的私有數據,隻能在組件內部使用。
每個組件都有state,它的值是對象類型;組件state屬性的初始化放在構造方法中。
class App extends React.Component { constructor() { super(); // 初始化state this.state = { count: 0 } } render() { return ( <div>計數器:{this.state.count}</div> ) } } ReactDOM.render(<App2 />, 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 ( <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 獲取焦點 this.refs.myInput.focus(); } render(){ return ( <div> <input type="text" ref="myInput" /> <input type="button" value="點我輸入框獲取焦點" onClick={this.handleClick}/> </div> ); } } ReactDOM.render(<Person />, document.getElementById('root'));
- 當 ref 屬性用於 HTML 元素時,使用 React.createRef()或者React.useRef() 創建的 ref 接收底層 DOM 元素作為其 current 屬性。
- 當 ref 屬性用於 class 組件時,ref 對象接收組件的掛載實例作為其 current 屬性。
- 你不能在函數組件上使用 ref 屬性,因為他們沒有實例。函數組件可以使用useRef(),它所返回的對象在組件的整個生命周期內不變。
總結
本篇文章就到這裡瞭,希望能夠給你帶來幫助,也希望您能夠多多關註WalkonNet的更多內容!