TOP

从 React到React Native

React简介

RN基于React设计，了解React有利于我们开发RN应用。
React希望功能分解化，让开发像搭积木一样，快速而且可维护。

React的3个特点

  • 作为UI（Just the UI）
  • 虚拟DOM(Virtual DOM)
    这是亮点,是React最重要的一个特性
    更新View很快，放进内存,最小更新的视图
    差异部分更新 diff算法
  • 数据（Data Flow）单向数据流

学习React要掌握的只是：

  • JSX语法 类似XML
  • ES6相关
  • 前端基础 CSS+DIV JS

举例说明React的用法，IDE工具：WebStorm(JavaScript 开发工具 Web前端开发神器 插件很丰富,智能代码提示，自动补全)
比如：ReactNative 代码智能提醒（Webstorm）
git clone https://github.com/virtoolswebplayer/ReactNative-LiveTempate
下载模板：https://github.com/wix/react-templates
安装命令：npm install react-templates -g

点击下载Webstorm
点击下载Webstorm破解版

例子

1.例子一 （简单组件和数据传递） 使用this.props 指向自己的属性

从http://facebook.github.io/react/downloads.html 下载react Kit

react.js react-dom.js：React 的核心文件

JSXTransformer.js browser.min.js：讲JSX转译成js和html的工具

最新的react版本：react-15.3.1

在react 0.14前，浏览器端实现对jsx的编译依赖jsxtransformer.js 在react 0.14后，这个依赖的库改为browser.js，页面script标签的type也由text/jsx改为text/babel 但是以上只能用来测试学习react
生产环境需要借助编译工具事先将jsx编译成js

例如可以使用Node.js做预编译，可以安装react-tools工具
npm install -g react-tools

例子源码

  1. <!DOCTYPE html>
  2. <html>
  3. <headlang="en">
  4. <metacharset="UTF-8">
  5. <title>React第一个例子</title>
  6. <scripttype="text/javascript"src="react.js"></script>
  7. <scripttype="text/javascript"src="react-dom.js"></script>
  8. <scripttype="text/javascript"src="browser.min.js"></script>
  9. </head>
  10. <body>
  11. <divid="example"></div>
  12. <scripttype="text/babel">
  13. varHelloMessage=React.createClass(
  14. {
  15. render:function(){
  16. return<h1 style={{color:'#ff0000',fontSize:'24px'}}>Hello{this.props.name}!我是星空守候</h1>;
  17. //这是注释 React.createElement
  18. }
  19. }
  20. );
  22. ReactDOM.render(<HelloMessage name="React 语法基础"/>,document.getElementById('example'));
  23. </script>
  24. </body>
  25. </html>

2.例子二 （通过this.state更新视图）

  • 源码
  1. <!DOCTYPE html>
  2. <html>
  3. <headlang="en">
  4. <metacharset="UTF-8">
  5. <title>React第二个例子</title>
  6. <scripttype="text/javascript"src="react.js"></script>
  7. <scripttype="text/javascript"src="react-dom.js"></script>
  8. <scripttype="text/javascript"src="browser.min.js"></script>
  9. </head>
  10. <body>
  12. <divid="example"></div>
  14. <scripttype="text/babel">
  15. /*自定义组件*/
  16. varTimer=React.createClass(
  17. {
  18. /*初始状态*/
  19. getInitialState:function(){
  20. return{secondsElapsed:0};
  21. },
  23. tick:function(){
  24. this.setState({secondsElapsed:this.state.secondsElapsed+1});
  25. },
  27. /*组件完成装载*/
  28. componentDidMount:function(){
  29. this.interval=setInterval(this.tick,1000);
  30. },
  31. /*组件将被卸载 清除定时器*/
  32. componentWillUnmount:function(){
  33. clearInterval(this.interval);
  34. },
  35. /*渲染视图*/
  36. render:function(){
  37. return(
  38. <div>SecondsElapsed:{this.state.secondsElapsed}</div>
  39. );
  40. }
  42. }
  43. );
  44. React.render(<Timer/>,document.getElementById('example'));
  45. </script>
  47. </body>
  48. </html>

3.例子三 （简单应用）

  • 源码
  1. <!DOCTYPE html>
  2. <html>
  3. <headlang="en">
  4. <metacharset="UTF-8">
  5. <title>React第三个例子</title>
  6. <scripttype="text/javascript"src="react.js"></script>
  7. <scripttype="text/javascript"src="react-dom.js"></script>
  8. <scripttype="text/javascript"src="browser.min.js"></script>
  9. </head>
  10. <body>
  12. <divid="example"></div>
  14. <scripttype="text/babel">
  16. varShowEditor=React.createClass(
  17. {
  18. getInitialState:function(){
  19. return{value:'你可以在这里输入文字'};
  20. },
  22. handleChange:function(){
  23. this.setState({value:React.findDOMNode(this.refs.textarea).value});
  24. },
  26. render:function(){
  27. return(
  28. <div>
  29. <h3>输入</h3>
  30. <textarea style={{width:300,height:150,outline:'none'}}
  31. onChange={this.handleChange}
  32. ref="textarea"
  33. defaultValue={this.state.value}
  35. />
  36. <h3>输出</h3>
  37. <div>{this.state.value}</div>
  39. </div>
  40. );
  41. }
  42. }
  43. );
  44. React.render(<ShowEditor/>,document.getElementById('example'));
  45. </script>
  46. </body>
  47. </html>

React Native简介与代码分析

为什么要使用React Native，如何在开发成本和用户体验做到更好的平衡？
很多时候，前端都有一种乐观的想法：H5可以替代原生应用，RN不仅可以使用前端开发的模式来开发应用，还能调用原生应用的UI组件和API。





posted @ 2016-03-27 16:30  星空守候  阅读(597)  评论(0)    收藏  举报