美文网首页
快抱紧我,教你撸出一个简单的React-Naitive [入门基

快抱紧我,教你撸出一个简单的React-Naitive [入门基

作者: 香脆的大鸡排 | 来源:发表于2017-01-19 10:35 被阅读1285次

前言

本篇题目太大,所以打算分为三篇来讲解.写下此篇文章更多的是对知识的一个回顾与分享.有一部分内容转载GItHub上的,链接在末尾.还请各路大神多多指教.

这里没有讲到如何搭建Node&android环境等,不过你可以参考官方此篇文章.相信你一步步来,
一定可以搭建好的.
http://reactnative.cn/docs/0.39/getting-started.html

本篇适合那些人看?

  • 拥有前端经验
  • 从android|IOS转来RN玩玩
  • 有ES6基础(没有也没关系)
  • 掌握基本的JS
  • 只要你想学还有什么能阻止你的激情?

通过本篇你能学到什么?

  • ES6常用基础语法
  • React-Naitive组件基础

ES6是什么鬼?

ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。 --《CMAScript 6 入门》强烈推荐想系统学习的同学参考该站.http://es6.ruanyifeng.com/

说好的常用基础语法呢?

实际ES6的东西可能太多,可能会成为我们学习React-Native上的一个绊脚石.其实也可以先学一些常用的基础语法.等知识不足以完成我们的项目的时候回过头来翻文档看.也许这样才更适合我们成长.但文档我们有时间的时候还是一定要细看.毕竟这是你升职、加薪、装逼必备的技能呀. 好了废话不说辣么多啦.开整!搞事!

变量声明

const 和 let

不要用 var,而是用 constlet,分别表示常量和变量。不同于 var 的函数作用域,constlet 都是块级作用域。

const DELAY = 1000;

let count = 0;
count = count + 1;

模板字符串

模板字符串提供了另一种做字符串组合的方法。

const user = 'world';
console.log(`hello ${user}`);  // hello world

// 多行
const content = `
  Hello ${firstName},
  Thanks for ordering ${qty} tickets to ${event}.
`;

默认参数

function logActivity(activity = 'skiing') {
  console.log(activity);
}

logActivity();  // skiing

箭头函数

函数的快捷写法,不需要通过 function 关键字创建函数,并且还可以省略 return 关键字。

同时,箭头函数还会继承当前上下文的 this 关键字。

比如:

[1, 2, 3].map(x => x + 1);  // [2, 3, 4]

等同于:

[1, 2, 3].map((function(x) {
  return x + 1;
}).bind(this));

模块的 Import 和 Export

import 用于引入模块,export 用于导出模块。

比如:

// 引入全部
import dva from 'dva';

// 引入部分
import { connect } from 'dva';
import { Link, Route } from 'dva/router';

// 引入全部并作为 github 对象
import * as github from './services/github';

// 导出默认
export default App;
// 部分导出,需 import { App } from './file'; 引入
export class App extend Component {};

ES6 对象和数组

析构赋值

析构赋值让我们从 Object 或 Array 里取部分数据存为变量。

// 对象
const user = { name: 'guanguan', age: 2 };
const { name, age } = user;
console.log(`${name} : ${age}`);  // guanguan : 2

// 数组
const arr = [1, 2];
const [foo, bar] = arr;
console.log(foo);  // 1

我们也可以析构传入的函数参数。

const add = (state, { payload }) => {
  return state.concat(payload);
};

析构时还可以配 alias,让代码更具有语义。

const add = (state, { payload: todo }) => {
  return state.concat(todo);
};

RN是什么?

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

务必按照官网来入门!
务必按照官网来入门!
务必按照官网来入门!

重要的事情说三遍.RN中文官网 http://reactnative.cn/
到目前笔者写到这里RN在2017年1月5号已经上线0.40,当前版本官方的中文文档还没全面.如果你和我一样.英语水平并没有那么腻害.0.39的的文档也可以看.但要注意0.40中可能发生了某些改变的新特性.可以参考使用.

React Component

Stateless Functional Components

React Component 有 3 种定义方式,分别是 React.createClass, classStateless Functional Component。推荐尽量使用最后一种,保持简洁和无状态。这是函数,不是 Object,没有 this 作用域,是 pure function。

比如定义 App Component 。

function App(props) {
  function handleClick() {
    props.dispatch({ type: 'app/create' });
  }
  return <div onClick={handleClick}>${props.name}</div>
}

等同于:

class App extends React.Componnet {
  handleClick() {
    this.props.dispatch({ type: 'app/create' });
  }
  render() {
    return <div onClick={this.handleClick.bind(this)}>${this.props.name}</div>
  }
}

JSX

Component 嵌套

类似 HTML,JSX 里可以给组件添加子组件。

<App>
  <Header />
  <MainContent />
  <Footer />
</App>

className

class 是保留词,所以添加样式时,需用 className 代替 class

<h1 className="fancy">Hello dva</h1>

JavaScript 表达式

JavaScript 表达式需要用 {} 括起来,会执行并返回结果。

比如:

<h1>{ this.props.title }</h1>

Mapping Arrays to JSX

可以把数组映射为 JSX 元素列表。

<ul>
  { this.props.todos.map((todo, i) => <li key={i}>{todo}</li>) }
</ul>

Spread Attributes

这是 JSX 从 ECMAScript6 借鉴过来的很有用的特性,用于扩充组件 props 。

比如:

const attrs = {
  href: 'http://example.org',
  target: '_blank',
};
<a {...attrs}>Hello</a>

等同于

const attrs = {
  href: 'http://example.org',
  target: '_blank',
};
<a href={attrs.href} target={attrs.target}>Hello</a>

Props

数据处理在 React 中是非常重要的概念之一,分别可以通过 props, state 和 context 来处理数据。而在 dva 应用里,你只需关心 props 。

propTypes

JavaScript 是弱类型语言,所以请尽量声明 propTypes 对 props 进行校验,以减少不必要的问题。

function App(props) {
  return <div>{props.name}</div>;
}
App.propTypes = {
  name: React.PropTypes.string.isRequired,
};

内置的 prop type 有:

  • PropTypes.array
  • PropTypes.bool
  • PropTypes.func
  • PropTypes.number
  • PropTypes.object
  • PropTypes.string

往下传数据

支付宝

微信

相关文章

网友评论

      本文标题:快抱紧我,教你撸出一个简单的React-Naitive [入门基

      本文链接:https://www.haomeiwen.com/subject/kybzvttx.html