Title Text

函数式编程范式

输出完全取决于参数
无副作用（Immutable）
关注想得到的结果，而不是过程（声明式）

}

纯函数

输出完全取决于参数

✅

❌

(showButton, buttonText) => 
  <div>
    {showButton &&
      <button>
        {buttonText}
      </button>}
  </div>

(showButton) => 
  <div>
    {showButton &&
      <button>
        {localStorage
           .getItem(‘buttonText’)}
      </button>}
  </div>

无副作用

✅

❌

const addItem = (itemList, item) => {
  return [...itemList, item]
}

const addItem = (itemList, item) => {
  itemList.push(item);
  return itemList;
}

const getMessage = async () => {
  const message =
    await get('/api/message');
  return message;
}

声明式

描述我想要的结果是什么

命令式

描述具体怎么做

(showButton) => 
  <div>
    {showButton && <button>click</button>}
  </div>

(showButton, $container) => {
  if (showButton) {
    $container
      .append($('<button>click<button>'));
  } else {
    $container
      .remove('button');
  }
}

const getFields = (items, fieldName) => items
  .filter(item => item[fieldName])
  .sort((a, b) => a[fieldName] - b[fieldName])
  .map(item => item[fieldName])

const getFields = (items, fieldName) => {
  const ret = [];
  for (let i = 0; i < item.length; i++) {
    if (items[i][fieldName]) {
      ret.push(items[i][fieldName])
    }
  }
  return ret;
}

为什么需要纯函数

输出完全取决于参数：可预测，不会被别人影响
无副作用：不会影响别人
以结果为导向，步骤清晰，容易理解
容易测试
可缓存

简单的 React 组件是纯函数

// https://reactjs.org/docs/components-and-props.html

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

复杂的 React 组件不是...

内部 state
副作用（发送请求，触发事件）
PureComponent ≠ pure function

Redux：“纯化”了 React

取消内部状态，输出只由参数（props）决定
状态的变化（reducer）也是纯函数
统一管理副作用（thunk）

Redux State

Reducer

Actions

pure

impure

Redux 的理想模型

所有数据存在 Redux 的 state 里
UI 完全由 Redux state 决定（是关于 state 的纯函数）
UI 发送事件（action）驱动 Redux state 更新
逻辑独立于 UI

Redux 的理想模型

React 组件只包含渲染逻辑 + 事件回调（hooks, event handlers）。类比 handlebars
Action 相当于 event，描述发生了什么，类比 dom event
Reducer 包含真正的逻辑
Selector 负责数据的转换与组装（同样是纯函数）

现实是...

UI 数据来源与生命周期：

Redux state (每次页面刷新)

Component state (每次组件加载)

localStorage / sessionStorage (永久 / 浏览器打开)

cookie (取决于后端设置)

URL (每次 URL 改变)

History state (每次 URL 改变)