快速进入状态

网格布局

• 布局

redux

html与rn组件的对应关系

• 待整理

css转化工具

• 在组件同目录加入css文件，实时生产rn的stylesheet，被组件调用。

整理本地demo开发环境

打包工具众多，万恶之源就是它，npm。域名地址: https://www.npmjs.com/.
首先，我们ping一下，外国服务器，速度炒鸡慢，一个包几十个依赖，好了，号称5g的网络，npm install 安装，喝杯水出去走一圈，没有下完，一上午过去，还没有下完。（别怪vpn了，vpn翻墙也不会太快）

淘宝node包居然开源了，淘宝 NPM 镜像，国内服务器，淘宝cdn，速度以3M计，几乎都是瞬间下完。所以首先做的是把预先的npm注册成为cnpm，命令行敲一下命令
npm install -g cnpm --registry=https://registry.npm.taobao.org

现在速度是快了，里面体验就不一样，但是有一个问题，淘宝的cnpm管理工具，管理方法是，在cnpm自身安装目录下面建立的软连接，二这样在xcode的打包工程里面可能会存在问题的哦。（不知道软连接的请移步：#软连接）。
所以，更科学的方法是设置npm镜像。

npm config set registry https://registry.npm.taobao.org --global

好了，物理链接到npm目录下面，实打实的。

rn 提供了rnpm用来专门作为rn的打包工具，rnpm link之后，可以link的检测。

• rn本质上是在native端实现了相应的语法改造，最终将前端代码切换为native的UI。可以简单形象的理解为native的webkit

用第三方组件

debuger

rn提供了超级方便的debuger工具和体验。
首先，xcode中启动程序,模拟器开启，页面出现。
cmd +R hot reload，意思是，本地代码修改，直接更新到native的模拟视窗。
cmd + D dev Menu.debuger类型选择： 包括重载，远程js模拟器，hot reloading等。

http://localhost:8081/debugger-ui 允许在devtools中debug。

rn中坑的海洋

• facebook issues
• 有意思的bug，在一次端口冲突之后，简单的demo：
  react-native init projectname
  之后，你可以得到简单的demo程序，可是发现重复的rebuild居然会报错，这tmd可是react-native官方给出的demo啊，代码肯定是不会出错的，那为什么relaod之后会报错呢？
  现象大概是：在端口冲突之后，就算是把端口kill掉，也会有问题。没有办法进入transforming 的流程。
  暂时的解决：把端口kill掉，把product删掉,再不行，换端口，把8081换掉。找ios的同学debug一下，这东西是没有挂的，以此类推，很多自己开发的app都会有此问题。

快速进入状态

插件对页面的干扰

如果网站做到一定的级别，例如天猫各各页面有大量的页面访问，这个时候由于利益的驱使，可能会存在专门的针对我们页面的插件（主要是chrome和firefox插件）来做数据破坏（例如：天猫评价的评价返利），导流这样的功能（例如：天猫详情的流量分流导购）。

当然，不排除这样的插件有对消费者或者用户有益的地方，当时这样的插件可以不在网站开发人员的控制范围之内，也就是说，很有可能做损害网站本身利益的事情，当这个用户量非常大的时候，后果非常致命，例如：天猫评价广告插件导致商品评价内容广告泛滥、导购比价让用户从详情由天猫导向京东、考拉等竞争对手的网站。

先上两个危害较大的插件效果图：

现金奖励广告评价

详情的分流

防止插件干扰的方案

1. 快速销毁机制：顾名思义，销毁dom的机制。要求是快速发布，譬如：在detai需要绕开缓存立即生效传送配置到签到销毁机制中进行donm销毁。

2. 外部链接的监控：通过拿到链接访问地址的域名列表，监控不属于本站的链接域名情况。
   譬如：@游侠通过codetrack的监控不属于tmall域名的域名，来统计访问量最大的几个外部域名，访问量大代表影响大。而往往插件中会有外部图片这样的链接，这样就可以通过域名的统计信息来重现场景，统计插件种类，达到销毁的目的。

3. https接口的升级可以使得数据报文加密，数据被劫持且篡改也无意义。详见天猫双11防劫持及https改造落地的方案大揭秘@承风

4. 通过定义Content Security Policy的白名单来做访问限制。Content Security Policy 这个规范与内容安全有关，主要是用来定义页面可以加载哪些资源，减少XSS的发生。详见Content Security Policy 介绍。对外部链接的资源访问做限制，也可以使得插件无法工作。

5. 使用webcomponent定义区域功能为html标签，来做区域的保护，从而保护数据的入口不被任意插入数据。详见：天猫评价的广告插件

总结

前端的插件的安全问题往往被忽略，因为那是用户环境，用户以及操作系统和浏览器有更高的权限决定是否使用这样特定的功能。而网站本身的利益就受到了损害，以上对针对插件的攻防措施可以很大程度上对网站以及网站使用者的数据和相关的利益链起到保护作用。

