RN笔记

js函数返回值

```JavaScript
function demo(){
    return("你看，直接返回了");  
}  
var a=demo()+",返回第一次";  
alert(a); 
```

=>

=>是es6语法中的arrow function

举例：

(x) => x + 6

相当于

function(x){
    return x + 6;
}

AppRegistry

const MyApp = StackNavigator({
  MyTab: {screen: MyTab},
  Detail: {screen: Detail},
}, {
  headerMode: 'screen'
});

export default MyApp;

AppRegistry.registerComponent('MyApp', () => MyApp);

class App extends Component {
    ...
}

export default function main(){
  return App;
}

AppRegistry.registerComponent('APP', main);

middlewares

applyMiddleware(…middlewares) 在react-native中使用redux

redux设计如此简洁，以至于并没有进行异步处理的功能。但是留下了middleware这个概念。可以自己编写符合需要的中间件。目前第三方的中间件基本可以完成一个复杂应用的架构设计。那就先说一说，怎么去处理异步请求呢。

let middlewares = [thunk];
  if(options.debug){
    middlewares.push(createLogger());
  }

const store = createStore(reducers, applyMiddleware(...middlewares), autoRehydrate());

redux-thunk

redux在react-native上使用(三)–加入redux-thunk

首先推荐redux-thunk，可以看到它的源码很简洁。就是判断action是否是函数，如果是函数进行递归式的操作。所以在redux中的异步，只能出现在action中，而且还需要有中间件的支持。

同步action与异步action最大的区别是： 同步只返回一个普通action对象。而异步操作中途会返回一个promise函数。当然在promise函数处理完毕后也会返回一个普通action对象。thunk中间件就是判断如果返回的是函数，则不传导给reducer，直到检测到是普通action对象，才交由reducer处理

redux-persist

为什么要用 redux-persist

redux-persist这个第三方插件来将store对象存储到本地，以及从本地恢复数据到store中，比如说保存登录信息，下次打开应用可以直接跳过登录界面。

redux-actions

redux在react-native上使用(五)–redux-actions使用

redux-actions有两大法宝createAction和handleActions.

createAction

原来创建action:

const startAction = () => ({ type: START });

使用redux-actions创建action:

import { createAction } from 'redux-actions';
const startAction = createAction(START);

handleActions

原来reducer操作state写法要使用switch或if else来匹配:

function timer(state = defaultState, action) {
  switch (action.type) {
    case START:
      return { ...state, runStatus: true };
    case STOP:
      return { ...state, runStatus: false };
    case RESET:
      return { ...state, seconds: 0 };
    case RUN_TIMER:
      return { ...state, seconds: state.seconds + 1 };
    default:
      return state;
  }
}

使用redux-actions``reducer操作state:

const timer = handleActions({
  START: (state, action) => ({ ...state, runStatus: true }),
  STOP: (state, action) => ({ ...state, runStatus: false }),
  RESET: (state, action) => ({ ...state, seconds: 0 }),
  RUN_TIMER: (state, action) => ({ ...state, seconds: state.seconds + 1 }),
}, defaultState);

redux-promise

Redux异步方案选型

connect

React 实践心得：react-redux 之 connect 方法详解

Redux 是「React 全家桶」中极为重要的一员，它试图为 React 应用提供「可预测化的状态管理」机制。Redux 本身足够简单，除了 React，它还能够支持其他界面框架。所以如果要将 Redux 和 React 结合起来使用，就还需要一些额外的工具，其中最重要的莫过于 react-redux 了。

react-redux 提供了两个重要的对象，Provider 和 connect，前者使 React 组件可被连接（connectable），后者把 React 组件和 Redux 的 store 真正连接起来。

我们当然可以直接在 React 中使用 Redux：在最外层容器组件中初始化 store，然后将 state 上的属性作为 props 层层传递下去。

class App extends Component{

  componentWillMount(){
    store.subscribe((state)=>this.setState(state))
  }

  render(){
    return <Comp state={this.state}
                 onIncrease={()=>store.dispatch(actions.increase())}
                 onDecrease={()=>store.dispatch(actions.decrease())}
    />
  }
}

