最近项目需要用RN开发一版，在尽可能短的时间里学习和做出点东西真是让人有点头大。硬着头皮搞吧，顺便记录一下，祝自己好运！

用RN开发学习了点什么知识准备

RN官方文档要看一遍

RN官网估计还需要看看

ES6语法

redux的学习

搭建Mac 的rn开发环境

用了VSCode软件，VSCode也需要整下rn配置

用vscode使用rect的教程

Linters

(分析您的源代码，并可以在运行应用程序之前警告您潜在的问题。Linters可以提供更复杂的分析，执行编码约定并检测反模式。安装ESLint命令行工具 )

npm install -g eslint

入门参考学习的一些文章

https://www.jianshu.com/p/e9875087827e

https://www.jianshu.com/p/2a20c8485a90

环境配置的一些记录

关于npm和node.js的区别与关系

其实npm是nodejs的包管理器（package manager）。我们在Node.js上开发时，会用到很多别人已经写好的javascript代码，如果每当我们需要别人的代码时，都根据名字搜索一下，下载源码，解压，再使用，会非常麻烦。于是就出现了包管理器npm。大家把自己写好的源码上传到npm官网上，如果要用某个或某些个，直接通过npm安装就可以了，不用管那个源码在哪里。并且如果我们要使用模块A，而模块A又依赖模块B，模块B又依赖模块C和D，此时npm会根据依赖关系，把所有依赖的包都下载下来并且管理起来。

npm -v

node -v

react-native声明周期

自定义组件相关的一点知识点

没有对象属性的自定义类（定义与导出）


