从 React到React Native
Posted 星空守候
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了从 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
例子
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
例子源码
<!DOCTYPE html><html><headlang="en"><metacharset="UTF-8"><title>React第一个例子</title><scripttype="text/javascript"src="react.js"></script><scripttype="text/javascript"src="react-dom.js"></script><scripttype="text/javascript"src="browser.min.js"></script></head><body><divid="example"></div><scripttype="text/babel">varHelloMessage=React.createClass({render:function(){return<h1 style={{color:‘#ff0000‘,fontSize:‘24px‘}}>Hello{this.props.name}!我是星空守候</h1>;//这是注释 React.createElement}});ReactDOM.render(<HelloMessage name="React 语法基础"/>,document.getElementById(‘example‘));</script></body></html>
2.例子二 （通过this.state更新视图）
- 源码
<!DOCTYPE html><html><headlang="en"><metacharset="UTF-8"><title>React第二个例子</title><scripttype="text/javascript"src="react.js"></script><scripttype="text/javascript"src="react-dom.js"></script><scripttype="text/javascript"src="browser.min.js"></script></head><body><divid="example"></div><scripttype="text/babel">/*自定义组件*/varTimer=React.createClass({/*初始状态*/getInitialState:function(){return{secondsElapsed:0};},tick:function(){this.setState({secondsElapsed:this.state.secondsElapsed+1});},/*组件完成装载*/componentDidMount:function(){this.interval=setInterval(this.tick,1000);},/*组件将被卸载 清除定时器*/componentWillUnmount:function(){clearInterval(this.interval);},/*渲染视图*/render:function(){return(<div>SecondsElapsed:{this.state.secondsElapsed}</div>);}});React.render(<Timer/>,document.getElementById(‘example‘));</script></body></html>
3.例子三 （简单应用）
- 源码
<!DOCTYPE html><html><headlang="en"><metacharset="UTF-8"><title>React第三个例子</title><scripttype="text/javascript"src="react.js"></script><scripttype="text/javascript"src="react-dom.js"></script><scripttype="text/javascript"src="browser.min.js"></script></head><body><divid="example"></div><scripttype="text/babel">varShowEditor=React.createClass({getInitialState:function(){return{value:‘你可以在这里输入文字‘};},handleChange:function(){this.setState({value:React.findDOMNode(this.refs.textarea).value});},render:function(){return(<div><h3>输入</h3><textarea style={{width:300,height:150,outline:‘none‘}}onChange={this.handleChange}ref="textarea"defaultValue={this.state.value}/><h3>输出</h3><div>{this.state.value}</div></div>);}});React.render(<ShowEditor/>,document.getElementById(‘example‘));</script></body></html>
React Native简介与代码分析
为什么要使用React Native，如何在开发成本和用户体验做到更好的平衡？
很多时候，前端都有一种乐观的想法：H5可以替代原生应用，RN不仅可以使用前端开发的模式来开发应用，还能调用原生应用的UI组件和API。
以上是关于从 React到React Native的主要内容，如果未能解决你的问题，请参考以下文章
“ES7 React/Redux/GraphQL/React-Native 片段”不适用于 javascript 文件。除了安装它，我还需要配置其他东西吗？
React-native：从 javascript 迁移到 typescript
如何将 IOS 14 支持添加到我的 React Native 应用程序？
React Native：如何从代码创建 excel 文件？