966,690 十二月 独立访问用户
语言 & 开发
架构 & 设计
文化 & 方法
您目前处于：
React支持了ES6 Classes，听听他们怎么说
React支持了ES6 Classes，听听他们怎么说
注意: 挥一挥衣袖，带走满满干货，关注，时不时发福利呦！
Author Contacted
相关厂商内容
相关赞助商
QCon北京-18日，北京&国家会议中心，
告诉我们您的想法
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
赞助商链接
架构 & 设计
文化 & 方法
<及所有内容，版权所有 &#169;
C4Media Inc.
服务器由 提供, 我们最信赖的ISP伙伴。
北京创新网媒广告有限公司
京ICP备号-7
注意：如果要修改您的邮箱，我们将会发送确认邮件到您原来的邮箱。
使用现有的公司名称
修改公司名称为：
公司性质：
使用现有的公司性质
修改公司性质为:
使用现有的公司规模
修改公司规模为：
使用现在的国家
使用现在的省份
Subscribe to our newsletter?
Subscribe to our industry email notices?
我们发现您在使用ad blocker。
我们理解您使用ad blocker的初衷，但为了保证InfoQ能够继续以免费方式为您服务，我们需要您的支持。InfoQ绝不会在未经您许可的情况下将您的数据提供给第三方。我们仅将其用于向读者发送相关广告内容。请您将InfoQ添加至白名单，感谢您的理解与支持。本教程希望让您快速熟悉使用React Native来编写iOS和Android App的技巧。如果你希望知道React Native是什么以及为什么Facebook打造了它，可以读读
我们这里假设你已经有了使用React编写Web应用程序的经验。如果还没有，建议你可以先从开始学习。
React Native需要一些基础的配置工作，你可以参考来进行。
在所有依赖的软件都已经安装完毕后，只需要输入两条命令就可以创建一个React Native工程。
npm install -g react-native-cli
react-native-cli是一个终端命令，它可以完成其余的设置工作。它可以通过npm安装。刚才这条命令会往你的终端安装一个叫做react-native的命令。这个安装过程你只需要进行一次。
react-native init AwesomeProject
这个命令会初始化一个工程、下载React Native的所有源代码和依赖包，最后在AwesomePrjoect/iOS/AwesomeProject.xcodeproj和AwesomeProject/android/app下分别创建一个新的XCode工程和一个gradle工程。
译注：由于众所周知的网络原因，react-native命令行从npm官方源拖代码时会遇上麻烦。请先将npm仓库源替换为国内镜像：
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
另，执行init时切记不要在前面加上sudo（否则新项目的目录所有者会变为root而不是当前用户，导致一系列权限问题，请使用chown修复）。本站论坛区提供了。完整打包全部iOS和Android的第三方依赖，只要环境配置正确，无需科学上网漫长等待，解压即可直接运行。
想开发iOS版本，你现在可以在XCode中打开刚刚创建的工程(AwesomePrjoect/iOS/AwesomeProject.xcodeproj)，然后只要按下?+R就可以构建并运行。这个操作会同时打开一个用于实现动态代码加载的Node服务（React Packager）。所以每当你修改代码，你只需要在模拟器中按下?+R，而无需重新在XCode中编译。
想开发Android版本，先连接你的设备或启动模拟器，然后在AwesomeProject目录下运行react-native run-android，就会构建工程并自动安装到你的模拟器或者设备，同时启动用于实现动态代码加载的Node服务。当你修改代码之后，你需要打开摇一摇菜单(摇一下设备，或者按下设备的Menu键，或者在模拟器上按下F2或Page Up，Genymotion按下?+M)，然后在菜单中点击“Reload JS”。
在本向导中我们会创建一个简单的Movies应用，它可以获取25个上映中的电影，然后把他们在一个ListView中显示。
Hello World
react-native init命令会创建一个指定名字的应用，我们刚才输入的命令就创建了一个名为AwesomePrjoect的应用。这是一个简单的Hello World应用。对于iOS版本，你可以编辑index.ios.js来做一些改动，然后在模拟器中按?+R来看到修改的结果。对Android版本，你可以编辑index.android.js来做一些改动，然后在摇一摇菜单中点击“Reload JS”来看到修改的结果。
译注：本文的示例代码改用了ES6语法，可能和其他文档写法不一致。但React Native从0.18之后，新建项目默认已经采用了ES6语法，故我们推荐不熟悉ES6与ES5区别的朋友先读读，另外还可以看看。
在我们真正从Rotten Tomatoes(译注：一个国外的电影社区)抓取数据之前，我们先制造一些模拟数据来练一练手。在Facebook我们通常在JS文件的开头，紧跟着import语句之后声明一个常量，不过这不重要，你可以把它放在index.ios.js和index.android.js的任意位置：
var MOCKED_MOVIES_DATA = [
{title: '标题', year: '2015', posters: {thumbnail: '/UePbdph.jpg'}},
展现一个电影
我们接下来要展现一个电影，绘制它的标题、年份、以及缩略图(译注：这个过程我们通常会叫做“渲染/render”，后面我们都会用“渲染”这个词)。渲染缩略图需要用到Image组件，所以把Image添加到对React的import列表中。
import React, {
AppRegistry,
Component,
StyleSheet,
} from 'react-native';
然后修改一下render函数，这样我们可以把上面创建的模拟数据渲染出来。
render() {
var movie = MOCKED_MOVIES_DATA[0];
style={styles.container}&
&{movie.title}&
&{movie.year}&
source={{uri: movie.posters.thumbnail}} /&
按下?+R或者Reload JS，现在你应该能看到文字&Title&和&2015&，但现在Image组件没渲染任何东西，这是因为我们还没有为图片指定我们想要渲染的宽和高。这通过样式来实现。当我们修改样式的时候，我们也应该清理掉我们不再使用的样式。
var styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
thumbnail: {
width: 53,
height: 81,
然后把它应用到Image组件上：
source={{uri: movie.posters.thumbnail}}
style={styles.thumbnail}
按下?+R或者Reload JS，现在图片应该可以被渲染出来了。
现在我们已经成功的把我们的数据渲染出来了，下面让我们把它弄的更好看一些。我想把文字放在图片的右边，然后把标题弄的大一些，并且水平居中：
+---------------------------------+
|+-------++----------------------+|
|+-------++----------------------+|
+---------------------------------+
所以我们需要增加一个container来实现一个水平布局内嵌套一个垂直布局。
style={styles.container}&
source={{uri: movie.posters.thumbnail}}
style={styles.thumbnail}
style={styles.rightContainer}&
style={styles.title}&{movie.title}&
style={styles.year}&{movie.year}&
和之前相比并没有太多变化，我们增加了一个container来包装文字，然后把它移到了Image的后面（因为他们最终在图片的右边）。然后我们来看看样式要怎么改：
container: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
我们用Flexbox来布局。如果你想了解更多，可以读读。
在上面的代码片段中，我们用了一句flexDirection: &#39;row&#39;来让我们的主容器的成员从左到右横向布局，而非默认的从上到下纵向布局。
现在我们往style对象里增加另一个样式：
rightContainer: {
这句话的作用是让rightContainer在父容器中占据Image之外剩下的全部空间。如果你还不是很理解的话，你可以往rightContainer里增加一个backgroundColor看一看，然后再去掉flex:1对比一下。你会发现去掉这一句后，容器会变成能容纳它孩子的最小大小。
给文字添加样式就简单的多了：
fontSize: 20,
marginBottom: 8,
textAlign: 'center',
textAlign: 'center',
再按一次?+R或者Reload JS来看看最新的结果。
拉取真正的数据
从Rotten Tomatoes的API拉取数据和学习React Native并没有什么直接关系，所以你也可以直接跳过本节。
把下面的常量放到文件的最开头（通常在require下面）来创建我们请求数据所需的地址常量REQUEST_URL
var REQUEST_URL = '/facebook/react-native/master/docs/MoviesExample.json';
首先在应用中创建一个初始的null状态，这样可以通过this.state.movies == null来判断我们的数据是不是已经被抓取到了。我们在服务器响应返回的时候执行this.setState({movies: moviesData})来改变这个状态。把下面这段代码放到我们的React类的render函数之前：
constructor(props) {
super(props);
this.state = {
movies: null,
组件加载完毕之后，就可以向服务器请求数据。componentDidMount是React组件的一个生命周期方法，它会在组件刚加载完成的时候调用一次，以后不再会被调用。React中的各种生命周期方法请。
componentDidMount() {
this.fetchData();
现在我们来为组件添加fetchData函数。你所需要做的就是在Promise调用链结束后执行this.setState({movies:data})。在React的工作机制下，setState实际上会触发一次重新渲染的流程，此时render函数被触发，发现this.state.movies不再是null。注意我们在Promise调用链的最后调用了done() —— 这样可以抛出异常而不是简单忽略。
fetchData() {
fetch(REQUEST_URL)
.then((response) =& response.json())
.then((responseData) =& {
this.setState({
movies: responseData.movies,
现在我们来修改render函数。在电影数据加载完毕之前，先渲染一个“加载中”的视图；而如果电影数据已经加载完毕了，则渲染第一个电影数据。
render() {
if (!this.state.movies) {
return this.renderLoadingView();
var movie = this.state.movies[0];
return this.renderMovie(movie);
renderLoadingView() {
style={styles.container}&
正在加载电影数据……
renderMovie(movie) {
style={styles.container}&
source={{uri: movie.posters.thumbnail}}
style={styles.thumbnail}
style={styles.rightContainer}&
style={styles.title}&{movie.title}&
style={styles.year}&{movie.year}&
现在再按一次?+R或者Reload JS，你会首先看到“正在加载电影数据……”，然后在响应数据到达之后，看到第一个电影的信息。
现在我们来让我们的应用能够渲染所有的数据而不是仅仅第一部电影。我们要用到的就是ListView组件。
为什么建议把内容放到ListView里？比起直接渲染出所有的元素，或是放到一个ScrollView里有什么优势？这是因为尽管React很高效，渲染一个可能很大的元素列表还是会很慢。ListView会安排视图的渲染，只显示当前在屏幕上的那些元素。而那些已经渲染好了但移动到了屏幕之外的元素，则会从原生视图结构中移除（以提高性能）。
首先要做的事情：在文件最开头，从React中引入ListView。
import React, {
AppRegistry,
Component,
StyleSheet,
} from 'react-native';
现在来修改render函数。当我们已经有了数据之后，渲染一个包含多个电影信息的ListView，而不仅仅是单个的电影。
render() {
if (!this.state.loaded) {
return this.renderLoadingView();
dataSource={this.state.dataSource}
renderRow={this.renderMovie}
style={styles.listView}
dataSource接口用来在ListView的整个更新过程中判断哪些数据行发生了变化。
你会注意到我们现在用到了this.state中的dataSource。下一步就是在constructor生成的初始状态中添加一个空白的dataSource。另外，我们现在要把数据存储在dataSource中了，所以不再另外用this.state.movies来保存数据。我们可以在state里用一个布尔型的属性(this.state.loaded)来判断数据加载是否已经完成了。
constructor(props) {
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) =& row1 !== row2,
loaded: false,
同时我们也要修改fetchData方法来把数据更新到dataSource里：
fetchData() {
fetch(REQUEST_URL)
.then((response) =& response.json())
.then((responseData) =& {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
loaded: true,
最后，我们再在styles对象里给ListView添加一些样式。
listView: {
paddingTop: 20,
backgroundColor: '#F5FCFF',
现在可以体现最终的结果了：
为了实现一个完整功能的应用，接下来其实还有一些工作要做，譬如：添加导航器，搜索，加载更多，等等等等。可以在中看看我们做了什么。
最终的代码
import React, {
AppRegistry,
Component,
StyleSheet,
} from 'react-native';
var API_KEY = '7waqfqbprs7pajbz28mqf6vz';
var API_URL = '/api/public/v1.0/lists/movies/in_theaters.json';
var PAGE_SIZE = 25;
var PARAMS = '?apikey=' + API_KEY + '&page_limit=' + PAGE_SIZE;
var REQUEST_URL = API_URL + PARAMS;
class AwesomeProject extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) =& row1 !== row2,
loaded: false,
componentDidMount() {
this.fetchData();
fetchData() {
fetch(REQUEST_URL)
.then((response) =& response.json())
.then((responseData) =& {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
loaded: true,
render() {
if (!this.state.loaded) {
return this.renderLoadingView();
dataSource={this.state.dataSource}
renderRow={this.renderMovie}
style={styles.listView}
renderLoadingView() {
&View style={styles.container}&
Loading movies...
renderMovie(movie) {
&View style={styles.container}&
source={{uri: movie.posters.thumbnail}}
style={styles.thumbnail}
&View style={styles.rightContainer}&
&Text style={styles.title}&{movie.title}&/Text&
&Text style={styles.year}&{movie.year}&/Text&
var styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
rightContainer: {
fontSize: 20,
marginBottom: 8,
textAlign: 'center',
textAlign: 'center',
thumbnail: {
width: 53,
height: 81,
listView: {
paddingTop: 20,
backgroundColor: '#F5FCFF',
AppRegistry.registerComponent('AwesomeProject', () =& AwesomeProject);
快速入门使用指南使用指南(iOS)使用指南(Android)组件API接口兼容(POLYFILLS)React Native中文网.(C) 2017 杭州欧石南网络科技有限公司浙ICP备号-3浙公网安备 11号　　本篇会简明扼要的介绍一下React的使用方法。代码会用JSX+ES5和JSX+ES6两种方式实现。　　
React简介　　
　　React来自Facebook，于2013年开源。至今不断修改完善，现在已经到达了版本0.14.2。可以注意到版本还没有到1.0, 普遍应用到大部分产品中还需要一定的时间。2015年3月份，FaceBook发布了React Native，一个用react来构建native app的框架。
　　步入正题，React是一个javascript的类库，用于构建用户界面。
JUST THE UI
　　不同于Angularjs框架，React不属于MVC框架，它可以算是MVC里面的V层，所以相对来说入门也简单一下（只指入门，深度研究的话也不简单）。
VIRTUAL DOM——虚拟DOM
　　虚拟dom其实是轻量的js对象，只保留了原生dom的一些常用的属性和方法。
自定义标签
　　学习React需要有一种全新的思路去看待view层的构建。除了使用html原生的标签，开发者还可以自定义标签（即虚拟DOM，最终给浏览器渲染的时候会解析成原生dom），自然代码解耦的效果会很明显，也更易读。
　　在大家优化代码性能的时候，一定会关注有没有多余的dom操作，这是因为dom相关的操作耗时比较长。就算是创建一个空标签，也许要初始化它的各种默认属性和事件。
　　React渲染页面并不直接操作dom，而是先通过比较前后虚拟dom的差异。这最大程度的简化dom操作，大大提高了性能。由于只是局部更新dom，所以只是局部刷新。
　　换而言之，虚拟dom的出现，是因为目前js的性能比DOM渲染的性能要好，所以可以用更多的js操作换取更少的dom操作。也不排除如果将来有一天dom的性能和js差不多的时候，虚拟dom也许就没那么大的意义了。
React是单向响应的数据流。
React相关知识简介
　　一种特殊的js语法，可以在js代码中直接使用html标签。是个语法糖，提高编写代码效率。
　　要注意不能在标签的中间添加注释，因为最终还是要翻译成原生js，标签中添加注释相当于在一行代码还没完的时候就添加注释。
　　在jsx中，变量用花括号包围起来，花括号内的语句将以js代码的方式解析。
　　例如：
// 用纯js在react中创建a标签
var newDom=&React.createElement(&#39;a&#39;, {href: &#39;https://facebook.github.io/react/&#39;}, &#39;Hello!&#39;);
// 用jsx在react中创建a标签
var newDom=&a href=&https://facebook.github.io/react/&&Hello!&/a&;
　　要让浏览器认识这种新的语法，就需要下面介绍的babel了。
　　　是一个javascript代码转换器，在这里我们可以用于jsx转换为原生js，es6转换为es5(大部分都能转换)。当然它的功能不只这些，有兴趣的可以去看看。它还有个，代码比较简单的时候用这个排查问题或练习es6很方便。
　　介绍两种常用的使用方式：
一种是浏览器来编译，因为实时编译会很慢，所以适合代码量比较小的。只需在html中引用：
&script src=&/ajax/libs/babel-core/5.8.23/browser.min.js&&&/script&
一种是本地使用。通过npm安装，在webpack中配置：
//在webpack.config.js文件中配置
module.exports = {
loaders: [{
test: /\.jsx?$/,
loader: &#39;babel&#39;
　　可以在本地编译好代码后，再将编译后的代码给html引用，提高性能，适合大项目。
　　一个模块打包工具，它把不同的、相互依赖的静态资源都视作模块，并且打包成我们想要的静态资源。
　　另外可以方便的配置多种预处理器，如babel。
　　使用webpack，让代码组织更清晰，一个文件就是一个模块。
　　ES6，也叫ECMAScript2015（以下统称ES6），是ECMAScript标准的最新版本。详细可见
搭建简单的运行环境
方式一：直接引入react、reactdom、babel的库。
　　因为这种方式是浏览器负责即时编译的，所以可想而知项目大了得时候解析速度会很慢，不建议使用。但是我们只是学习react语法嘛，当然要搭的环境越简单越好。
　　这种方式就是官网给出的实例所使用的方式。注意写jsx的的js块的type=&text/babel&,这样才能被浏览器识别并用babel编译。
　　以下是本章要用到的代码框架(一个helloword的demo) :
&!DOCTYPE html&
&meta charset=&utf-8&&
&title&demo&/title&
&div id=&#39;example&#39;&&/div&
&script src=&./build/react.js&&&/script&
&script src=&./build/react-dom.js&&&/script&
&script src=&./build/browser.min.js&&&/script&
&script type=&text/babel&&
// react代码写到这里
ReactDOM.render(&h1&hello word!&/h1&,document.getElementById(&#39;example&#39;));
方式二：使用npm + webpack
　　篇幅限制，下篇说，欢迎看第二篇。
学会react的基本语法
　　一般从定义到使用组件的流程是：定义组件creatClass,实现render方法-&将组件渲染到页面ReactDOM.render()。
创建ReactElement
　　ReactElement对象可以看成是虚拟DOM树。它既是渲染组件ReactDOM.render(root,container)的第一个参数，又是创建组件React.createClass中render方法的返回值。记住ReactElement是唯一父节点的’dom树‘就好。
react原生实现
React.createElement(
string/ReactClass type, //type组件类型可以是内置的标签，如div；也可以是由React.createClass(object specification)创建的虚拟组件
[object props], // 标签属性,数组
[children ...],// 标签的innerHtml
)//返回类型是ReactElement
var newDom=React.createElement(&#39;a&#39;, {href: &#39;https://facebook.github.io/react/&#39;}, &#39;Hello!&#39;);
&a href=&#39;&#39;&Hello&/a&
把组件渲染到浏览器中
　　react-dom模块中的方法。
　　ReactDom.render(root, container); root为ReactElement类型，表示root替换container中的元素。注意是替换不是追加，所以有些情况父元素应该设置为空。
var content=React.createElement(&#39;h1&#39;,{},&#39;hello&#39;);
ReactDOM.render(content,document.getElementById(&#39;example&#39;));
ReactDOM.render(&h1&hello word!&/h1&,document.getElementById(&#39;example&#39;));
　　组件是一个自定义的js对象，在es5中使用React.createClass();在es6中必须继承ponent。
　　其中有个特殊的render方法，返回ReactElement对象。该方法会在我们使用JSX语法的标签时被调用，因此我们在渲染组件时第一个参数可以使用自定义标签或者createElement。
　　如：ReactDOM.render(&MyElement /&,document.getElementById('example')) 　　 　
var NewDom = React.createClass({//类名一定要大写开头
render: function() {
React.Children.map(this.props.children, function (child) {
//获得元素的子元素
(&#39;child:&#39;+child);
return &li&{child}&/li&;//变量用花括号标识
})//因为有多个子元素，所以返回的是数组。按照JSX变量是数组来解析。
ReactDOM.render(
&span&lala&/span&
&span&ass&/span&
&/NewDom&,
document.getElementById(&#39;example&#39;)
class NewDom ponent{
render() {//开头花括号一定要和小括号隔一个空格，否则识别不出来
return &ol&//标签开头一定要和return一行
React.Children.map(this.props.children, function (child) {
return &li&{child}&/li&;
ReactDOM.render(
&span&lala&/span&
&span&ass&/span&
&/NewDom&,
document.getElementById(&#39;example&#39;)
组件的属性props
一个js对象，对应于dom的属性。
某些html的属性名因为正好是js得保留字，所以需要重新命名。
因为js中class为保留字，所以要写成className。
&a className=&center&&&/a&
style属性接受由css属性构成的js对象。对于jsx来说第一是变量，第二是对象，因此要两个花括号，key值用驼峰命名法转化了，value值用引号括起来
&a style={{backgroundImage: 'url(' + imgUrl + ')',font:'12px'}}&&/a&
this.props.children 表示组件的所有子节点，上一小节的示范代码中有介绍
传递属性值
在ReactDOM.Render第一个参数中直接写入带属性的标签即可： &a newProp=&propValue&&&/a& 。这样就可以在this.props['newProp']中读取值
设置默认属性
在ES6中为属性：defaultProps(可以标识static定义在class内，也可以定义在class外)
在ES5中为方法：getDefaultProps: function(){return {name:value}};
属性的读取
this.props['propName']获得属性
新增功能：属性校验器propTypes
见代码示例
var NewDom = React.createClass({//类名一定要大写开头
getDefaultProps: function() {//设置默认属性
return {title:&#39;133&#39;};
propTypes: {
title:React.PropTypes.string,
},//属性校验器，表示必须是string
render: function() {
return &div&{this.props.title}&/div&;//变量用花括号标识
class NewDom ponent{
//不能再组件定义的时候定义一个属性
render() {
return &div &1{this.props.title}&/div&;
}//开头花括号一定要和小括号隔一个空格，否则识别不出来
//es6 这两个属性不能写在class内。
NewDom.propTypes={//属性校验器，表示改属性必须是bool，否则报错
title: React.PropTypes.bool,
NewDom.defaultProps={title:&#39;133&#39;};//设置默认属性
组件的状态state
　　一个js对象，存储着组件当前的状态以及其值的集合。
　　个人觉得这也是react的创新点之一，可以把组件看成一个“状态机”. 根据不同的status有不同的UI展示。只要使用setState改变状态值，根据diff算法算出来有差以后，就会执行ReactDom的render方法，重新渲染页面。
　　这避免了开发者直接操作dom对象已达到重新渲染页面。开发者只需要关注state这个中间人，控制它就可以控制页面刷新。第二篇中评论框的渲染就是使用的state来控制。
　　是不是感觉和props有些类似？一般区分两个的原则是，可变的放在state中，不可变的放在props中。　
class *** ponent{
getInitialState: function() {
return {liked: false};
class *** ponent{
constructor(props) {
super(props);
this.state = {liked: false};
es5和es6中使用方法相同。
this.setState(新的state对象);
其实就是读取一个js对象。
和属性名类似，到了react中，事件名也成了驼峰命名法，比如onclick变为了onClick.
一定要注意es6中元素如何使用自定义事件。见代码。
var NewDom = React.createClass({//类名一定要大写开头
btnClick:function(ele){
(this.refs.tex);
render: function() {
return &div &
&input type=&text& ref=&tex& /&
&input type=&button& onClick={this.btnClick} value=&#39;click me&#39; /&
&/div&;//变量用花括号标识
class NewDom ponent{
btnClick(){
(this);//this为该组件类
(this.refs.tex);//this.refs.tex为组件里面索引为tex的
render() {
return &div &
&input type=&text& ref=&tex& /&
&input type=&button& onClick={this.btnClick.bind(this)} value=&#39;click me&#39; /&
&/div&;//注意bind后面的this
事件target
下面是一个事件对应要执行的函数的定义：
handleChange: function(event) {
this.setState({value: event.target.value});//event.target.value元素的值
每个控件取值不一样，value是指input控件，下拉框为selected，radiobutton为checked。a标签是innerHtml。可以自己通过(e.target) 调试出自己想要的那个字段
类名(组件名)一定要用大写开头，否则自定义的组件无法编译，识别不出来。
类中定义render函数要注意两点，见代码注释。
render() {//开头花括号一定要和小括号隔一个空格，否则识别不出来
return &ol&//标签前一半一定要和return一行
React.Children.map(this.props.children, function (child) {
return &li&{child}&/li&;
在class中使用class的变量或者方法，一定要加个this。如this.handlerclick。
es6 绑定事件需要onClick={this.func1.bind(this)}。
这样func1和bind里面的参数‘this’的作用域才绑定到了一起（注意es5是不需要这个bind(this)的），func1中如果有this.name这类语句，相当于是使用参数‘this’里面的变量值;或者使用箭头函数func1= (e)=& {函数体}
　　经过这番简单的练习后，如果还想看看做一个项目中如何使用react参见下章，一个模仿微博展示的demo（编写ing）。
　　本文没有对react作深入的研究。通过学习react的使用方法可以看到，react入门的话相对于其他框架还是比较简单的，代码逻辑也很清晰，好维护也好使用。重要的是，需要使用者把从前直接对dom操作的思维方式转换过来，相信会爱上它的。
　　ps: react 还在发展期，学习的话建议英语好的直接看官方文档，可以少走一些弯路。
阅读(...) 评论()