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构建移动应用程序吗？