`
zhangyaochun
  • 浏览: 2620797 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

11月读书活动 - React Native

 
阅读更多

前言:

 

     其实很多人都开始慢慢关注 React Native,我也不例外,看了一下试读章节,还是有一些收获的

 

正文:

 

     第十章是处理复杂的应用程序状态,第一个概念:

 

  • Flux 它解决了什么?
  1. 一个很简单的动向有很多重复的定义
  2. 异步操作
  3. 多个 store 处理一个 action
  4. store 间共享 state
  5. 任何时候一个对象或者数组发生变化,对象或数组自身也要改变它的引用

 

  • Flux 是什么?

   补充一下概念:Flux是Facebook用户建立客户端Web应用的前端架构。

 

   包含 3 个部分

 

  1. Dispatcher调度
  2. 存储Store
  3. 视图View(React 组件)

   单向数据流 - 就一个方向,当插入新数据,流完全重新开始 -- Flux 

 

  • Action  作为全部改变和交互的入口,当需要改变应用的状态或者有 View 需要更新,触发一下 Action
  • Dispatcher 巨大的回调函数,保存所有需要发送 action 的 store 列表,当 action 过来了,传递给各个 store,默认都是同步的
  • Store 保存整个程序的状态,而且状态变化的逻辑都在 store 里面
  • View 负责将 state 渲染给用户,并接受用户的输入
  • Controller View 接收 Store 的 state,传递给它管辖的子 View 去渲染

 

  • 后面介绍了一个 Baobab

    ReactJS 里面有一个 setState ,对于嵌套的组件会进行检查,然后确定是否更新 DOM。如果在根组件上监听一个 change 事件,那么所有组件都会做 diff 操作和渲染。

 

    子组件调用 setState 是不会影响父组件。

 

     使用 change 事件,不仅会引起级联渲染,而且会引起重复渲染

 

     如何在 React 里面创建 class:

 

var myComponent = React.createClass({
     render: function () {

     }
})

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics