react.js

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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、渲染成功的回调

 
































以上是关于react.js的主要内容,如果未能解决你的问题,请参考以下文章

react js web代码可以用于使用react native构建移动应用程序吗?

在 React.js 代码中使用 .svg 文件时出现问题

TSX 文件中无法识别 React.js 代码(VS 2015 Update 1 RC)

40行代码内实现一个React.js

React.js 与 Javascript 变量声明

如何在 Visual Studio 代码中配置设置,以便更漂亮地为 react.js 工作