無狀態(tài)函數(shù)組件
創(chuàng)建無狀態(tài)函數(shù)式組件形式是從React 0.14版本開始出現(xiàn)的。它是為了創(chuàng)建純展示組件莱睁，這種組件只負(fù)責(zé)根據(jù)傳入的props來展示是己，不涉及到要state狀態(tài)的操作。具體的無狀態(tài)函數(shù)式組件竖配，其官方指出：
在大部分React代碼中颠焦，大多數(shù)組件被寫成無狀態(tài)的組件斩熊，通過簡單組合可以構(gòu)建成其他的組件等；這種通過多個簡單然后合并成一個大應(yīng)用的設(shè)計模式被提倡伐庭。
無狀態(tài)函數(shù)式組件形式上表現(xiàn)為一個只帶有一個render方法的組件類粉渠，通過函數(shù)形式或者ES6 arrow function的形式在創(chuàng)建，并且該組件是無state狀態(tài)的圾另。具體的創(chuàng)建形式如下：
ES5 純函數(shù)
function HelloComponent(props) {
return <div>Hello,{props.name}</div>
}
ReactDOM.render(<HelloComponent name={"Word"}/>, document.getElementById('root'));
箭頭函數(shù)
const HelloComponent= props => (
<div>Hello {props.name}</div>
)
無狀態(tài)組件的創(chuàng)建形式使代碼的可讀性更好霸株，并且減少了大量冗余的代碼，精簡至只有一個render方法集乔，大大的增強了編寫一個組件的便利去件，除此之外無狀態(tài)組件還有以下幾個顯著的特點：
1.組件不會被實例化，整體渲染性能得到提升
因為組件被精簡成一個render方法的函數(shù)來實現(xiàn)的扰路，由于是無狀態(tài)組件尤溜，所以無狀態(tài)組件就不會在有組件實例化的過程，無實例化過程也就不需要分配多余的內(nèi)存汗唱，從而性能得到一定的提升宫莱。
2.組件不能訪問this對象
無狀態(tài)組件由于沒有實例化過程，所以無法訪問組件this中的對象哩罪，例如：this.ref授霸、this.state等均不能訪問。若想訪問就不能使用這種形式來創(chuàng)建組件
3.組件無法訪問生命周期的方法
因為無狀態(tài)組件是不需要組件生命周期管理和狀態(tài)管理际插，所以底層實現(xiàn)這種形式的組件時是不會實現(xiàn)組件的生命周期方法碘耳。所以無狀態(tài)組件是不能參與組件的各個生命周期管理的。
4.無狀態(tài)組件只能訪問輸入的props腹鹉，同樣的props會得到同樣的渲染結(jié)果，不會有副作用
無狀態(tài)組件被鼓勵在大型項目中盡可能以簡單的寫法來分割原本龐大的組件敷硅，未來React也會這種面向無狀態(tài)組件在譬如無意義的檢查和內(nèi)存分配領(lǐng)域進行一系列優(yōu)化功咒，所以只要有可能愉阎，盡量使用無狀態(tài)組件。[1]
React.memo()防止渲染[2]
const HelloComponent= props => (
<div>Hello {props.name}</div>
)
export default React.memo(HelloComponent)
仍可使用ref功能[3]
無狀態(tài)組件內(nèi)部其實是可以使用
ref功能的力奋，雖然不能通過this.refs訪問到榜旦，但是可以通過將ref內(nèi)容保存到無狀態(tài)組件內(nèi)部的一個本地變量中獲取到。[1]
function CustomTextInput(props) {
// textInput must be declared here so the ref callback can refer to it
let textInput = null;
function handleClick() {
textInput.focus();
}
return (
<div>
<input
type="text"
ref={(input) => { textInput = input; }} />
<input
type="button"
value="Focus the text input"
onClick={handleClick}
/>
</div>
);
}
參考
- [1] React創(chuàng)建組件的三種方式及其區(qū)別
wongyun-cnblogs.com - [2] 如何使用React.memo()
jianshu.com - [3] 如何在React中附加無狀態(tài)組件的引用ref景殷？
stackoverflow.com
