React Native

CodePen在线编辑

iOS开发之ReactiveCocoa下的MVVM

React语法

RN环境配置

语法补全：ReactNative-LiveTemplate

props在被指定的组件的生命周期中不改变。
state：一切界面变化。setState()

样式

在数组中居后的比居前的优先级更高

<Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
<Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>

创建样式对象。

const styles = StyleSheet.create({
  bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

《flex》
注意：如果父容器没有固定的width和height，也没有设定flex，父容器的尺寸就为零。
组件能够撑满剩余空间的前提是其父容器的尺寸不为零。
flex：动态地扩张或收缩
flex:1 撑满所有剩余的空间

《Flexbox布局》
flexDirection，alignItems和justifyContent

《长列表》
FlatList：优先渲染屏幕可见元素，并不是所有元素。
data:列表的数据源
renderItem:渲染item

SectionList:渲染分组数据。

《网络》
第三方的软件来进行观测网络请求，react-native-debugger

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  }),
});

await:
这里的await语句，其所在的函数必须有async关键字声明

// 注意这个方法前面有async关键字
async function getMoviesFromApi() {
  try {
    // 注意这里的await语句，其所在的函数必须有async关键字声明
    let response = await fetch(
      'https://facebook.github.io/react-native/movies.json',
    );
    let responseJson = await response.json();
    return responseJson.movies;
  } catch (error) {
    console.error(error);
  }
}

RN内置XMLHttpRequest API（也就是ajax）
RN支持WebSockect

使用导航器跳转页面

react-native-navigation

语法

ES5 createClass 不存在绑定
ES6 rn0.18 开始 存在绑定，要手动绑定。

绑定技术：ES6需要绑定this,否则会在函数中使用this会报错。

//使用bind函数
class Counter extends React.Component{
	construtor(){
 		super();
		this.tick = this.stick.bind(this);
	}

	tick(){

	}
}

//或者使用箭头函数

tick = () => {
	console.log(this.state.);
};

绑定函数的写法：
<1> 在构造器construtor()函数中，this.tick = this.stick.bind(this);
外界调用：this.tick();
<2>使用箭头函数

tick = () => {
};
外界调用：this.tick;

《解构》
{ item }是一种“解构”写法，请阅读ES2015语法的相关文档

renderMovie({ item }) {

}

常用的第三方库

Redux

开发工具

Nuclide: Facebook 内部使用的开发工具。
App Center:微软提供的热更新服务
Pushy:热更新服务,服务器部署在国内速度更快，还提供了全自动的差量更新方式，大幅节约更新流量
Ignite：它带有一个命令行可以生成 app、组件或是容器
其他参考资源

热更新原理

1.app启动
2.是否需要更新
2-1：需要更新：
从服务器下载最新的bundle
加载bundle文件
结束。
2-2: 不需要更新
是否存在bundle
2-2-1: 是存在bundle
加载bundle文件
2-2-2: 不存在bundle
从asset本地目录加载。

使用热更新，就涉及到jsbundle的拆分和加载。

一些文章

深度使用react-native的热更新能力,必须知道的一个shell命令

JSX

JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析

render 渲染内容的描述
通过Props传递数据 ,是一种从父级向子级传递数据的方法
给组件添加交互功能
构造器方法constructor
props和state的区别
添加反向数据流

1

注意:React元素都是immutable不可变的
ReactDOM管理节点内容
将元素渲染到 DOM 中:ReactDOM.render(element,节点)
更新元素渲染: 可以用定时器更新或者有态组件更新

2

组件可以将UI切分成一些独立的、可复用的部件
定义组件:
function Welcome(props) {
return

Hello, {props.name}

;
}

或者
class Welcome extends React.Component {
render() {
return

Hello, {this.props.name}

;
}
}

组件渲染:

生命周期钩子:

state使用

正确使用:setState()
this.setState({comment:‘Hello’});

状态更新可能是异步的,不能依靠this.props和this.state的值来计算下一个状态.

有状态组件和无状态组件

事件处理

onClick={} 表示事件的函数

<button onClick={activateLasers}>
  Activate Lasers
</button>

不能使用返回的false方式阻止默认行为,用preventDefault
事件的监听不需要addEventListener,只需要这个元素初始渲染的时候提供一个监听器

构造器初始化bind

this.handleClick = this.handleClick.bind(this);

属性初始化器绑定回调函数:

handleClick = () => {
    console.log('this is:', this);
  }

性能问题:这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染
建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。

条件渲染

与预算符&&
在 JavaScript 中，true && expression 总是返回 expression，而 false && expression 总是返回 false

阻止组件渲染

列表&Keys

在定义key时,不建议使用索引来用作键值，因为这样做会导致性能的负面影响，还可能引起组件状态问题
用keys提取组件.

1.定义组件类
class 组件类名称 extends React.Component{
constructor(){

}
}

定义组件
function 组件1(){
return (

);
}

渲染
ReactDOM.render(component,id);

开发工具:

组件:
Board,