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
1.例子（简单的组件和数据传递）
使用this.props 指向自己的属性
从@L_404_2@下载 react kit
<!DOCTYPE html>
<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、监控文本框输入输出
代码如下
<!DOCTYPE html> <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
更多
如果你觉得此文对您有所帮助，欢迎随时撩我 。微信公众号：终端研发部
原文链接：https://www.f2er.com/react/301467.html