RN6_REACT(react native 学习)
2017-02-06 10:09
483 查看
RN6_REACT参考：http://www.ruanyifeng.com/blog/2015/03/react.html分析：1、生命周期分成三个状态：l Mounting：已插入真实DOMl Updating：正在被重新渲染l Unmounting：已移出真实DOMReact组件样式是一个对象，所以第一重大括号表示这是JavaScript语法，第二重大括号表示样式对象https://api.github.com/users/octocat/gists"/>,https://api.github.com/search/repositories?q=javascript&sort=stars')}
使用React的网页源码：
<!DOCTYPEhtml><html> <head> <scriptsrc="../build/react.js"></script> <scriptsrc="../build/react-dom.js"></script> <scriptsrc="../build/browser.min.js"></script> </head> <body> <divid="example"></div> <scripttype="text/babel"> //**Ourcodegoeshere!** </script> </body></html> 代码分析：1、<script>标签的
type属性为
text/babel。这是因为React独有的JSX语法，跟JavaScript不兼容。凡是使用JSX的地方，都要加上
type="text/babel"。2、代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。l react.js 是React的核心库。l react-dom.js 是提供与DOM相关的功能。l Browser.js 的作用是将JSX语法转为JavaScript语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。
ReactDOM.render()
ReactDOM.render(
<
h1>
Hello,
world!</
h1>,
document.getElementById('example')); 代码分析：1、ReactDOM.render是React的最基本方法，用于将模板转为HTML语言，并插入指定的DOM节点。
JSX语法
他让：HTML语言直接写在JavaScript语言之中，不加任何引号。它允许HTML与JavaScript的混写。简单使用：
varnames=['Alice','Emily','Kate']; ReactDOM.render( <div> { names.map(function(name){ return<div>Hello,{name}!</div> }) } </div>, document.getElementById('example'));解析:JSX的基本语法规则：遇到HTML标签（以<开头），就用HTML规则解析；遇到代码块（以
{ 开头），就用JavaScript规则解析。注意：JSX允许直接在模板插入JavaScript变量。如果这个变量是一个数组，则会展开这个数组的所有成员vararr=[ <h1>Helloworld!</h1>, <h2>Reactisawesome</h2>,];ReactDOM.render( <div>{arr}</div>, document.getElementById('example'));结果：If_else使用
JSX中不能使用 ifelse 语句，但可以使用 conditional(三元运算) 表达式来替代。<h1>{i==1?'True!':'False'}</h1>样式
React推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式.React会在指定元素数字后自动添加 px 。以下实例演示了为 h1 元素添加 myStyle 内联样式：varmyStyle={fontSize:100,color:'#FF0000'};ReactDOM.render(<h1style={myStyle}>菜鸟教程</h1>,document.getElementById('example'));数组：
JSX允许在模板中插入数组，数组会自动展开所有成员：Eg:vararr=[<h1>菜鸟教程</h1>,<h2>学的不仅是技术，更是梦想！</h2>,];ReactDOM.render(<div>{arr}</div>,document.getElementById('example'));组件：
React允许将代码封装成组件（component），然后像插入普通HTML标签一样，在网页中插入这个组件。React.createClass方法就用于生成一个组件类。组件的基本使用
Eg:varHelloMessage=React.createClass({ render:function(){ return<h1>Hello{this.props.name}</h1>; }}); ReactDOM.render( <HelloMessagename="John"/>, document.getElementById('example'));解析：1、变量HelloMessage就是一个组件类。模板插入
<HelloMessage/>时，会自动生成
HelloMessage的一个实例（下文的"组件"都指组件类的实例）。2、所有组件类都必须有自己的
render方法，用于输出组件。3、组件的用法与原生的HTML标签完全一致，可以任意加入属性，比如
<HelloMessagename="John">，就是
HelloMessage组件加入一个
name属性，值为
John。组件的属性可以在组件类的
this.props 对象上获取。注意：1、组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage2、组件类只能包含一个顶层标签，否则也会报错Eg:varHelloMessage=React.createClass({ render:function(){return<h1> Hello{this.props.name}</h1><p> sometext </p>; }});3、class 属性需要写成 className ，for 属性需要写成 htmlFor。因为 class 和 for 是JavaScript的保留字。
组件的子节点
this.props.children属性它表示组件的所有子节点。Eg：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读取2、
React.Children来处理
this.props.children。我们可以用
React.Children.map来遍历子节点，而不用担心
this.props.children的数据类型是
undefined还是
object注意：
1
、
this.props.children的值有三种可能：l 如果当前组件没有子节点，它就是
undefined;l 如果有一个子节点，数据类型是
object；l 如果有多个子节点，数据类型就是
array
；
组件的属性类型验证
组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求。Eg:varMyTitle=
React.createClass({
propTypes:{
title:
React.
PropTypes.
string.
isRequired,
},
render:function(){
return<
h1>{
this.
props.
title}</
h1>;
}});分析：1、
Mytitle组件有一个
title属性，2、
PropTypes告诉React，这个
title属性是必须的，而且它的值必须是字符串。（如果给数字如123就会报错）注意：我们也可以直接给默认值。Eg：
title:'HelloWorld' 更多验证器：
组件状态
React的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染UI 。Eg：varLikeButton=
React.createClass({
getInitialState:function(){
return{
liked:false};
},
handleClick:function(
event){
this.setState({
liked:!
this.
state.
liked});
},
render:function(){
var
text=
this.
state.
liked?'like':'haven\'tliked';
return(
<
ponClick={
this.
handleClick}>
You{
text}
this.
Clicktotoggle.
</
p>
);
}});
ReactDOM.render(
<
LikeButton/>,
document.getElementById('example'));分析：1、LikeButton 组件，它的 getInitialState 方法用于定义初始状态。2、状态这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。注意：
this.props和
this.state都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是：l t
his.props表示那些一旦定义，就不再改变的特性l
this.state是会随着用户互动而产生变化的特性。
DOM节点：
组件并不是真实的DOM节点，而是存在于内存之中的一种数据结构，叫做虚拟DOM（virtualDOM）。只有当它插入文档以后，才会变成真实的DOM。根据React的设计，所有的DOM变动，都先在虚拟DOM上发生，然后再将实际发生变动的部分，反映在真实DOM上，这种算法叫做 DOMdiff ，它可以极大提高网页的性能表现。有时需要从组件获取真实DOM的节点，这时就要用到ref属性。Eg:var
MyComponent=
React.createClass({
handleClick:function(){
this.
refs.
myTextInput.focus();
},
render:function(){
return(
<
div>
<
inputtype="text"
ref="myTextInput"/>
<
inputtype="button"
value="Focusthetextinput"
onClick={
this.
handleClick}/>
</
div>
);
}});
ReactDOM.render(
<
MyComponent/>,
document.getElementById('example'));分析：1、组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的DOM节点，虚拟DOM是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的DOM节点。注意：1、必须等到虚拟DOM插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定
Click事件的回调函数，确保了只有等到真实DOM发生
Click事件之后，才会读取
this.refs.[refName]属性2、React组件支持很多事件，除了 Click 事件以外，还有 KeyDown 、Copy、Scroll 等
表单
表单是用户在表单填入的内容，属于用户跟组件的互动，所以不能用this.props读取Eg:var
Input=
React.createClass({
getInitialState:function(){
return{
value:'Hello!'};
},
handleChange:function(
event){
this.setState({
value:
event.
target.
value});
},
render:function(){
var
value=
this.
state.
value;
return(
<
div>
<
inputtype="text"
value={
value}
onChange={
this.
handleChange}/>
<
p>{
value}</
p>
</
div>
);
}});
ReactDOM.render(<
Input/>,
document.
body);分析：1、文本输入框的值，不能用 this.props.value 读取。（是一个变动的值，所以用state）2、定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值（textarea 元素、select元素、radio元素都属于这种情况）
生命周期
三个状态
组件的两种处理函数
React为每个状态都提供了两种处理函数：lwill函数在进入状态之前调用l
did函数在进入状态之后调用
三种状态共计五种处理函数：
l componentWillMount()l componentDidMount()l componentWillUpdate(objectnextProps,objectnextState)l componentDidUpdate(objectprevProps,objectprevState)l componentWillUnmount()两个特殊的状态的的处理：
l componentWillReceiveProps(objectnextProps)：已加载组件收到新的参数时调用l shouldComponentUpdate(objectnextProps,objectnextState)：组件判断是否重新渲染时调用eg:varHello=
React.createClass({
getInitialState:function(){
return{
opacity:1.0
};
},
componentDidMount:function(){
this.
timer=setInterval(function(){
var
opacity=
this.
state.
opacity;
opacity-=.05;
if(
opacity<0.1){
opacity=1.0;
}
this.setState({
opacity:
opacity
});
}.bind(
this),100);
},
render:function(){
return(
<
divstyle={{
opacity:
this.
state.
opacity}}>
Hello{
this.
props.
name}
</
div>
);
}});
ReactDOM.render(
<
Helloname="world"/>,
document.
body);解析：在
hello组件加载以后，通过
componentDidMount方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染。注意：组件的
style属性的设置方式也值得注意，不能写成
style="opacity:{this.state.opacity};"而要写成
style={{
opacity:
this.
state.
opacity}}。因为：
Ajax
组件的数据来源，通常是通过Ajax请求从服务器获取，可以用componentDidMount方法设置Ajax请求，等到请求成功，再用
this.setState方法重新渲染UI Eg:var
UserGist=
React.createClass({
getInitialState:function(){
return{
username:'',
lastGistUrl:''
};
},
componentDidMount:function(){
$.get(
this.
props.
source,function(
result){
var
lastGist=
result[0];
if(
this.isMounted()){
this.setState({
username:
lastGist.
owner.
login,
lastGistUrl:
lastGist.
html_url
});
}
}.bind(
this));
},
render:function(){
return(
<
div>
{
this.
state.
username}
'slastgistis
<
ahref={
this.
state.
lastGistUrl}>
here</
a>.
</
div>
);
}});
ReactDOM.render(
<
UserGistsource="
document.
body);分析：上面代码使用jQuery完成Ajax请求，这是为了便于说明。React本身没有任何依赖，完全可以不用jQuery，而使用其他库。我们甚至可以把一个Promise对象传入组件，
ReactDOM.render(
<
RepoList
promise={
$.getJSON('
/>,
document.
body);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 《React-Native系列》 RN学习之NodeJS
- React-Native学习之制作RN版的微博app(一)
- React Native学习笔记之--向原生应用中集成RN页面
- RN3_CSS学习(react native 学习)
- ReactNative 学习笔记 RN android apk 打包
- <React Native> 学习日记（1） 成功运行、编译RN-android的爬坑记录
- RN8_React-Native知识点1之-Navigator导航学习
- (React-Native 学习之七) Rn混合开发之--Activity直接引用React native组件
- (React-Native 学习之八) Rn混合开发之--Android原生代码 和 ReactNative 通信
- 小菜鸟的第一篇文章，在学习RN，就当是做笔记吧，iOS开发RN中添加第三方库react-native-image-picker
- RN1_React Native准备热身(react native 学习)
- RN学习系列---Windows下安装搭建React-Native环境
- RN（react native）入坑指南-09,单元学习小结
- React-Native_学习笔记1: Unable to resolve module Dimensions from “...js” Invalid directory /Users/node_m
- ReactNative 学习笔记Component 和createClass区别
- 学习 React Native for Android：环境搭建
- 第三讲：React Native & HTML5+（学习笔记1）