React基礎(chǔ)(一)

NO.1 ReactDom.render

ReactDom.render是React最基本的用法溜畅,用于將模板轉(zhuǎn)化為HTML語言寒屯,并插入指定的DOM節(jié)點弯囊。

ReactDom.render(
  <Name />,
  document.getElementById('app')
  );

上面代碼的含義是將Name這個組件插入ID為app的元素中赵颅。

NO.2 JSX語法

將HTML語言直接寫入帶JS語言之中氢拥,這就是JSX語法

var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
  <div>
  {
    names.map(function (name) {
      return <div>Hello, {name}!</div>
    })
  }
  </div>,
  document.getElementById('example')
);

JSX的語法規(guī)則是如果遇到HTML的標(biāo)簽蚌铜,就用HTML的規(guī)則解析,如果遇到代碼塊嫩海,就用JS的規(guī)則解析冬殃。

JSX允許直接在模板中插入JS變量,如果變量是一個數(shù)組叁怪,則會展開這個數(shù)組的所有成員查看

var arr = [
    <h1>Hello world!</h1>,
    <h2>React is awesome</h2>,
     ];
     ReactDOM.render(
    <div>{arr}</div>,
    document.getElementById('example')
     );

NO.3 組件(component)

新建一個name.js,把他封裝成為一個組件审葬,內(nèi)容如下:

'use strict';
import React from "react";
class Name extends React.Component {
render () {
  return (
    <div>
      hello~
    </div>
    );
  }
}
export { Name as default };

Name就是一個組件類,模板插入<Name />奕谭,會自動生成Name的一個實例涣觉,有三點必須注意:
1.所有組件中必須有自己的render方法,用于輸出組件展箱;
2.組件類的第一個字母必須大寫旨枯,否則會報錯;
3.組件只能包含一個頂層標(biāo)簽混驰,否則會報錯攀隔;例如皂贩,如果將return里面的內(nèi)容改成:

  return (
    <div>
      hello~
    </div>
    <div>
      youngi~
    </div>
    );

然后webpack會返回報錯信息:
Adjacent JSX elements must be wrapped in an enclosing tag (11:4)

組件的用法和原生的HTML的用法一致,可以加入任意屬性昆汹,比如<Name name="youngi"/>明刷,有一點值得注意的是,class和for這兩個屬性應(yīng)該寫為className和htmlFor

ReactDom.render(
  <Name name="youngi" />,
  document.getElementById('app')
  );

那么在組件中满粗,想要獲取這個屬性就可以用this.props.name讀缺材:

class Name extends React.Component {
render () {
  return (
    <div>
      hello~<div>{this.props.name}</div>
    </div>
    );
  }
}

NO.4 this.props.children

這個是個特例,這個代表的意思不是去找this.props的children屬性映皆,而是去找這個組件的所有子節(jié)點

這里需要注意挤聘, this.props.children 的值有三種可能:如果當(dāng)前組件沒有子節(jié)點,它就是 undefined ;如果有一個子節(jié)點捅彻,數(shù)據(jù)類型是 object 组去;如果有多個子節(jié)點,數(shù)據(jù)類型就是 array 步淹。所以从隆,處理 this.props.children 的時候要小心。

React 提供一個工具方法 React.Children 來處理 this.props.children 缭裆。我們可以用 React.Children.map 來遍歷子節(jié)點键闺,而不用擔(dān)心 this.props.children 的數(shù)據(jù)類型是 undefined 還是 object。

render: function() {
    return (
      <ol>
      {
        React.Children.map(this.props.children, function (child) {
          return <li>{child}</li>;
        })
      }
      </ol>
    );
  }

NO.5 PropTypes

這個屬性是組件類的屬性澈驼,而不是組件的屬性辛燥,這個PropTypes可以用來驗證從組件傳來的屬性是否合法。例如:

import React from 'react';
import ReactDom from 'react-dom';
import Name from './name';

var name = 123

ReactDom.render(
  <Name name= {name} />,
  document.getElementById('app')
  );

如上代碼顯示盅藻,Name組件的name屬性的類型為number類型购桑,而不是字符串畅铭,那么在組件類中氏淑,對這個屬性進(jìn)行驗證:

