react

React 的核心思想

View 是 State 的输出。

view = f(state)

上式中，f表示函数关系。只要 State 发生变化，View 也要随之变化。

---

React 的本质是将图形界面（GUI）函数化。

const person = {  name: "michel",  age: 31}const App = ({ person }) => <h1>{ person.name }</h1>ReactDOM.render(<App person={person} />, document.body)

---

React 没有解决的问题

React 本身只是一个 DOM 的抽象层，使用组件构建虚拟 DOM。

如果开发大应用，还需要解决两个问题。

• 架构：大型应用程序应该如何组织代码？
• 通信：组件之间如何通信？

  ---

  架构问题

  React 只是视图层的解决方案，可以用于任何一种架构。

  • MVC
  • MVVM
  • Observer
  • Reactive
  • ...

  到底哪一种架构最合适 React ？

  ---

  通信问题

  组件会发生三种通信。

  • 向子组件发消息
  • 向父组件发消息
  • 向其他组件发消息

  React 只提供了一种通信手段：传参。对于大应用，很不方便。

  ---

  状态的同步

  通信的本质是状态的同步。

  React 同步状态的基本方法：找到通信双方最近的共同父组件，通过它的state，使得子组件的状态保持同步。

  ---

  Flux 架构

  Facebook 提出 Flux 架构的概念，被认为是 React 应用的标准架构。

  

  最大特点：数据单向流动。与 MVVM 的数据双向绑定，形成鲜明对比。

  ---

  Flux 的核心思想

  • 不同组件的state，存放在一个外部的、公共的 Store 上面。
  • 组件订阅 Store 的不同部分。
  • 组件发送（dispatch）动作（action），引发 Store 的更新。

  Flux 只是一个概念，有30多种实现。

  ---

  目前最流行的两个 React 架构

  React 架构的最重要作用：管理 Store 与 View 之间的关系。

  • MobX：响应式（Reactive）管理，state 是可变对象，适合中小型项目
  • Redux：函数式（Functional）管理，state 是不可变对象，适合大型项目

  ---

  MobX 架构

  MobX 的核心是观察者模式。

  • Store 是被观察者（observable）
  • 组件是观察者（observer）

  一旦Store有变化，会立刻被组件观察到，从而引发重新渲染。

  Redux 架构

  Redux 的核心概念

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

  

  ---

  Redux 应用的架构

  

  Redux 层保存所有状态，React 组件拿到状态以后，渲染出 HTML 代码。