React组件开发入门
React
组件开发入门
Introduction
本文组成：
- Ryan Clark文章Getting started with React的翻译。
- 博主的实践心得。
React由Facebook的程序员创建，是一个非常强大的javascript类库。
一个很大的卖点是virtual DOM机制，在DOM操作的性能上有较大的优势。
React社区常常介绍它为MVC架构中的“V”，虽说如此，如果将React与Flux(以后将会介绍)结合，我们就可以轻松实现M与V的同步。
在本文中，将会用到博主前两天介绍的webpack。以下是博文链接：
webpack 学习笔记 01 使用webpack的原因
webpack 学习笔记 02 快速入门
Components
通过React，我们可以专注于可复用的组件开发，比如：一个下拉导航栏组件，一个功能齐全的数据表格。React中，像CommonJs标准中一样，React的组件与组件也能良好隔离，可以随意的在组件内部增加功能。
所有的React组件都需要实现一个函数: render，我们可以通过它，返回HTML或者调用其它的组件。正是这个基本的功能，给React带来了无限可能。
JSX
如果你曾经看过React相关的信息，那可能会对一个名词印象比较深刻：JSX。JSX使js无需""的包装，编写各类html tag。使得我们可以更快速的开发React组件(考虑到多行问题，在js中写HTML原本还是很麻烦的)。
我们可以借助一个js库，在浏览器中将JSX转换为js，但这不是推荐的做法，本文介绍了如何通过webpack在本地实现JSX到js的转换，使得浏览器不用解决这一问题。
Using JSX
render扮演着"ViewModel"的角色，在我们返回HTML信息前，将Model注入View，并加入各类js逻辑。
现在，我们新建一个目录，建立以下文件
index.html
entry.js
webpack.config.js
借助npm与bower我们可以快速下载依赖项
npm init
npm install babel-loader --save
bower install react
bower init以下是index.html的内容，借助webpack，我们可以不用再修改它，就完成本示例了。
<html>
<head>
<meta charset="utf-8">
<title>react demo</title>
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>以下是webpack配置内容
module.exports = {
entry: "./entry.js",
output:{
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel'
}
]}
}配置做好了，让我们开始第一个JSX。
var React = require("./bower_components/react/react.js");
var Widget = React.createClass({
render:function(){
return(
<div>
<h1>React with webpack</h1>
</div>);
}
});
React.render(<Widget />, document.body);运行指令
webpack -w可以看到如下结果：
Using variables for attributes
如前文所说，React组件里可以加入任意的js逻辑，我们可以把刚才的JSX改成这样：
var Widget = React.createClass({
render:function(){
var text = "React with webpack";
return(
<div>
<h1>{text}</h1>
</div>);
}
});Basics of a component
组件可以维护自己作用域下的各类状态值。使我们得以复用各类组件。
当我们通过向组件的attributes传值时，他们会作为properties而引用。这句话可能不好理解，我们看下代码：
var Widget = React.createClass({
render:function(){
var text = "";
return(
<div>
<h1>{this.props.displayText}</h1>
</div>);
}
});
React.render(<Widget displayText="React with webpack"/>, document.body);State
properties适合用在一次渲染，不需要改变的组件场景。在状态需要动态改变的场合，我们会用到state。通过this.setState 函数以改变状态值，之后，组件会重新渲染(借助virtual DOM机制，这一部分还是蛮快的)。 以下是Demo
var Widget = React.createClass({
getInitialState: function(){
return{
number: 0
};
},
increment: function(){
this.setState({
number: this.state.number + 1
});
},
render: function(){
return(
<div>
<h1>{this.state.number}</h1>
<button onClick={this.increment}>Inc</button>
</div>);
}
});显示的数字将伴随按钮点击上升。
The component lifecycle
所有的组件都是有生命周期的，这无疑为我们开发提供了很大的便利。比如刚才例子中的getInitialState，只会在控件装载(mount)后，调用一次。当然还有其它的生命周期函数：componentWillMount在组件即将装载前调用，可以把Ajax放这。componentDidMount在组件已经被渲染出了DOM后调用，这时，我们可以借助this.getDOMNode取到跟节点，做一些后续工作。componentWillUnmount组件被移除时，相关资源的清理工作，就得在这里(如移除EventHandler，若EventHandler操作了不存在的组件，error自然就被抛出)。
Component Methods
通过getDefaultProps，我们可以为properties提供默认值，即当properties没有通过attributes传入，这些默认值会派上用场。
var Widget = React.createClass({
getDefaultProps: function(){
return{
number: 10
};
},
render: function(){
return(
<div>
<h1>{this.props.number}</h1>
</div>);
}
});
React.render(<Widget/>, document.body);React并不提倡提供过多的模版功能，它提倡的是回归原始，比如：当我们需要用到repeater。我们可以这样：
var Widget = React.createClass({
render: function(){
var data =[1,2,3,4]; //请假设这是有用数据
var content = data.map(function(item){
return (<h2>{item}</h2>)
});
return(
<div>
<h1>{content}</h1>
</div>);
}
});
React组件开发入门的更多相关文章
- React组件开发（一）初识React
*React不属于MVC.MVVM,只是单纯的V层. *React核心是组件(提高代码复用率.降低测试难度.代码复杂度). *自动dom操作,状态对应内容. *React核心js文件:react.js ...
- wn-cli 像React组件开发一样来开发微信小程序
项目地址:wn-cli wn-cli wn-cli 像React组件开发一样来开发微信小程序 名字由来:wn -> weapp native 取第一个字母 Install npm install ...
- react组件开发规范（一）
这是通过修改项目运行在Google上时的警告,总结的的部分react组件开发规范: (1)编写组件时,一定要写PropTypes,切莫为了省事儿而不写! 如果一个Props不是required,一定在 ...
- jquery插件模式开发和react组件开发之间的异同
jquery插件模式开发和react组件开发之间的异同
- react复习总结（1）--react组件开发基础
这次是年后第一次发文章,也有很长一段时间没有写文章了.准备继续写.总结是必须的. 最近一直在业余时间学习和复习前端相关知识点,在一个公司呆久了,使用的技术不更新,未来真的没有什么前景,特别是我们这种以 ...
- React 实践记录 01 组件开发入门
Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程序员创建,是一个非常强大的 ...
- React Native开发入门
目录: 一.前言 二.什么是React Native 三.开发环境搭建 四.预备知识 五.最简单的React Native小程序 六.总结 七.参考资料 一.前言 虽然只是简单的了解了一下Reac ...
- React组件开发
目录: 属性:props 内联样式 状态记忆 : state 生命周期 访问DOM 表单输入 承接快速入门篇:http://www.cnblogs.com/jasonnode/p/4444504.ht ...
- React 组件开发注意事项
0.state的设定原则,如果render里用不到,则就不应该是一个state. 1.数组遍历时,用每一条数据的唯一标识作为key,尽量不要使用遍历的索引值作为key,如果它们从不重新排序,它们工作也 ...
随机推荐
- session与cookie的差别
session session 的工作机制是:为每一个訪客创建一个唯一的 id (UID),并基于这个 UID 来存储变量.UID 存储在 cookie 中,或者通过 URL 进行传导. ...
- Linux内核源代码的学习过程转换完成细节
linux中的进程是个最主要的概念,进程从执行队列到開始执行有两个開始的地方, 一个就是switch_to宏中的标号1:"1:/t",//仅仅要不是新创建的进程,差点儿都是从上面的 ...
- NET MVC异常处理模块
一个简单的ASP.NET MVC异常处理模块 一.前言 异常处理是每个系统必不可少的一个重要部分,它可以让我们的程序在发生错误时友好地提示.记录错误信息,更重要的是不破坏正常的数据和影响系统运行. ...
- GNU名称解析
GNU它是GNU's NOT UNIX缩写G N U缩写,和GNU全名GNU's NOT UNIX 中间 GNU 也GNU's NOT UNIX缩写,它使用递归方式定义GNU.
- Sandcastle生成帮助文档
http://www.cnblogs.com/net515/p/3311584.html Sandcastle帮助文档生成器使用介绍 一.软件介绍 Sandcastle是一个管理类库的文档 ...
- kindeditor-网页文字编辑
实例下载地址:http://download.csdn.net/download/l294333475/7941759 <!DOCTYPE html PUBLIC "-//W3C//D ...
- zoj 3288 Domination (可能dp)
///dp[i][j][k]代表i行j列件,并把一k的概率 ///dp[i][j][k]一种常见的方法有四种传输 ///1:dp[i-1][j][k-1] 可能 (n-(i-1))*j/(n*m-(k ...
- composite template 组合模式
1. 主要优点 组合模式的主要优点如下: (1) 组合模式可以清楚地定义分层次的复杂对象,表示对象的全部或部分层次,它让客户端忽略了层次的差异,方便对整个层次结构进行控制. (2) 客户端可以一致 ...
- javascript焦点图（能够自己主动切换 ）
/* 思路总结: 1.实现图片滚动的function.鼠标经时候获取当前li的index.设置ndex自己主动递增的函数.实现淡入淡出效果的函数 2.整个实现效果一传递index为主线 3.我的编写代 ...
- [Servlet3.0新功能]注释替代配置文件
作者信息 作者名称:金云龙 个人网站:http://www.longestory.com 个人公众帐号:搜索"longestory"或"龙哥有话说" 须要注意的 ...