class Name extends React.Component {
render () {
  return (
    <div>
      hello~<div>{this.props.name}</div>
    </div>
    );
  }
}
Name.propTypes = { name: React.PropTypes.string.isRequired };

進(jìn)行驗證后,驗證不通過的話硕噩,會在控制臺上報錯

Invalid prop `name` of type `number` supplied to `Name`, expected `string`.

NO.6 defaultProps 設(shè)置組件的默認(rèn)值

class Name extends React.Component {
render () {
  return (
    <div>
      hello~<div>{this.props.name}</div>
    </div>
    );
  }
}

Name.defaultProps = { name: "youngi" };
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末假残,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子炉擅,更是在濱河造成了極大的恐慌辉懒,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,126評論 6 520
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件谍失,死亡現(xiàn)場離奇詭異眶俩,居然都是意外死亡,警方通過查閱死者的電腦和手機快鱼,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,421評論 3 400
  • 文/潘曉璐 我一進(jìn)店門颠印,熙熙樓的掌柜王于貴愁眉苦臉地迎上來纲岭,“玉大人,你說我怎么就攤上這事线罕≈钩保” “怎么了?”我有些...
    開封第一講書人閱讀 169,941評論 0 366
  • 文/不壞的土叔 我叫張陵钞楼,是天一觀的道長喇闸。 經(jīng)常有香客問我,道長询件,這世上最難降的妖魔是什么燃乍? 我笑而不...
    開封第一講書人閱讀 60,294評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮宛琅,結(jié)果婚禮上橘沥,老公的妹妹穿的比我還像新娘。我一直安慰自己夯秃,他們只是感情好座咆,可當(dāng)我...
    茶點故事閱讀 69,295評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著仓洼,像睡著了一般介陶。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上色建,一...
    開封第一講書人閱讀 52,874評論 1 314
  • 那天哺呜,我揣著相機與錄音,去河邊找鬼箕戳。 笑死某残,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的陵吸。 我是一名探鬼主播玻墅,決...
    沈念sama閱讀 41,285評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼壮虫!你這毒婦竟也來了澳厢?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,249評論 0 277
  • 序言:老撾萬榮一對情侶失蹤囚似,失蹤者是張志新(化名)和其女友劉穎剩拢,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體饶唤,經(jīng)...
    沈念sama閱讀 46,760評論 1 321
  • 正文 獨居荒郊野嶺守林人離奇死亡徐伐,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,840評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了募狂。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片办素。...
    茶點故事閱讀 40,973評論 1 354
  • 序言:一個原本活蹦亂跳的男人離奇死亡魏保,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出摸屠,到底是詐尸還是另有隱情谓罗,我是刑警寧澤,帶...
    沈念sama閱讀 36,631評論 5 351
  • 正文 年R本政府宣布季二,位于F島的核電站檩咱,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏胯舷。R本人自食惡果不足惜刻蚯,卻給世界環(huán)境...
    茶點故事閱讀 42,315評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望桑嘶。 院中可真熱鬧炊汹,春花似錦、人聲如沸逃顶。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,797評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽以政。三九已至霸褒,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間盈蛮,已是汗流浹背废菱。 一陣腳步聲響...
    開封第一講書人閱讀 33,926評論 1 275
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留抖誉,地道東北人殊轴。 一個月前我還...
    沈念sama閱讀 49,431評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像袒炉,于是被迫代替她去往敵國和親旁理。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,982評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 深入JSX date:20170412筆記原文其實JSX是React.createElement(componen...
    gaoer1938閱讀 8,078評論 2 35
  • 原教程內(nèi)容詳見精益 React 學(xué)習(xí)指南梳杏,這只是我在學(xué)習(xí)過程中的一些閱讀筆記韧拒,個人覺得該教程講解深入淺出淹接,比目前大...
    leonaxiong閱讀 2,843評論 1 18
  • 以下內(nèi)容是我在學(xué)習(xí)和研究React時十性,對React的特性、重點和注意事項的提取塑悼、精練和總結(jié)劲适,可以做為React特性...
    科研者閱讀 8,244評論 2 21
  • GUIDS 第一章 為什么使用React? React 一個提供了用戶接口的JavaScript庫厢蒜。 誕生于Fac...
    jplyue閱讀 3,544評論 1 11
  • It's a common pattern in React to wrap a component in an ...
    jplyue閱讀 3,277評論 0 2