但这并不是最佳的方式。最佳的方式是使用 react-redux 提供的 Provider 和 connect 方法。

组件生命周期

## lodash

JavaScript工具库lodash发布了3.5版，成为了npm包仓库中依赖最多的库。它正在摆脱屌丝身份，成为开发者的不二之选。

lodash一开始是Underscore.js库的一个fork，因为和其他(Underscore.js的)贡献者意见相左。John-David Dalton的最初目标，是提供更多“一致的跨浏览器行为……，并改善性能”。之后，该项目在现有成功的基础之上取得了更大的成果，并于一月份发布了3.0版本。

与其前任Underscore一样，lodash的名字也是源于所有函数前面的那个字符。就像jQuery在全部函数前加全局的$一样，lodash使用全局的_来提供对工具的快速访问。例如，要对数组的所有元素执行某个行为，我们可以：

_.each([1, 2], function(n) { console.log(n); });

一些主要的npm包都依赖于lodash，如JavaScript转译器Babel、博客平台Ghost，和项目脚手架工具Yeoman。

flow

"devDependencies": {
    "flow-bin": "^0.38.0",
    "jest": "^20.0.4"
}

Flow:AStaticTypeCheckerforJavaScript

Flow is a static type checker for your JavaScript code. It does a lot of work to make you more productive. Making you code faster, smarter, more confidently, and to a bigger scale.

Flow checks your code for errors through static type annotations. These types allow you to tell Flow how you want your code to work, and Flow will make sure it does work that way.

// @flow
function square(n: number): number {
  return n * n;
}

square("2"); // Error!

()=>this.onLoadFromStore()

store:configStore({debug: __DEV__}, ()=>this.onLoadFromStore()) 

其中：()=>this.onLoadFromStore(), 回调的type是(err?: any, result?: Result) => any 这里的理解是：忽略err和result，回调执行this.onLoadFromStore() 代码这样写更容易理解：() => this.onLoadFromStore()

dispatch

调用redux的createStore方法，redux就提供了dispatch()去修改store数据

Creates a Redux store that holds the state tree. The only way to change the data in the store is to call dispatch() on it.

onLoadFromStore(){
    let {dispatch} = this.state.store;
    dispatch(onAppReady({user:this.props.user}));
}

export function onAppReady(initialProps:Object){
  return (dispatch:Dispatcher, getState:StateFetcher)=>{
    //do something on app ready.
    dispatch(createAction(ON_APP_READY, STATE.SUC, initialProps));
    //sync hotwords
    dispatch(fetchHotwords());
    //sync companies
    dispatch(fetchCompanies());
  }
}

action

Action

Action 本质上是 JavaScript 普通对象。我们约定，action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。

Action 创建函数

Action 创建函数 就是生成 action 的方法。“action” 和 “action 创建函数” 这两个概念很容易混在一起，使用时最好注意区分。

在 Redux 中的 action 创建函数只是简单的返回一个 action:

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

dispatch(addTodo(text))

// 或者创建一个 被绑定的 action 创建函数 来自动 dispatch：

const boundAddTodo = text => dispatch(addTodo(text))
const boundCompleteTodo = index => dispatch(completeTodo(index))

//然后直接调用它们：

boundAddTodo(text);
boundCompleteTodo(index);

保险人项目RN计划书

SearchView keyword click

const ACTION_CLICK_KEYWORD = 'click-keyword';

SearchView->SearchView:onPressKeyword("玺越人生", 'app-vplan_search_hot', 0)
SearchView->SearchView:doSearch("玺越人生", ACTION_CLICK_KEYWORD)
SearchView->SearchView:setState
SearchView->GiftedListView:_refresh
GiftedListView->GiftedListView:_onRefresh
GiftedListView->SearchView:onFetch
SearchView->creatAction:findProducts("玺越人生", ACTION_CLICK_KEYWORD, callback)

“redux-thunk”提供了异步Action，也就是项目中onFetch方法里， dispatch的是findProducts函数，函数返回的也是一个函数。在findProducts函数的返回值里面，进行API请求这个异步操作，请求结束在dispatch同步的Action