初探React-Native

2019独角兽企业重金招聘Python工程师标准>>>

初探React-Native

App开发模式

• 原生开发

  用纯代码编写，开发成本高，更新麻烦，优点是速度快，性能高，用户体验效果好

• webApp

  H5开发是Html5开发的app，本质上运行在手机浏览器中的页面，一般使用原生代码调用webview组件运行H5的页面

• Hybrid App（混合开发）

  结合原生用户体验效果好和webAPP的可扩展性强的优势

常见的Hybrid开发模式

• weex weex 是阿里巴巴基于vue开源的一个动态化的高扩展跨平台解决方案，支持iOS、安卓、YunOS及Web等多端开发部署。其主要思想就是：

Write once, run anywhere

• react-native

  由Facebook推出，基于JavaScript框架和React库来提高多平台开发效率的一门语言。其核心思想是： Learn once, write anywhere

weex与react-native对比

• 相同点
  1. 可以实现hot reload，边更新代码边查看效果
  2. 布局都是基于flexbox
  3. 都采用Web的开发模式，使用JS开发
  4. 都是支持iOS和Android
  5. 渲染机制都是Virtual DOM
• 不同点
  1. react-native是基于react框架，而weex是基于vue框架
  2. react-native是基于jsCore引擎，而weex是基于V8引擎
  3. 异步操作:react-native提供Promise的支持，而weex提供的是callback的支持
  4. 社区方便react-native目前非常活跃，而weex相对弱一些，还处于成长期

总结: 两者最大的区别在于思想层面，以及react.js及vue.js两个基础框架的区别

---

理解JSX语法

传统的web开发方式

• 用 HTML 创建 DOM，构建整个网页的布局、结构
• 用 CSS 控制 DOM 的样式，比如字体、字号、颜色、居中等
• 用 JavaScript 接受用户事件，动态的操控 DOM 在这三者的配合下，几乎所有页面上的功能都能实现。但也有比较不爽地方，比如我想动态修改一个按钮的文字，我需要这样写：

<input type="button" id="button" value="龙哥很帅" class="fontSize"  />

然后用CSS控制DOM样式如下：

<style>
.fontSize {font-size:50px}
</style>

然后在js中操作DOM结构:

<script>
$('#button').on('click',function(){

})
</script>

可以看到，在 HTML 和 JavaScript 代码中，id 和 onclick 事件触发的函数必须完全对应，否则就无法正确的响应事件。

React的JSX开发方式

随着 FaceBook 推出了 React 框架，这个问题得到了大幅度改善。我们可以把一组相关的 HTML 标签，也就是 app 内的 UI 控件，封装进一个组件(Component)中

var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput.focus();
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput"  />
        <input type="button" value="Focus the text input"  />
      </div>
    );
  }
});

像上面这种js代码里包含着html和css的代码的语法收做JSX，它是一种 JavaScript 语法拓展。JSX 允许我们写 HTML 标签或 React 标签，它们终将被转换成原生的 JavaScript 并创建 DOM。

理解 React

• React 是一套可以用简洁的语法高效绘制 DOM 的框架。在react的世界里，我们可以暂时放下html和css，只需专心于javascript如何构建页面。这里就必须要提一下***Virtual DOM***
• Virtual DOM 是一个存在于内存中的 JavaScript 对象，它与 DOM 是一一对应的关系，也就是说只要有 Virtual DOM，我们就能渲染出 DOM。当界面发生变化时，得益于高效的 DOM Diff 算法，我们能够知道 Virtual DOM 的变化，从而高效的改动 DOM，避免了重新绘制 DOM

转载于:https://my.oschina.net/u/933928/blog/1934994