[深入剖析ReactNative]React初探
认识React
React是一个用于构建用户界面的JavaScript库。
React主要用于构建UI，很多人认为React是MVC中的V，即视图。
React起源于Facebook的内部项目，用来架设Instagram的网站，并于2013年5月开源。
React拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和实用它。
React特点
声明式设计－React采用声明范式，可以轻松描述应用。
高效－React通过对DOM的模拟，最大限度地减少与DOM的交互。
灵活－React可以与已知的库或框架很好地配合。
JSX－JSX是JavaScript语法的扩展。React开发不一定适用JSX，但我们建议使用它。
组件－通过React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
单向响应的数据流－React实现了单项的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
基础知识
在学习React之前，需要具备一下基础知识：
-HTML5
-CSS
-JavaScript
简单实例
ReactDOM.render(
HelloWorld!
document.getElementById(''example'')
);
React安装
使用库：
1
2
3
使用实例：
输出Hello,world!
HelloReact!
ReactDOM.render(
Hello,world!,
document.getElementById(''example'')
);
实例解析：
实例中我们引入了三个库：react.js、react-dom.js和browser.min.js：
-react.js-React的核心库
-react-dom.js-提供与DOM相关的功能
-browser.min.js-用于将JSX语法转为JavaScript语法
ReactDOM.render(
Hello,world!,
document.getElementById(''example'')
);
以上代码将一个h1标题，插入id=”example”节点中。
注意：如果我们需要使用JSX，则script标签的type属性需要设置为text/babel
通过npm使用React
我们建议在React中使用CommonJS模块系统，比如browserify或webpack，本教程使用webpack。
安装全局包
$npminstallbabel-g
$npminstallwebpack-g
$npminstallwebpack-dev-server-g
创建根目录
创建一个根目录，名称为mazouriApp，再使用npminit初始化，生成package.json文件：
添加依赖包及插件
因为我们要使用React，所以我们需要先安装它，–save命令用于将包添加至package.json文件
npminstallreact--save
npminstallreact-dom--save
同时我们也需要安装一些babel插件
npminstallbabel-core
npminstallbabel-loader
npminstallbabel-preset-react
npminstallbabel-preset-es2015
创建文件
接下来我们创建一些必要的文件：
touchindex.html
touchApp.jsx
touchmain.js
touchwebpack.config.js
设置编译器、服务器、载入器
打开webpack.config.js文件添加以下代码：
varconfig={
entry:''./main.js'',
outout:{
path:''./'',
filename:''index.js'',
},
devServer:{
inline:true,
port:7777
},
module:{
loaders:[{
test:/\.jsx?$/,
exclude:/node_moudules/,
loader:''babel-loader'',
query:{
presets:[''es2015'',''react'']
}
}]
}
}
module.exports=config;
entry:指定打包的入口文件main.js
output:配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称
devServer:设置服务器端口号为7777，端口号你可以自己设定
module:定义了对模块的处理逻辑，这里可以用loaders定义一些列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因
现在打开package.json文件，找到“scripts”中的“test”“echo\”Error:notestspecified\”&&exit1”使用以下代码替换：
"start":"webpack-dev-server--hot"
1
替换后的package.json文件内容如下：
{
"name":"mazouri-react-demo",
"version":"1.0.0",
"description":"我的reactdemo",
"main":"index.js",
"scripts":{
"start":"webpack-dev-server--hot"
},
"author":"",
"license":"ISC",
"dependencies":{
"react":"^15.3.1",
"react-dom":"^15.3.1"
}
}
现在我们可以使用npmstart命令来启动服务。–hot命令会在文件变化后重新载入，这样我们就不需要在代码修改后重新刷新浏览器就能看到变化。
index.html
设置divid=“app”为我们应用的根元素，并引入index.js脚本文件
mazouriReactdemo
App.jsx和main.js
这是第一个react组件,这个组件将输出HelloWorld!!!。
importReactfrom''react'';
classAppextendsReact.Component{
render(){
return(
HelloWorld!!!
这是mazourireactapp的一个demo
);
}
}
exportdefaultApp;
我们需要引入组件并将其渲染到根元素App上，这样我们才可以在浏览器上看到它
importReactfrom''react'';
importReactDOMfrom''react-dom'';
importAppfrom''./App.jsx'';
ReactDOM.render(,document.getElementById(''app''))
如果想要组件可以在任何的应用中使用，需要在创建后使用export将其导出，在使用组件的文件使用import将其导入。
运行服务
完成以上配置后，我们即可运行该服务：
$npmstart
1
JSX
React使用JSX来代替常规的JavaScript。
JSX是一个看起来很像XML的JavaScript语法扩展。
我们不需要一定使用JSX，但它有以下优点：
JSX执行更快，因为它在编译为JavaScript代码后进行了优化
它是类型安全的，在编译过程中就能发现错误
使用JSX编写模版更加简单快速
使用JSX
JSX看起来类似HTML,我们可以看下实例：
ReactDOM.render(
Hello,world!,
document.getElementById(''example'')
);
我们可以在上面代码中嵌套多个HTML标签，需要使用一个div元素包裹它，实例中的p元素添加了自定义属性data-myattribute，添加自定义属性需要使用data-前缀。
ReactDOM.render(
,
document.getElementById(''example'')
);
独立文件
你的ReactJSX代码可以放在一个独立文件上，例如我们创建一个helloworld_react.js文件，代码如下：
ReactDOM.render(
Hello,world!,
document.getElementById(''example'')
);
然后在HTML文件中引入该JS文件：
JavaScript表达式
我们可以在JSX中使用JavaScript表达式。表达式写在花括号{}中。实例如下：
ReactDOM.render(
{1+1}
,
document.getElementById(''example'')
);
在JSX中不能使用ifelse语句，但可以使用conditional(三元运算)表达式来替代。以下实例中如果变量i等于1浏览器将输出true,如果修改i的值，则会输出false.
ReactDOM.render(
{i==1?''True!'':''False''}
,
document.getElementById(''example'')
);
样式
React推荐使用内联样式。我们可以使用camelCase语法来设置内联样式.React会在指定元素数字后自动添加px。以下实例演示了为h1元素添加myStyle内联样式：
varmyStyle={
fontSize:100,
color:''#FF0000''
};
ReactDOM.render(
菜鸟教程,
document.getElementById(''example'')
);
注释
注释需要写在花括号中，实例如下:
ReactDOM.render(
React初探
{/注释.../}
,
document.getElementById(''example'')
);
数组
JSX允许在模板中插入数组，数组会自动展开所有成员：
vararr=[
React初探,
学习React技术！,
];
ReactDOM.render(
{arr} ,
document.getElementById(''example'')
);
HTML标签vs.React组件
React可以渲染HTML标签(strings)或React组件(classes)。
要渲染HTML标签，只需在JSX里使用小写字母的标签名。
varmyDivElement=;
ReactDOM.render(myDivElement,document.getElementById(''example''));
1
2
要渲染React组件，只需创建一个大写字母开头的本地变量。
varMyComponent=React.createClass({/.../});
varmyElement=;
ReactDOM.render(myElement,document.getElementById(''example''));
React的JSX使用大、小写的约定来区分本地组件的类和HTML标签。
注意：由于JSX就是JavaScript，一些标识符像class和for不建议作为XML属性名。作为替代，ReactDOM使用className和htmlFor来做对应的属性。
React组件
这节我们讨论如何使用组件使得我们的应用更容易来管理。
接下来我们封装一个输出”Helloworld!”的组件，组件名为HelloMessage：
varHelloMessage=React.createClass({
render:function(){
returnHelloWorld！;
}
});
ReactDOM.render(
,
document.getElementById(''example'')
);
实例解析：
React.createClass方法用于生成一个组件类HelloMessage。
实例组件类并输出信息。
注意，原生HTML元素名以小写字母开头，而自定义的React类名以大写字母开头，比如HelloMessage不能写成helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。
如果我们需要向组件传递参数，可以使用this.props对象,实例如下：
varHelloMessage=React.createClass({
render:function(){
returnHello{this.props.name};
}
});
ReactDOM.render(
,
document.getElementById(''example'')
);
以上实例中name属性通过this.props.name来获取.
注意，在添加属性时，class属性需要写成className，for属性需要写成htmlFor，这是因为class和for是JavaScript的保留字。
1
复合组件
我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。
以下实例我们实现了输出网站名字和网址的组件：
varWebSite=React.createClass({
render:function(){
return(
);
}
});
varName=React.createClass({
render:function(){
return(
{this.props.name}
);
}
});
varLink=React.createClass({
render:function(){
return(
{this.props.site}
);
}
});
React.render(
,
document.getElementById(''example'')
);
实例中WebSite组件使用了Name和Link组件来输出对应的信息，也就是说WebSite拥有Name和Link的实例
ReactState(状态)
React把组件看成是一个状态机（StateMachines）。通过与用户的交互，实现不同状态，然后渲染UI，让用户界面和数据保持一致。
React里，只需更新组件的state，然后根据新的state重新渲染用户界面（不要操作DOM）。
以下实例中创建了LikeButton组件，getInitialState方法用于定义初始状态，也就是一个对象，这个对象可以通过this.state属性读取。当用户点击组件，导致状态变化，this.setState方法就修改状态值，每次修改以后，自动调用this.render方法，再次渲染组件。
varLikeButton=React.createClass({
getInitialState:function(){
return{liked:false};
},
handleClick:function(event){
this.setState({liked:!this.state.liked});
},
render:function(){
vartext=this.state.liked?''喜欢'':''不喜欢'';
return(
你{text}我。点我切换状态。
);
}
});
React.render(
,
document.getElementById(''example'')
);
ReactProps
state和props主要的区别在于props是不可变的，而state可以根据与用户交互来改变。这就是为什么有些容器组件需要定义state来更新和修改数据。而子组件只能通过props来传递数据
使用Props
以下实例演示了如何在组件中使用props：
varHelloMessage=React.createClass({
render:function(){
returnHello{this.props.name};
}
});
ReactDOM.render(
,
document.getElementById(''example'')
);
实例中name属性通过this.props.name来获取。
默认Props
你可以通过getDefaultProps()方法为props设置默认值，实例如下：
varHelloMessage=React.createClass({
getDefaultProps:function(){
return{
name:''Runoob''
};
},
render:function(){
returnHello{this.props.name};
}
});
ReactDOM.render(
,
document.getElementById(''example'')
);
State和Props
以下实例演示了如何在应用中组合使用state和props。我们可以在父组件中设置state，并通过在子组件上使用props将其传递到子组件上。在render函数中,我们设置name和site来获取父组件传递过来的数据
varWebSite=React.createClass({
getInitialState:function(){
return{
name:"Geek马走日",
site:"https://github.com/mazouri"
};
},
render:function(){
return(
);
}
});
varName=React.createClass({
render:function(){
return(
{this.props.name}
);
}
});
varLink=React.createClass({
render:function(){
return(
{this.props.site}
);
}
});
React.render(
,
document.getElementById(''example'')
);
Props验证
Props验证使用propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes提供很多验证器(validator)来验证传入数据是否有效。当向props传入无效数据时，JavaScript控制台会抛出警告。
以下实例创建一个Mytitle组件，属性title是必须的且是字符串，如果是一个数字则会报错：
vartitle="React初探";
//vartitle=123;
varMyTitle=React.createClass({
propTypes:{
title:React.PropTypes.string.isRequired,
},
render:function(){
return{this.props.title};
}
});
ReactDOM.render(
,
document.getElementById(''example'')
);
更多验证器说明如下：
React.createClass({
propTypes:{
//可以声明prop为指定的JS基本数据类型，默认情况，这些数据是可选的
optionalArray:React.PropTypes.array,
optionalBool:React.PropTypes.bool,
optionalFunc:React.PropTypes.func,
optionalNumber:React.PropTypes.number,
optionalObject:React.PropTypes.object,
optionalString:React.PropTypes.string,
//可以被渲染的对象numbers,strings,elements或array
optionalNode:React.PropTypes.node,
//React元素
optionalElement:React.PropTypes.element,
//用JS的instanceof操作符声明prop为类的实例。
optionalMessage:React.PropTypes.instanceOf(Message),
//用enum来限制prop只接受指定的值。
optionalEnum:React.PropTypes.oneOf([''News'',''Photos'']),
//可以是多个对象类型中的一个
optionalUnion:React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.instanceOf(Message)
]),
//指定类型组成的数组
optionalArrayOf:React.PropTypes.arrayOf(React.PropTypes.number),
//指定类型的属性构成的对象
optionalObjectOf:React.PropTypes.objectOf(React.PropTypes.number),
//特定shape参数的对象
optionalObjectWithShape:React.PropTypes.shape({
color:React.PropTypes.string,
fontSize:React.PropTypes.number
}),
//任意类型加上`isRequired`来使prop不可空。
requiredFunc:React.PropTypes.func.isRequired,
//不可空的任意类型
requiredAny:React.PropTypes.any.isRequired,
//自定义验证器。如果验证失败需要返回一个Error对象。不要直接使用`console.warn`或抛异常，因为这样`oneOfType`会失效。
customProp:function(props,propName,componentName){
if(!/matchme/.test(props[propName])){
returnnewError(''Validationfailed!'');
}
}
},
/.../
});
React组件API
这节我们将讨论React组件API。我们将讲解以下7个方法：
设置状态：setState
替换状态：replaceState
设置属性：setProps
替换属性：replaceProps
强制更新：forceUpdate
获取DOM节点：findDOMNode
判断组件挂载状态：isMounted
设置状态：setState
setState(objectnextState[,functioncallback])
1
参数说明
-nextState，将要设置的新状态，该状态会和当前的state合并
-callback，可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用
callback，可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用
关于setState
不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换
setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。
setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑
实例
varCounter=React.createClass({
getInitialState:function(){
return{clickCount:0};
},
handleClick:function(){
this.setState(function(state){
return{clickCount:state.clickCount+1};
});
},
render:function(){
return(点我！点击次数为:{this.state.clickCount});
}
});
ReactDOM.render(
,
document.getElementById(''message'')
);
实例中通过点击h2标签来使得点击计数器加1
替换状态：replaceState
replaceState(objectnextState[,functioncallback])
1
nextState，将要设置的新状态，该状态会替换当前的state
callback，可选参数，回调函数。该函数会在replaceState设置成功，且组件重新渲染后调用
replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。
设置属性：setProps
setProps(objectnextProps[,functioncallback])
1
nextProps，将要设置的新属性，该状态会和当前的props合并
callback，可选参数，回调函数。该函数会在setProps设置成功，且组件重新渲染后调用
设置组件属性，并重新渲染组件。
props相当于组件的数据流，它总是会从父组件向下传递至所有的子组件中。当和一个外部的JavaScript应用集成时，我们可能会需要向组件传递数据或通知React.render()组件需要重新渲染，可以使用setProps()。
更新组件，我可以在节点上再次调用React.render()，也可以通过setProps()方法改变组件属性，触发组件重新渲染
替换属性：replaceProps
replaceProps(objectnextProps[,functioncallback])
1
nextProps，将要设置的新属性，该属性会替换当前的props
callback，可选参数，回调函数。该函数会在replaceProps设置成功，且组件重新渲染后调用
replaceProps()方法与setProps类似，但它会删除原有props
强制更新：forceUpdate
forceUpdate([functioncallback])
1
callback，可选参数，回调函数。该函数会在组件render()方法调用后调用
forceUpdate()方法会使组件调用自身的render()方法重新渲染组件，组件的子组件也会调用自己的render()。但是，组件重新渲染时，依然会读取this.props和this.state，如果状态没有改变，那么React只会更新DOM。
forceUpdate()方法适用于this.props和this.state之外的组件重绘（如：修改了this.state后），通过该方法通知React需要调用render()
一般来说，应该尽量避免使用forceUpdate()，而仅从this.props和this.state中读取状态并由React触发render()调用
获取DOM节点：findDOMNode
DOMElementfindDOMNode()
1
返回值：DOM元素DOMElement
如果组件已经挂载到DOM中，该方法返回对应的本地浏览器DOM元素。当render返回null或false时，this.findDOMNode()也会返回null。从DOM中读取值的时候，该方法很有用，如：获取表单字段的值和做一些DOM操作。
判断组件挂载状态：isMounted
boolisMounted()
1
返回值：true或false，表示组件是否已挂载到DOM中
isMounted()方法用于判断组件是否已挂载到DOM中。可以使用该方法保证了setState()和forceUpdate()在异步场景下的调用不会出错。
React组件生命周期
组件的生命周期可以分为三个状态：
-Mounting：已插入真实DOM
-Updating：正在被重新渲染
-Unmounting：已移出真实DOM
生命周期的方法有：
-componentWillMount在渲染前调用,在客户端也在服务端
-componentDidMount:在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout,setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)
-componentWillReceiveProps在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用
-shouldComponentUpdate返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。
-componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用
-componentDidUpdate在组件完成更新后立即调用。在初始化时不会被调用
-componentWillUnmount在组件从DOM中移除的时候立刻被调用
以下实例在Hello组件加载以后，通过componentDidMount方法设置一个定时器，每隔100毫秒重新设置组件的透明度，并重新渲染：
varHello=React.createClass({
getInitialState:function(){
return{
opacity:1.0
};
},
componentDidMount:function(){
this.timer=setInterval(function(){
varopacity=this.state.opacity;
opacity-=.05;
if(opacity<0.1){
opacity=1.0;
}
this.setState({
opacity:opacity
});
}.bind(this),100);
},
render:function(){
return(
Hello{this.props.name}
);
}
});
ReactDOM.render(
,
document.body
);
以下实例初始化state，setNewnumber用于更新state。所有生命周期在Content组件中
varButton=React.createClass({
getInitialState:function(){
return{
data:0
};
},
setNewNumber:function(){
this.setState({data:this.state.data+1})
},
render:function(){
return(
INCREMENT
);
}
})
varContent=React.createClass({
componentWillMount:function(){
console.log(''ComponentWILLMOUNT!'')
},
componentDidMount:function(){
console.log(''ComponentDIDMOUNT!'')
},
componentWillReceiveProps:function(newProps){
console.log(''ComponentWILLRECIEVEPROPS!'')
},
shouldComponentUpdate:function(newProps,newState){
returntrue;
},
componentWillUpdate:function(nextProps,nextState){
console.log(''ComponentWILLUPDATE!'');
},
componentDidUpdate:function(prevProps,prevState){
console.log(''ComponentDIDUPDATE!'')
},
componentWillUnmount:function(){
console.log(''ComponentWILLUNMOUNT!'')
},
render:function(){
return(
{this.props.myNumber}
);
}
});
ReactDOM.render(
,
document.getElementById(''example'')
);
ReactAJAX
React组件的数据可以通过componentDidMount方法中的Ajax来获取，当从服务端获取数据库可以将数据存储在state中，再用this.setState方法重新渲染UI.
当使用异步加载数据时，在组件卸载前使用componentWillUnmount来取消未完成的请求。
以下实例演示了获取Github用户最新gist共享描述:
varUserGist=React.createClass({
getInitialState:function(){
return{
username:'''',
lastGistUrl:''''
};
},
componentDidMount:function(){
this.serverRequest=$.get(this.props.source,function(result){
varlastGist=result[0];
this.setState({
username:lastGist.owner.login,
lastGistUrl:lastGist.html_url
});
}.bind(this));
},
componentWillUnmount:function(){
this.serverRequest.abort();
},
render:function(){
return(
{this.state.username}用户最新的Gist共享地址： {this.state.lastGistUrl}
);
}
});
ReactDOM.render(
,
mountNode
);
以上代码使用jQuery完成Ajax请求。
React表单与事件
一个简单实例
在实例中我们设置了输入框input值value={this.state.data}。在输入框值发生变化时我们可以更新state。我们可以使用onChange事件来监听input的变化，并修改state
varHelloMessage=React.createClass({
getInitialState:function(){
return{value:''HelloRunoob!''};
},
handleChange:function(event){
this.setState({value:event.target.value});
},
render:function(){
varvalue=this.state.value;
return
{value}
;
}
});
ReactDOM.render(
,
document.getElementById(''example'')
);
上面的代码将渲染出一个值为HelloRunoob!的input元素，并通过onChange事件响应更新用户输入的值
实例2
在以下实例中我么将为大家演示如何在子组件上使用表单。onChange方法将触发state的更新并将更新的值传递到子组件的输入框的value上来重新渲染界面。
你需要在父组件通过创建事件句柄(handleChange)，并作为prop(updateStateProp)传递到你的子组件上。
varContent=React.createClass({
render:function(){
return
{this.props.myDataProp}
;
}
});
varHelloMessage=React.createClass({
getInitialState:function(){
return{value:''HelloRunoob!''};
},
handleChange:function(event){
this.setState({value:event.target.value});
},
render:function(){
varvalue=this.state.value;
return
updateStateProp={this.handleChange}>
;
}
});
ReactDOM.render(
,
document.getElementById(''example'')
);
React事件
以下实例演示通过onClick事件来修改数据：
varHelloMessage=React.createClass({
getInitialState:function(){
return{value:''HelloRunoob!''};
},
handleChange:function(event){
this.setState({value:''菜鸟教程''})
},
render:function(){
varvalue=this.state.value;
return
点我
{value}
;
}
});
ReactDOM.render(
,
document.getElementById(''example'')
);
当你需要从子组件中更新父组件的state时，你需要在父组件通过创建事件句柄(handleChange)，并作为prop(updateStateProp)传递到你的子组件上。实例如下：
varContent=React.createClass({
render:function(){
return
点我
{this.props.myDataProp}
}
});
varHelloMessage=React.createClass({
getInitialState:function(){
return{value:''HelloRunoob!''};
},
handleChange:function(event){
this.setState({value:''菜鸟教程''})
},
render:function(){
varvalue=this.state.value;
return
updateStateProp={this.handleChange}>
;
}
});
ReactDOM.render(
,
document.getElementById(''example'')
);
ReactRefs
React支持一种非常特殊的属性Ref，你可以用来绑定到render()输出的任何组件上。
这个特殊的属性允许你引用render()返回的相应的支撑实例（backinginstance）。这样就可以确保在任何时间总是拿到正确的实例。
使用方法
绑定一个ref属性到render的返回值上：
1
在其它代码中，通过this.refs获取支撑实例:
varinput=this.refs.myInput;
varinputValue=input.value;
varinputRect=input.getBoundingClientRect();
1
2
3
完整实例
你可以通过使用this来获取当前React组件，或使用ref来获取组件的引用，实例如下：
varMyComponent=React.createClass({
handleClick:function(){
//使用原生的DOMAPI获取焦点
this.refs.myInput.focus();
},
render:function(){
//当组件插入到DOM后，ref属性添加一个组件的引用于到this.refs
return(
type="button"
value="点我输入框获取焦点"
onClick={this.handleClick}
/>
);
}
});
ReactDOM.render(
,
document.getElementById(''example'')
);
实例中，我们获取了输入框的支撑实例的引用，子点击按钮后输入框获取焦点。
我们也可以使用getDOMNode()方法获取DOM元素。
|
|
