總結(jié) React 組件的三種寫法 及最佳實(shí)踐 [漲經(jīng)驗(yàn)]

React 專注于 view 層，組件化則是 React 的基礎(chǔ)，也是其核心理念之一，一個(gè)完整的應(yīng)用將由一個(gè)個(gè)獨(dú)立的組件拼裝而成。

截至目前 React 已經(jīng)更新到 v15.4.2，由于 ES6 的普及和不同業(yè)務(wù)場(chǎng)景的影響，我們會(huì)發(fā)現(xiàn)目前主要有三種創(chuàng)建 React 組件的寫法：1. ES5寫法React.createClass，2. ES6寫法React.Component，3. 無狀態(tài)的函數(shù)式寫法（純組件-SFC）。

你們最鐘愛哪種寫法呢？蘿卜青菜各有所愛~ 每個(gè)團(tuán)隊(duì)都有自己的代碼規(guī)范和開發(fā)模式，但書寫 React 組件時(shí) 都會(huì)以提高代碼閱讀性、更優(yōu)的組件性能、易于 bug 追蹤為原則。下面我們就聊聊這三種寫法的區(qū)別，以及各自所適用場(chǎng)景的最佳實(shí)踐。

ES5-寫法 React.createClass

React.createClass不用多說，我們最早使用這個(gè)方法來構(gòu)建一個(gè)組件“類”，它接受一個(gè)對(duì)象為參數(shù)，對(duì)象中必須聲明一個(gè)render方法，render返回一個(gè)組件實(shí)例，下面用一個(gè) SwitchButton 組件的例子來看看React.createClass的具體用法：

 1 var React = require('react'); 2 var ReactDOM = require('react-dom'); 3  4 var SwitchButton = React.createClass({ 5   getDefaultProp:function() { 6     return { open:&nb
        
		

        		
網(wǎng)友評(píng)論
     		
				

			
			
			
		
		
		
    	
    	
        	

        		
更多精彩分享
        		

        			
        		
        			
	        		
	        		學(xué)習(xí)是年輕人改變自己的最好方式