export default class XMGRequest {static PostWithJsonParam(url,param,success,failure) {var paramStr = JSON.stringify(param);// post请求描述var requestDesc = {method:'POST',headers:{'Content-Type':'application/json'},body:paramStr};// 发送post请求fetch(url,requestDesc).then((response)=>response.json()).then((json)=>{success(json);}).catch((error)=>{failure(error);})}}

import XMGRequest from './XMGRequest'

有对象属性的自定义类（定义与导出）

export default class Person {// 需要创建对象调用// 定义属性age = 0name = ''// 定义对象方法eat(){console.log('吃饭');}}


function CommonGroupItem(sectionID,rowData) {this.sectionID = sectionID;this.rowData = rowData;this.eat = function () {}
}

export default function CommonGroupItem(sectionID,rowData) {this.sectionID = sectionID;this.rowData = rowData;this.eat = function () {}
}

function CommonGroupItem(sectionID,rowData) {this.sectionID = sectionID;this.rowData = rowData;this.eat = function () {}
}module.exports = CommonGroupItem;

在ES6中，一般都使用默认组件，ES5使用非默认组件，因为ES6支持import导出，ES5支持require。
非默认组件定义

export  class CommonGroupListView extends Component

外界如何引入非默认组件

import {CommonGroupItem} from '../CommonGroupListView/CommonGroupItem'

默认组件定义

export default class CommonGroupListView extends Component

外界如何引入默认组件

import CommonGroupItem from '../CommonGroupListView/CommonGroupItem'

自定义类（定义与导出）

在RN中，有时候需要搞一个文件自定义类，一样可以采用导出组件的方法导出自定义类
自定义类与自定义组件的区别：
- 组件继承与Component
- 自定义组件：必须使用class定义类，自定义类可以不使用class定义类
如果一个自定义类，没有对象属性，都是类方法和类属性，一般使用组件的定义方式(class)和导出方式(export default)。
外界如何引入自定义类
如果一个自定义类，有对象属性，通常不用使用组件的定义方式(class)和导出方式(export default),一般用function定义类，module.exports导出。
因为使用class，没法生成带有属性的构造方法，就不能在初始化对象的时候，给属性赋值。
导出方式：一般规范是module.exports，也可以使用export default。
class定义类与function定义类的区别：
使用class定义类，在类中声明任何属性，和方法都会自动生成对象的属性和方法.
使用class定义类
使用function类，要想定义属性和方法，属性和方法前面必须添加this.
导出自定义类两种方式
module.exports
export default
外界如何引入自定义类

RN性能常见问题

RN性能问题相关

引用地址

但在拆包之前，FB官方还提了几条在此之前更应该做好的优化点

Doing less

Cleanup Require/Babel helpers
Avoid copying and decoding strings when loading the bundle
Stripping DEV-only modules

Scheduling

Lazy requires
Relay incremental cache read
De-batching bridge calls, batch Relay calls
Early UI flushing
Lazy native modules loading
Lazy touch bindings on text components

核心的RN性能优化点就比较清晰明朗了

首屏渲染优化：处理JS Bundle包大小、文件压缩、缓存
UI更新优化
- 减少更新或者合并多个更新
- 提高组件响应速度：
  - setNativeProps直接在底层更新Native组件属性（其实没有解决JS端与Native端的数据同步问题）
  - 立即执行更新回调
- 动画优化
  - 通过使用Annimated类库，一次性把更新发送到Native端，由Native端自己负责更新
  - 把一些耗时操作放到动画与UI更新之后执行
其他优化（代码层面）
更推荐的做法是合理使用setState()和shouldComponentUpdate()方法解决这类问题。

babel-plugin-transform-remove-console移除项目代码在中的console.*

目前采用的方式：会给JS线程造成巨大的瓶颈，需要保证在发布的时候移除这些日志输出。可以通过babel-plugin-transform-remove-console插件来实现，在项目的目录添加一个.babelrc文件：

{"env": {"production": {"plugins": ["transform-remove-console"]}}
}

参考网址：https://www.npmjs.com/package/babel-plugin-transform-remove-console

React-Native 通用化建设与性能优化

RN调试利器——React Native Debugger

携程RN渲染性能优化实践

React-Native大型项目爬坑实录与性能调优

云音乐 React Native 体系建设与发展

React Native 在「元气阅读」的实践

iOS RN学习随笔相关推荐

无星的RN学习之旅（四）——通信、持久化存储、iOS打包
说说最近项目的一些感想吧. 一.RN的创意 RN其实我觉得是一个很有创意的想法.不知道各位写RN项目的时候,有没有打开Xcode看过app的层级关系,我发现RN的这个想法,真的很有创意. 作为一名原生 ...
RN学习笔记01：概述、特点与环境搭建
RN学习笔记01:概述.特点与环境搭建一.RN概述 React Native(简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 Reac ...
无星的RN学习之旅（六）-第三方App跳转，苹果商店跳转，loading框
1.第三方App跳转这是很常见的问题,第三方app跳转到本app去做一些业务操作. 但是这时候会发现,你跳进来,是黑色的,没有界面,没想到吧23333 其实这在前面说过,RN的想法很独特,是一个ct ...
ios开发学习-手势交互（Gesture）效果源码分享
qianqianlianmeng ios开发学习-手势交互(Gesture)效果源码分享 All Around Pull View 介绍:实现视图四个方向(上下左右)都能够拖动更新(pull to r ...
Ibatis学习随笔
Ibatis学习随笔 < person > < id > 1 </ id > < firstName > Clinton </ ...
ios开发学习笔记--Core Motion
iOS开发学习笔记之CoreMotion-运动传感器官网文档:CoreMotion Framework Reference 一. 简介现在的苹果手机都基本有运动传感器,能够过获取到设备的加 ...
Delphi面向对象学习随笔六：接口
Delphi面向对象学习随笔六:接口 Delphi面向对象学习随笔六:接口作者:巴哈姆特 (转载请注明出处并保持完整) 在对象化中,类的继承是一个非常强大的机制:而更加强大的继承机制应该是来自从 ...
ios网络学习------4 UIWebView的加载本地数据的三种方式
ios网络学习------4 UIWebView的加载本地数据的三种方式分类: IOS2014-06-27 12:56 959人阅读评论(0) 收藏举报 UIWebView是IOS内置的浏览器, ...
IOS之学习笔记十五(协议和委托的使用)
1.协议和委托的使用 1).协议可以看下我的这篇博客 IOS之学习笔记十四(协议的定义和实现) https://blog.csdn.net/u011068702/article/details/809 ...

iOS RN学习随笔

用RN开发学习了点什么知识准备

入门参考学习的一些文章

环境配置的一些记录

react-native声明周期

自定义组件相关的一点知识点

没有对象属性的自定义类（定义与导出）

有对象属性的自定义类（定义与导出）

自定义类（定义与导出）

RN性能常见问题

核心的RN性能优化点就比较清晰明朗了

babel-plugin-transform-remove-console移除项目代码在中的console.*

React-Native 通用化建设与性能优化

RN调试利器——React Native Debugger

携程RN渲染性能优化实践

React-Native大型项目爬坑实录与性能调优

云音乐 React Native 体系建设与发展

React Native 在「元气阅读」的实践

iOS RN学习随笔相关推荐

最新文章

热门文章

iOS RN学习随笔

用RN开发学习了点什么知识准备

入门参考学习的一些文章

环境配置的一些记录

react-native声明周期

自定义组件相关的一点知识点

没有对象属性的自定义类 （定义与导出）

有对象属性的自定义类（定义与导出）

自定义类（定义与导出）

RN性能常见问题

核心的RN性能优化点就比较清晰明朗了

babel-plugin-transform-remove-console移除项目代码在中的console.*

React-Native 通用化建设与性能优化

RN调试利器——React Native Debugger

携程RN渲染性能优化实践

React-Native大型项目爬坑实录与性能调优

云音乐 React Native 体系建设与发展

React Native 在「元气阅读」的实践

iOS RN学习随笔相关推荐

最新文章

热门文章

没有对象属性的自定义类（定义与导出）