• 一言以蔽之：在对象以及对象引用被修改的时候，返回新的对象来保证在immutable声明的数据结构内存空间里面的数据不会被意外修改。当然，人家做了很多优化，包括不限于并发、内存复用。

• 

• 参考

• 阮一峰大大的文章足以入门 里面有七八个demo供君赏玩。

官方demo用nodejs跑了一遍

demo source code

跑之前，npm install immutable，然后 node index.js

redux

官方中文站点文档

如果你要问为什么要数据管理，那你可以去看看杂乱无章时代的数据是跟着view的，也即是，你管理数据是无章法的，没有章法和模式最大的缺点是扩展性的缺失以及超级不方便的更新监听。简单一致带来了更大架构上的支撑。

redux时间

redux本质上是一种数据管理组件，一图以蔽之：

解释：store、dispatcher、view、action。 action反应了用户的操作，也可以fire。

redux 核心概念

• 所有的状体存在store，组件每次渲染，都必须有状态变化引起。
• 用户在UI上发出action
• reducer函数接受action，然后根据当前的state，计算出新的state

举例说明：

• store用来描述组件UI账户和state之间的映射

// 用来描述UI组件参数与state之间的映射
function mapStateToProps(state) {
  return {
    text: state.text,
    name: state.name
  };
}

• dispatch用来描述UI与action的映射

// dispatch用来描述UI与action的映射。
// Map Redux actions to component props
function mapDispatchToProps(dispatch) {
  return {
    onChange: (e) => dispatch({
      type: 'change',
      payload: e.target.value
    })
  }
}

• 容器在用户给出配置之后，有redux生成

// 容器组件在用户给出配置之后，由Redux生成。
// Connected Component
const App = connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent);

• 为了把stroe传入组件，西药redux提供的provider在组件外面包一层

//为了把store传入组件，必须使用redux提供的provider在组件外包一层。
const store = createStore(reducer);
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.body.appendChild(document.createElement('div'))
);

• 纯函数，用来接受aciton，算出新的state

//用来接收action，算出新的state，纯函数逻辑
function reducer(state = {
  text: '你好，访问者',
  name: '访问者'
}, action) {
  switch (action.type) {
    case 'change':
      return {
        name: action.payload,
        text: '你好，' + action.payload
      };
    default:
      return state;
  }
}

中间件

它提供的是位于 action 被发起之后，到达 reducer 之前的扩展点.
例如，可以利用中间件来解决例如日志记录，创建奔溃报告，调用异步借口，或者路由。

redux是flux的基础上发展起来的，相比来说，有一些改进的地方：
例如：

// flux create action
export function addTodo(text) {
  AppDispatcher.dispatch({
    type: ActionTypes.ADD_TODO,
    text: text
  });
}

// redux create action,与dispatch解耦，更优
export function addTodo(text) {
  return {
    type: ActionTypes.ADD_TODO,
    text: text
  };
}

常用的中间件

手动容器的生成

// Connected Component
const App = connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent);

redux-actions

• redux-actions托管容器生产

export default handleActions({
  [ADD_NEW_COUNTER]: (state, action) => {
    const { idGen } = state
    const newId = idGen + 1

    //this reducer basically generate a new id for new counter and
    //assign value 0 to that id.

    return {
      idGen: newId,
      counters: {
        ...state.counters,
        [newId]: 0
      }
    }
  },
  [INCREMENT]: (state, action) => {
    const { payload: { id } } = action

    //because payload contains the id and we already know that we are about
    //to increment the value of that id, we modify only that value by one

    return {
      ...state,
      counters: {
        ...state.counters,
        [id]: state.counters[id] + 1
      }
    }
  },
  [DECREMENT]: (state, action) => {
    const { payload: { id } } = action

    //this is exatcly similar as previous reducer, except we are decrementing

    return {
      ...state,
      counters: {
        ...state.counters,
        [id]: state.counters[id] - 1
      }
    }
  },
}, initialState)

如果你是新手，那直接上es6，没有污染，可以直接用上科班教你的class等语法。我等被污染的老鸟，可以用babel提供出来的实时编译工具查看es6中特殊语法的转化。babel实时编译工具

具体可以查看的可以是本人的一些基本用法，以及google给出的demo

最核心的东西，就是这个人脸平均算法：点那个 浅蓝色“ let them become one” 可以看下右边的效果。。
然后现在可以跑的暂时只有这个，http://www.facemore.net/page/average/en-us 这是最核心的算法，然后，我们做了好多的效果，，下面是几个

1 全数据的平均效果（心理学的漂亮脸论证）：

2 一个的美化效果：

3 然后做了某些特种的人的脸的变化，比如，拉一些特定职业的人过来做平均
然后选普通的跟这个标准职业的来做角色的预测转换，年龄的转换，美化的转这样的效果。。

然后，里面还涉及到，就是会预先找相关比较近的人类来做处理以达到更好的效果这样。。