docs: react 单向数据流

Author: Inchill

React/单向数据流.md

@@ -0,0 +1,80 @@
+## 父子组件通信
+
+通过 props 传递参数和回调函数。
+
+## 兄弟组件通信
+
+借助共同的父组件通信。
+
+## 发布-订阅模式
+
+优势是监听事件的位置和触发事件的位置是不受限制的。
+
+## Context API
+
+React 官方提出的一种组件树全局通信方式。16.3 之后具备更强的可用性，其具备三个关键部分：Context、Provider 和 Consumer，Context 对象包含 Provider 和 Consumer。
+
+```jsx
+const AppCtx = React.createContext(defaultValue)
+
+const { Provider, Consumer } = AppCtx
+
+// 使用 Provider 时需要包裹子组件
+render () {
+  return (
+    <Provider value={
+      title: this.state.title,
+      content: this.state.content
+    }>
+      <Title />
+      <Content />
+    </Provider>
+  )
+}
+```
+
+```jsx
+render () {
+  return (
+    <Consumer>
+      { value => <div>{ value.title }</div> }
+    </Consumer>
+  )
+}
+```
+
+**旧的 Context API 存在的问题是中间父组件的 shouldComponentUpdate 一旦返回 false，后续子组件的数据就不会更新。16.3 之后的 Context API 就解决了这个问题，这样始终保证生产者和消费者数据的一致性。**
+
+## Redux
+
+当项目过于庞大时，特别是需要管理很多组件树时，单一的 Context API 就显得捉襟见肘，此时应该使用统一的状态管理库。
+
+Redux 组成：
+
+- store：是一个单一的数据源，并且是只读的。
+- action：是对变化的描述。
+- reducer：是一个函数，负责对变化进行分发和处理。
+
+在 Redux 的整个工作流中，数据流始终是严格单向的，沿着 View -> Action -> Reducer -> store -> View 变化。Redux 通过提供一个统一的状态容器，使得数据能够有序而自由地流动在不同组件中。
+
+```jsx
+import { createStore } from 'redux'
+
+const store = createStore(
+  reducer,
+  state,
+  applyMiddleware(middleware1, middleware2, ...)
+)
+
+const reducer = (state, action) => {
+  return newState
+}
+
+const action = {
+  type: 'ADD_ITEM',
+  payload: '<li>text</li>'
+}
+
+store.dispatch(action)
+```
+