手把手教你React Native实战从 React到Rn《二》
终端研发部
关专注于技术分享，致力于Python/前端/FFmepg/java
了解相关更多技术，可参考《学习React Native必看的几个开源项目》，接下来 我们来聊一聊相关的React。
React简介
Rn是基于React的设计，了解 React有助于我们开发RN应用，React希望将功能分解华，让开发变得像搭积木一样，快速而且具有可维护性。
React主要有如下的3个特点：
作为UI（just the UI）
虚拟DOM（Virtural DOM）
这是亮点 是React最重要的一个特性，放进内存 最小更新的试图
差异部分话更新 different算法
数据流（Data Flow）单项数据流动
SO ，我们要掌握的知识点
JSX语法，类似于xml ,Xxml
ES6的相关知识
*前段基础 CSS_DIV JS
举例说明React的用法，IDE 工具：WebStorm(前段开发工具 JavaScript 问前段开发神奇， 插件是非常的丰富的)
比如：ReactNative 代码智能提醒（webstorm）
git clone Https://github.com/virtoolswebpalyer/ReactNative-LiveTemplate下载模板：https://github.com/wix/react-templates安装命令：
npm install react-templates -g点击下载webstore
点击下载webstore破解版
1.例子（简单的组件和数据传递）
使用this.props 指向自己的属性
从http://facebook.github.io.react/downloads.html下载 react kit
<html>
<head lang="en">
<meta charset="UTF-8">
<title> 我的react native 开发 </title>
<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="react-dom.js"></script>
<script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render:function(){
return <h1>Hello{this.props.name}!卡卡罗特</h1>
}
});
ReactDOM.render(<HelloMessage ="react hello"/>,document.getElementById("example"));
</script >
<!--<div class="well" id="well">
</div>-->
</body>
</html>2.一个简单的定时器
代码如下
<html>
<head>
<meta charset="utf-8">
<title>我的计时器</title>
<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="react-dom.js"></script>
<script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Timer = React.createClass({
/**
* 初始化 状态
* */
getInitialState: function () {
return {secondElapsed: 0};
},
tick: function () {
this.setState({secondElapsed: this.state.secondElapsed + 1});
},
/**
* 组装完成装载
*/
componentDidMount: function () {
this.interval = setInterval(this.tick, 1000);
},
/**
* 组件江北卸载，清除定时器
*/
componentWillUnmount: function () {
clearInterval(this.interval);
},
/**
* 渲染师徒
*/
render: function () {
return (<div> Second
Elapsed:{
this.state.secondElapsed
}
</div>
) ;
},
}
);
ReactDOM.render(<Timer/>,document.getElementById('example'));
</script>
</body>
</html>3、监控文本框输入输出
代码如下
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本框输入</title>
<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="react-dom.js"></script>
<script type="text/javascript" src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var ShowEditor = React.createClass({
getInitialState:function(){
return {value:"你可以在这里面输入文字"};
},
handChanged: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.handChanged}
ref="textarea"
defaultValue={this.state.value}
/>
<h3>输出</h3>
<div>{this.state.value}</div>
</div>
);
}
});
ReactDOM.render(<ShowEditor />,document.getElementById("example"));
</script>
</body>
</html>为什么要使用React Native?
如何在开发成本和用户体验上做的更好?
很多时候，前端有一种乐观的想法：H5可以代替原生。RN不仅可以使用前端的东西来开发啊，而且还能调用原生的组件和API
更多
如果你觉得此文对您有所帮助，欢迎随时撩我 。微信公众号：终端研发部