随笔- 54  评论- 17  文章- 0 

React之特点及常见用法

1、什么是React?

  React是一个用于构建用户界面的JavaScript库。主要用于构建UI,很多人认为Reatc是MVC中的V(视图)。

  React起源于Facebook的内部项目,用来架构Instrgram的网站(ins,一款图片分享的社交软件),并与2013年5月份开源。

  React拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

2、React的特点?

  (1)声明式设计

  (2)高效:通过对DOM的模拟,最大限度的减少与DOM的交互。

  (3)灵活:可以与已知的框架或库很好的配合。

  (4)JSX:是js语法的扩展,不一定使用,但建议用。

  (5)组件:构建组件,使代码更容易得到复用,能够很好地应用在大项目的开发中。

  (6)单向响应的数据流:React实现了单向响应的数据流,从而减少了重复代码,这也是解释了它为什么比传统数据绑定更简单。

3、React的html的必备模板

  <!DOCTYPE html>
  <html>
    <head>
      <script src="react.js"></script>
      <script src="react-dom.js"></script>
      <script src="browser.min.js"></script>
    </head>
    <body>
      <div id="example"></div>
      <script type="text/babel">
        // ** Our code goes here! **
      </script>
    </body>
  </html>

  (1) script 标签的 type 属性为 text/babel 。因为 React 独有的 JSX 语法,跟 JavaScript 不兼容。

     凡是使用 JSX 的地方,都要加上 type="text/babel" 。

  (2) 三个库: react.min.js 、react-dom.min.js 和 Browser.min.js ,它们必须首先加载。

    react.js 是 React 的核心库,react-dom.js 是提供与 DOM 相关的功能,

     Browser.js 的作用是将 JSX 语法转为 JavaScript 语法,这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。

4、React JSX 的优点以及常见用法

  React使用JSX来代替常规的javascript语法,看起来很像xml的javascript的语法扩展。

  JSX优点:(1)JSX执行更快,因为它对编译js代码进行了优化(2)它是类型安全的,在编译过程中就能发现错误(3)使用jsx编译模板更加简洁快速。

  使用JSX:

 (1)代码中嵌套多个html标签,需要使用一个div元素包裹它们,实例中的p标签使用了自定义属性:data-前缀 。

  ReactDOM.render(

   <div>

     <h1>菜鸟教程</h1>

     <h2>欢迎学习 React</h2>

     <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>

   </div> ,

   document.getElementById('example')

  );

(2)JSX表达式  
 ReactDOM.render(
    <h1>{1+1*4}</h1>,
    document.getElementById('example')
 );

(3)样式
React 推荐使用内联样式。我们可以使用 camelCase 语法(骆驼命名法,除第一个单词外的其他首字母大写)来设置内联样式.
React 会在指定元素数字后自动添加 px 
 var myStyle = {
	fontSize: 100,
	color: '#F00'
 };
 ReactDOM.render(
	<h1 style = {myStyle}>菜鸟教程</h1>,
	document.getElementById('example')
 );

(4)注释
注释需要写在花括号中:(外加div包裹)
ReactDOM.render(   <div>    <h1>菜鸟教程</h1>   {/*注释...*/}  </div>, document.getElementById('example') );

(5)数组
JSX 允许在模板中插入数组,数组会自动展开所有成员:
var arr = [ <h1>菜鸟教程</h1>, <h2>学的不仅是技术,更是梦想!</h2> ]; ReactDOM.render( <div>{arr}</div>, document.getElementById('example') );
(6)HTML 标签 vs React 组件
React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
要渲染 HTML 标签,只需在 JSX 里使用小写字母的标签名。
var myDivElement = <div className="foo" />; ReactDOM.render(myDivElement, document.getElementById('example'));
要渲染 React 组件,只需创建一个大写字母开头的本地变量。
var MyComponent = React.createClass({/*...*/}); var myElement = <MyComponent someProperty={true} />; ReactDOM.render(myElement, document.getElementById('example'));

React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。
由于JSX 就是JavaScript,一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代,ReactDOM使用classNamehtmlFor来做对应的属性。

5、React State(状态)

React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。
React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。
以下实例中创建了 LikeButton 组件,getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。
当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。


参考文献:
  阮一峰React入门实例教程  
http://www.ruanyifeng.com/blog/2015/03/react.html
  React解决了前端开发中的哪些痛点? https://www.zhihu.com/question/39825457?sort=created 
  React.js 初学者应该知道的9件事 http://www.oschina.net/news/75530/9-things-every-reactjs-beginner-should-know

posted on 2016-11-29 19:10  cc_ccc  阅读(...)  评论(...编辑  收藏