react學習散記

  1. 父組件向子組件通過可以通過props,但是父組件如果想要訪問子組件的DOM元素或者子組件本身(雖然這種情況比較少見),可以用refs荣赶。
    父組件訪問子組件的推薦辦法:使用函數
render: function() {
    return (
      <TextInput
        ref={function(input) {
          if (input != null) {
            input.focus();
          }
        }} />
    );
},

這個ref函數在裝載后或者消毀時執(zhí)行尝偎,參數input就是TextInput這個組件的實例重归,這樣就可以直接對組件實例本身進行操作。中間的判斷是基于組件消毀時為null的情況進行規(guī)避减噪,防止內存泄漏短绸。

  1. 表單元素在react中非常特殊,因為要和用戶交互相關聯(lián)筹裕,所以和其它HTML元素不太一樣醋闭。

  2. 在JSX中可以嵌入各種表達式,只需要將它們用{}包起來就行饶碘。在JSX中也可以使用各類的JS語法目尖,也必須用{}包起來。大原則就是:使用<>來使用HTML語法扎运,使用{}來調用JS語法瑟曲。

  3. JSX允許在模板中插入一JS變量,如果該變量是一個數組豪治,就會展開這個數組的所有成員洞拨。

<script type="text/babel">
    let names = [
      <h1 key={'a'}>Hello World!</h1>,
      <h2 key={'b'}>React is coool!</h2>,
      <h3 key={'c'}>Now I'm learning it~</h3>
    ]
    ReactDOM.render(
      <div>
        {names}
      </div>,
      document.getElementById('root')
    )
  </script>
  1. 創(chuàng)建組件
  • 創(chuàng)建組建有多種辦法,React.createClass()是比較常用的一種ES5方法负拟,除此之外還有class方法和函數式方法烦衣。推薦使用class方法。
  • 組建只能包含一個頂層標簽掩浙。
  • 在組件一級可以加入任意屬性花吟,實例化后通過this.props可以使用這些屬性。
  • 添加組件屬性厨姚,for要寫成htmlFor衅澈,class要寫成className,因為保留字的關系谬墙。
6. 獲取組件的子節(jié)點:this.props.children今布。一般搭配React.Children使用经备,這是一個例外情況,單獨記部默。
  1. 使用propTypes來驗證組件屬性的類型
<script type="text/babel">
    let Hello = React.createClass({
      propTypes: {
        name: React.PropTypes.string.isRequired,
        age: React.PropTypes.number.isRequired,
      },

      render: function () {
        return <h1>Hello, {this.props.name}, my age is {this.props.age}</h1>
      }
    })
    ReactDOM.render(
      <Hello name={'小明'} age={11} />,
      document.getElementById('root')
    )
  </script>
  1. JSX模板中樣式的寫法
style={{opacity: this.state.opacity}}

第一個大括號是JS語法侵蒙,第二個是對象。

  1. AJAX
componentDidMount: function() {  
    this.serverRequest = $.get(this.props.source, function (result) {  
      var lastGist = result[0];  
      this.setState({  
        username: lastGist.owner.login,  
        lastGistUrl: lastGist.html_url  
      });  
    }.bind(this));  
  },  
  
  componentWillUnmount: function() {  
    this.serverRequest.abort();  
  }  

在組件裝載成功后傅蹂,發(fā)出請求纷闺,但是這個請求本身是異步的;有可能組件缷載時請求還沒完贬派,所以要在組件將要缷載時廢止這個請求急但。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末澎媒,一起剝皮案震驚了整個濱河市搞乏,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌戒努,老刑警劉巖请敦,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異储玫,居然都是意外死亡侍筛,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進店門撒穷,熙熙樓的掌柜王于貴愁眉苦臉地迎上來匣椰,“玉大人,你說我怎么就攤上這事端礼∏菪Γ” “怎么了?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵蛤奥,是天一觀的道長佳镜。 經常有香客問我,道長凡桥,這世上最難降的妖魔是什么蟀伸? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮缅刽,結果婚禮上啊掏,老公的妹妹穿的比我還像新娘。我一直安慰自己衰猛,他們只是感情好迟蜜,可當我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著腕侄,像睡著了一般小泉。 火紅的嫁衣襯著肌膚如雪芦疏。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天微姊,我揣著相機與錄音酸茴,去河邊找鬼。 笑死兢交,一個胖子當著我的面吹牛薪捍,可吹牛的內容都是我干的。 我是一名探鬼主播配喳,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼酪穿,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了晴裹?” 一聲冷哼從身側響起被济,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎涧团,沒想到半個月后只磷,有當地人在樹林里發(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡泌绣,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年钮追,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片阿迈。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡鳞骤,死狀恐怖辜妓,靈堂內的尸體忽然破棺而出肛跌,到底是詐尸還是另有隱情个曙,我是刑警寧澤,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布崎页,位于F島的核電站鞠绰,受9級特大地震影響,放射性物質發(fā)生泄漏飒焦。R本人自食惡果不足惜蜈膨,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望牺荠。 院中可真熱鬧翁巍,春花似錦、人聲如沸休雌。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽杈曲。三九已至驰凛,卻和暖如春胸懈,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背恰响。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工趣钱, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人胚宦。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓首有,卻偏偏與公主長得像,于是被迫代替她去往敵國和親枢劝。 傳聞我的和親對象是個殘疾皇子井联,可洞房花燭夜當晚...
    茶點故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內容

  • 原教程內容詳見精益 React 學習指南,這只是我在學習過程中的一些閱讀筆記您旁,個人覺得該教程講解深入淺出烙常,比目前大...
    leonaxiong閱讀 2,833評論 1 18
  • GUIDS 第一章 為什么使用React? React 一個提供了用戶接口的JavaScript庫被冒。 誕生于Fac...
    jplyue閱讀 3,532評論 1 11
  • 深入JSX date:20170412筆記原文其實JSX是React.createElement(componen...
    gaoer1938閱讀 8,061評論 2 35
  • 最近看了一本關于學習方法論的書军掂,強調了記筆記和堅持的重要性。這幾天也剛好在學習React昨悼,所以我打算每天堅持一篇R...
    gaoer1938閱讀 1,673評論 0 5
  • 安裝: 概述 React起源于FaceBook的內部項目,因為該公司對市場上所有的JavaScript MVC框架...
    姒沝無痕閱讀 717評論 0 0