一、React介绍
1.React的起源与发展
-
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。
-
做出来以后，发现这套东西很好用，就在2013年5月开源了。
-
由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。
2 .React的特点
-
只作为 UI（Just the UI）：React 不是一个完整的 MVC 框架，最多是作为视图（View）在 MVC 中使用。（甚至 React 并不非常认可 MVC 开发模式。它提出的是一个新的开发模式和理念，强调的是“用户界面”。React 希望将功能分解化，让开发变得像搭积木一样，快速且可维护。）
-
虚拟 DMO 机制（Virtual DOM）：这是 React 的一个亮点，可以很好地优化视图的渲染和刷新。过去我们更新视图是，需要先清空 DOM 容器里的内容，然后将最新的 DOM 和数据追加到容器中。而 React 将这一操作放进了内存。通过将视图变化放进内存进行比较（虚拟 DOM 比较），计算出最小更新的视图，然后将差异部分进行更新以完成整个组件的渲染。这正是React 如此高效的原因。
-
数据流（Data Flow）：React 实现了单向的数据流，并且对于传统的数据绑定而言，React 更加灵活、便捷。
3，网站地址
二、准备工作
在使用 ReactJS 进行开发前，我们需要准备好这三个 js 文件：react.js、react-dom.js、browser.js。下面分别对它们进行介绍。
1. react.js 和 react-dom.js
前者是 React 主要核心，后者负责 React DOM 操作。可以访问下面地址下载最新版本：
https://github.com/facebook/react/releases
2. browser.js
实现浏览器端对 JSX 的编译。（在 react 0.14 前，使用 jsxtransformer.js，后改为 browser.js）
由于 browser.js 非常大，我们开发测试可以引用如下地址：
https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js
这种运行时解析转换 JSX 建议只在开发测试时使用。生产环境下可以借助编译工具（babel）事先将 JSX 编译成 JS。这样代码经过预编译、压缩和合并后，会提高网络的加载速度，减少流量带宽的浪费，优化用户体验。
三、使用样例
1. 简单组件和数据传递
我们可以使用 this.props 来做简单的数据传递。
（1）样例说明
定义了一个组件 HelloMessage。通过传入的 name 属性，用于 h1 标签渲染。
使用 ReactDOM.render 方法将组件渲染到 id 为 example 的 div 内。
<html>
<head lang="en">
<meta charset="UTF-8">
<title>简书</title>
<script src="https://cdn.bootcss.com/react/15.6.1/react.js"></script>
<script src="https://cdn.bootcss.com/react/15.6.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
</head>
<body>
<div id="example">
</div>
<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
return<h1>欢迎访问 {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="jianshu.com" />,
document.getElementById('example'));
</script>
</body>
</html>
（2）运行效果
QQ截图20170911174928.png
（3）使用 Chrome 调试工具可以看到渲染后内文档内容如下。
QQ截图20170911175115.png
2. 通过this.state更新视图
（1）样例说明
- getInitialState：设置组件的初始状态，必须返回一个对象或 null 对象。我们可以在此准备组件需要的数据以及后期需要更新的数据模型。
- componentDidMount：组件加载完成时调用。这里我们创建一个定时器，定时改变 this.state 里的数据。
- render：该方法用来渲染视图。this.state 发生改变时，该方法会自动调用。
- componentWillUnmount：组件被卸载时调用。我们在这里清除定时器 this.interval。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>简书</title>
<script src="https://cdn.bootcss.com/react/15.6.1/react.js"></script>
<script src="https://cdn.bootcss.com/react/15.6.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Timer = React.createClass({
/*初始状态*/
getInitialState: function() {
return {secondsElapsed: 0};
},
tick: function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},
/*组件完成加载*/
componentDidMount: function() {
this.interval = setInterval(this.tick, 1000);
},
/*组件将被卸载*/
componentWillUnmount: function() {
clearInterval(this.interval);
},
render: function() {
return (
<div>现在已经过去了: {this.state.secondsElapsed}秒</div>
);
}
});
ReactDOM.render(<Timer />, document.getElementById('example'));
</script>
</body>
</html>
（2）运行效果。每隔一秒钟，secondsElapsed 就会加 1。同时页面也会自动刷新。
QQ截图20170911175645.png
3，稍微复杂一点样例
（1）样例说明
- 我们在 textarea 上绑定了 onChange 的事件监听，目的是通过 setState 改变this.state.value。
- 同时 textarea 上添加了 ref 属性，这样就可以通过 this.refs.testarea 引用这个 textarea 对象了。
- 通过 ReactDOM 提供的 findDOMNode 方法，可以找到 React 的 DOM。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>简书</title>
<script src="https://cdn.bootcss.com/react/15.6.1/react.js"></script>
<script src="https://cdn.bootcss.com/react/15.6.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var ShowEditor = React.createClass({
getInitialState: function() {
return {value: '在这里输入文字'};
},
handleChange: function() {
this.setState({value: ReactDOM.findDOMNode(this.refs.textarea).value});
},
render: function() {
return (
<div>
<h3>输入：</h3>
<textarea style={{width:300, height:150, outline:'none'}}
onChange={this.handleChange}
ref="textarea"
defaultValue={this.state.value} />
<h3>输出:</h3>
<div>
{this.state.value}
</div>
</div>
);
}
});
ReactDOM.render(<ShowEditor />, document.getElementById('example'));
</script>
</body>
</html>
（2）运行效果。在上方的 textarea 中输入内容后，下方的 div 中会同步显示出输入的内容文字。
QQ截图20170911180104.png
网友评论