React的第一步

首先了解React中所牽扯到的幾個重要的概念

什麼是React?

     是Facebook的開發團隊開發出來的一個用於構建用戶界面個js庫，最近纔開源出來公佈於世，它的初衷是用於建立「獨立的視圖組件」，一個React組件本質上來講就是擁有一個本身做用域的DOM元素。

 

JSX?

   React 使用的是特殊的 JavaScript. 語法, 叫作 JSX。這個是最吸引個人地方，也是最有創意的地方。React把傳統的js編程語言方式換成了JSX,處於好奇，我在網上查看了關於JSX的一些資料，讓我頓時一驚，原來JSX性能比js要好不少，下面詳細介紹一下。

   什麼是jsx?

      JSX靜態類型化，面向對象的編程語言，設計在現代瀏覽器上運行，簡單描述就是Javascript的XML語法擴展。

      特色一： 快

          JSX執行優化，編譯源代碼的javascript。生成的代碼運行速度比直接在JavaScript編寫的要快，使用了優化的JavaScript庫Box2D變得更快，當移植到JSX(在ios 5.1快12%，在Android 2.3快29%)。

           Box2D是一個用於模擬2D剛體物體的C++引擎。zlib許但是一個自由軟件受權協議。

      特色二：更安全   

          與JavaScript,JSX靜態類型化,大可能是類型安全的。 應用程序的質量變得更高使用JSX被開發時,因爲許多錯誤在編譯過程當中會被捕獲。 它還提供了編譯器級別的調試特性。

      以下圖，更直觀的表達了JSX和JS的區別

    

 

在React中用jsx語法糖來編寫程序，在JSXTransformer.js文件中會處理成js的語法形式輸出

經過例子來講明：

/** @jsx React.DOM */
var component = React.createClass({
  render: function() {
    return <a href="http://baidu.com">baidu</a>
  }
});

轉化爲

/** @jsx React.DOM */
var component = React.createClass({
  render: function() {
    return React.DOM.a( {href:"http://baidu.com"}, "baidu")
  }
});

注：這裏的/** @jsx React.DOM*/看上去像註釋，實際上是一個標記，必須加上！這告訴JSX爲React過程的文件。若是你不包括編譯指示、源將保持不變。

在return的時候明顯寫法出現了差別，轉換以後的寫法是React.DOM.a;

Why JSX?

      爲何用jsx,官方網站給咱們一些解釋：

             1.它是將DOM結構更容易

             2.設計師更願意作出的改變

             3.對於那些使用MXML或XAML很熟悉。

     固然若是開發者不喜歡用JSX，那就在開發項目中能夠不引入JSXTransformer.js文件，可是在編寫js腳本的時候就要直接以React.DOM.*函數，下面例子介紹

 

var link = React.DOM.a({href:'http://facebook.github.io/react'},'React');

 注：建立一個a標籤，並對其設置一個連接

 

JSX看上去像HTML，但仍是有一些差別的，接下來看下這之間的DOM差別：

  React已經實現了一個獨立於瀏覽器的事件，系統性能和跨瀏覽器兼容性的DOM系統。

      1.style屬性和構建的屬性接受一個javascript對象，而不是CSS的字符串，這個更爲高效，並防止XSS攻擊。

      XSS攻擊：跨站腳本攻擊(Cross Site Scripting)，爲不和層疊樣式表(Cascading Style Sheets, CSS)的縮寫混淆。故將跨站腳本攻擊縮寫爲XSS。

      2. onchange事件行爲，當一個表單字段更改的時候，該事件才觸發，打破了現有瀏覽器的行爲操做。

      3. 表單組件<input>,<textarea>,<option>等不一樣於其餘本地組件，由於本地組件能夠經過用戶交互變化，而React中的這些組件單獨提供了接口，使它們更容易管理的形式響應用戶交互。

     在React.js中對DOM元素進行了封裝操做，咱們要使用哪一個DOM元素就必須使用React.DOM.*,  '*'表示DOM元素

     看下React對DOM元素的封裝吧

 

var ReactDOM = mapObject({
  a: false,
  abbr: false,
  address: false,
  area: true,
  article: false,
  aside: false,
  audio: false,
  b: false,
  base: true,
  bdi: false,
  bdo: false,
  big: false,
  blockquote: false,
  body: false,
  br: true,
  button: false,
  canvas: false,
  caption: false,
  cite: false,
  code: false,
  col: true,
  colgroup: false,
  data: false,
  datalist: false,
  dd: false,
  del: false,
  details: false,
  dfn: false,
  dialog: false,
  div: false,
  dl: false,
  dt: false,
  em: false,
  embed: true,
  fieldset: false,
  figcaption: false,
  figure: false,
  footer: false,
  form: false, // NOTE: Injected, see `ReactDOMForm`.
  h1: false,
  h2: false,
  h3: false,
  h4: false,
  h5: false,
  h6: false,
  head: false,
  header: false,
  hr: true,
  html: false,
  i: false,
  iframe: false,
  img: true,
  input: true,
  ins: false,
  kbd: false,
  keygen: true,
  label: false,
  legend: false,
  li: false,
  link: true,
  main: false,
  map: false,
  mark: false,
  menu: false,
  menuitem: false, // NOTE: Close tag should be omitted, but causes problems.
  meta: true,
  meter: false,
  nav: false,
  noscript: false,
  object: false,
  ol: false,
  optgroup: false,
  option: false,
  output: false,
  p: false,
  param: true,
  picture: false,
  pre: false,
  progress: false,
  q: false,
  rp: false,
  rt: false,
  ruby: false,
  s: false,
  samp: false,
  script: false,
  section: false,
  select: false,
  small: false,
  source: true,
  span: false,
  strong: false,
  style: false,
  sub: false,
  summary: false,
  sup: false,
  table: false,
  tbody: false,
  td: false,
  textarea: false, // NOTE: Injected, see `ReactDOMTextarea`.
  tfoot: false,
  th: false,
  thead: false,
  time: false,
  title: false,
  tr: false,
  track: true,
  u: false,
  ul: false,
  'var': false,
  video: false,
  wbr: true,

  // SVG
  circle: false,
  defs: false,
  ellipse: false,
  g: false,
  line: false,
  linearGradient: false,
  mask: false,
  path: false,
  pattern: false,
  polygon: false,
  polyline: false,
  radialGradient: false,
  rect: false,
  stop: false,
  svg: false,
  text: false,
  tspan: false
}, createDOMComponentClass);

這段代碼把支持HTML標籤建立映射到` reactdomcomponent `類。這裏面的代碼邏輯後期再詳說。

 

    React從最初設計開始就打破了傳統觀念，運用新的獨立方式進行頁面的交互操做，這是獨特創新，不知道這樣的方式會成爲將來前端技術的趨勢嗎？看實踐的結果了。

    繼續激情的前進着。。。