react.js

---恢复内容开始---

 

一.React的定义

   React 是由Facebook 创建的一个开源项目。它提供了一种在JavaScript中构建用户界面的全新方式。react针对的是现代风格的JavaScript开发生态系统。React 是一个使用JavaScript 和XML技术（可选）构建可组合用户界面的引擎。下面对React定义的每个部分加以详细的说明：

React 是一个引擎：React的网站将它定义为一个库，但是我觉得使用“引擎”这个词更能体现出React的核心优势：用来实现响应式UI 渲染的方式。React的方式是将状态（在一个给定的时间点，所有用来定义应用程序的内部数据）从展现给用户的UI中分离出来。在React中，你可以声明如何 将应用程序的状态表现为DOM的虚拟元素，然后自动更新DOM以反映出状态的变化。

    创建可组合用户界面：减少创建和维护用户界面的的复杂性一直是React的核心目标。React拥抱了这样一种理念：将UI“打散”成易于重用、扩展和维护的组件与自包含的关注特定用途的构件。

   用JavaScript 和XML技术（可选）:React是一个可用于浏览器、服务器和移动设备之上的纯JavaScript库。

 二.React 的优点

 1）简单易学的使响应式渲染

响应式渲染让我们使用一种声明方式，来定义组件的外观和行为。当数据发生变化时，React在概念上会重新渲染整个用户界面。React使用DOM在每次状态数据发生变化时就重新渲染整个用户界面。

      

2）使用纯JavaScript进行面向的组件开发

 三. react的用法

1.HTML模版

 

首先，在官网https://facebook.github.io/react/中下载最新的压缩包，react—15.3.1，解压之后只需将build放到js下即可，然后再 react.js ，react-dom.js，browser.min.js引入到html页面，react.js是react的核心库，react_dom.js是提供与DOM相关的功能,browser.min.js是将JSX语法转换为JavaScript语法，如下所示

<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>

 2.ReactDom.render是react的最基本用法，用于将模版转换HTML语言，并将其插入指定的DOM节点。

ReactDOM.render(

<h1>Hello, world!</h1>,

document.getElementById('example') );

 上面代码将一个 h1 标题，插入 example 节点。

四、组件

React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类（查看 demo04）。


var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage name="John" />,
  document.getElementById('example')
);

上面代码中，变量 HelloMessage 就是一个组件类。模板插入 <HelloMessage /> 时，会自动生成 HelloMessage 的一个实例（下文的"组件"都指组件类的实例）。所有组件类都必须有自己的 render 方法，用于输出组件。

注意，组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签，否则也会报错。

五、this.props.children

this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点（查看 demo05）。


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

ReactDOM.render(
  <NotesList>
    <span>hello</span>
    <span>world</span>
  </NotesList>,
  document.body
);

上面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取。

 
















 

 

 

 

 

 

 

render函数共有三个参数，

            1、要渲染的组件，也就是DOM

            2、需要被渲染的页面元素，注意必须使用document.getElement...进行调用

            3、渲染成功的回调

 

posted on 2017-06-01 22:01  showabout  阅读(425)  评论(0)  编辑  收藏  举报

导航