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从最初设计开始就打破了传统观念，运用新的独立方式进行页面的交互操作，这是独特创新，不知道这样的方式会成为未来前端技术的趋势吗？看实践的结果了。

    继续激情的前进着。。。