写给iOS开发者看的React知识

2019-03-22 本文已影响0人 kyson老师

引言

无论是iOS还是Android开发者会越来越发现，纯粹的原生开发越来越少：

APP中为了拉取新用户，会添加诸如“分享到微信，小程序，红包”等功能，此时需要和H5合作。
APP急于上一个新功能，用APP时间太大，先用个H5页面做个尝试，需要在APP中添加入口跳转一个Web页面。
Web页面调取系统的蓝牙等功能不方便，又需要原生支持。
iOS由于WebView导致的崩溃率上升需要H5同事帮助处理。
由于每个开发周期中经常依赖H5项目组，让我们的时间预估变得越来越难，稍有不慎就会延期。

因此学习一些H5知识变得迫在眉睫，本文就对H5的发展做个大致的梳理。

HTML基础

首先我们要知道什么是H5。H5,即HTML5，是HTML的第五个版本。新建一个新文件，在里面输入

<html>
<head>
    <title>百度一下，你就知道</title>
</head>
<body>
    <center>
        <img src="https://www.baidu.com/img/bd_logo1.png" width="100"></img>
        <p></p>
        <input type="" name=""></input>
        <button>搜索</button>
    </center>
</body>
</html>

保存为扩展名为html类型的文件，使用浏览器打开，就实现了一个简易版的百度首页。我们会发现，这是个静态页面，点击搜索按钮并没有任何相应。但有了JavaScript以后，页面就有了一定的动态效果：

<button type="button" onclick="alert('search!')">搜索</button>

将这行代码替换上面的第10行<button>搜索</button>，再点击效果就会发现有个弹框。这里的alert函数就是JavaScript(以下简称JS)里的方法。更多的方法可以在w3school上学习。
JS在创建之初就是用于实现H5页面的动态效果，以及部分前端逻辑（例如检测输入的手机号是否合法），但历经多年的发展以后现在已经渗透到了软件开发的方方面面，尤其是nodejs的出现，打破了前后端的界限，让JS能在后端开发中拥有一席之地。因此，现在的H5开发者倾向于说，他们是FE开发者----Front to End（即前端到后端），下面我也将使用“FE”这个名词替代“H5”。这里我随便引用了一张跟JS相关的概念图：

JS框架

这张图包含了FE相关的概念，包含打包，层叠样式表等相关概念。但初入H5开发的我们千万不要被各种框架以及名词整的晕头转向。下面我们通过类比iOS中相关的概念来介绍FE。
HTML、CSS、JS：刚开始学iOS开发的我们一定要学习Objective-C语言，这是我们后续开发的基础；同理，FE需要的基础就是HTML,CSS以及JS。正如我们开头使用到的百度的Demo一样，我们需要先了解HTML以及JS的基本语法。比较幸运的是，HTML、CSS都是非常容易入门的，大概一周我们就能开发一个静态网站了。主要是JS的语言需要花一定时间了解，相信看完w3school也有个大致的了解了。

Nodejs

Nodejs: nodejs是一个JS运行环境，有很多种写法，标准写法是node.js,我们也可以写成node。nodejs类似于iOS中Objective-C的运行时(Runtime)。Objective-C的运行时将我们的代码翻译成C语言，正如node将JS进行了一些封装。下面我们看一个nodejs的helloworld程序：

var http = require('http');
server = http.createServer(function (req, res) {
res.writeHeader(200, {"Content-Type": "text/plain"});
res.end("Hello World\n");
});
server.listen(8000);
console.log("httpd start @8000");

这段代码的作用就是在浏览器中输出Hello World：

nodejs的helloworld
要执行这段代码需要

先安装nodejs环境：brew install node
将Helloworld的代码保存为扩展名为js的文件，这里保存为index.js
运行程序 node index.js
在浏览器中输入地址localhost://8000即可看到效果

到这里，我们算是对nodejs有了一个初步的了解（如图）。

Node服务器

npm

npm 是一个包管理器，安装完node后就可以使用该命令，它让 JavaScript 开发者分享、复用代码更方便（类似iOS中的CocoaPods）。CocoaPods中我们需要编写PodFile来制定项目以及三方库，同理，npm需要指定package.json来声明需要依赖的三方库。一个常见的package.json如下：

{
  "name": "shop",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "^16.3.0-alpha.1",
    "react-native": "0.54.2",
    "uuid": "^3.2.1"
  },
  "devDependencies": {
    "babel-jest": "23.0.0-alpha.0",
    "babel-preset-react-native": "4.0.0",
    "jest": "22.4.2",
    "react-test-renderer": "^16.3.0-alpha.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

这个package.json中指定了

项目名称: shop
依赖的三方库(dependencies字段)：react、react-native等
scripts：支持的脚本，默认是一个空的 test

当然，package.json可以通过npm init命令生成。

React

接下来我们开始讲解本文的主题：React。

React：React是Facebook内部的一个JavaScript类库，可用于创建Web用户交互界面。相信大家已经能猜到，React大概类似于iOS开发中的Cocoa库(UIKit)库（如下图）。

react框架
推荐一个React教程：React 教程，React库的一个简单的Demo如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

可以看到，这次的HelloWorld页面通过React渲染出来。

写给iOS开发者看的React知识

引言

HTML基础

Nodejs

npm

React

猜你喜欢

热点阅读