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 組件的寫(xiě)法：1. ES5寫(xiě)法React.createClass，2. ES6寫(xiě)法React.Component，3. 無(wú)狀態(tài)的函數(shù)式寫(xiě)法（純組件-SFC）。
你們最鐘愛(ài)哪種寫(xiě)法呢？蘿卜青菜各有所愛(ài)~ 每個(gè)團(tuán)隊(duì)都有自己的代碼規(guī)范和開(kāi)發(fā)模式，但書(shū)寫(xiě) React 組件時(shí) 都會(huì)以提高代碼閱讀性、更優(yōu)的組件性能、易于 bug 追蹤為原則。下面我們就聊聊這三種寫(xiě)法的區(qū)別，以及各自所適用場(chǎng)景的最佳實(shí)踐。
ES5-寫(xiě)法 React.createClass
React.createClass不用多說(shuō)，我們最早使用這個(gè)方法來(lái)構(gòu)建一個(gè)組件“類”，它接受一個(gè)對(duì)象為參數(shù)，對(duì)象中必須聲明一個(gè)render方法，render返回一個(gè)組件實(shí)例，下面用一個(gè) SwitchButton 組件的例子來(lái)看看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
延伸閱讀
- ssh框架
2016-09-30
- 阿里移動(dòng)安全 [無(wú)線安全]玩轉(zhuǎn)無(wú)線電——不安全的藍(lán)牙鎖
2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe
2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】
2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞
2017-07-26
- 從棧不平衡問(wèn)題 理解 calling convention
2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明
2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解
2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析
2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來(lái)看看(二)
2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式