摘要：兄弟組件之間無法直接通信，它們需要利用同一層的上級作為中轉站。在兩個地方會用到，一是通過提交后需要拿到里面的數(shù)據(jù)，二是利用監(jiān)聽到發(fā)生變化后調用它來獲取新的數(shù)據(jù)。

在學習react的過程中，深深的被react的函數(shù)式編程的模式所吸引，一切皆組件，所有的東西都是JavaScript。React框架其實功能很單一，主要負責渲染的功能，但是社區(qū)很活躍，衍生出了很多優(yōu)秀的庫和工具。個人覺得，想要做好一個項目，往往需要其他庫和工具的配合，例如redux管理數(shù)據(jù)，react-router管理路由等，掌握基本的webpack配置和es6語法，然后想要提高性能，還有配合react的鉤子函數(shù)和immutable.js，什么時候組件不需要重新渲染，next.js服務端渲染等等...
一直有一個想法就是重構自己的博客，剛好這段時間放假，又剛好學習了react，于是就有了這個項目。

項目地址：https://github.com/k-water/re...
 如果覺得不錯的話，您可以點右上角 "Star" 支持一下 謝謝！ ^_^

前端

react

react-redux

react-thunk

react-router

axios

eslint

maked

highlight.js

antd

es6/7/8

后臺

spring boot

此項目采用前后端分離的實現(xiàn)，后臺接口基于RESTful規(guī)范設計，只提供數(shù)據(jù)，前端負責路由跳轉，權限限制，渲染數(shù)據(jù)等。PS：由于我是個前端er，所以這里主要講的是前端。

[x] admin增刪查改博客

[x] 博客標簽

[x] 博客內容markdown

[x] 博客內容頁展示目錄

[x] 返回頂部

[x] markdown代碼高亮

[x] 用戶登錄注冊

[x] 用戶評論

[x] 響應式

[ ] 博客分類

[ ] 點擊標簽搜索相關博客

[ ] 優(yōu)化首頁側邊欄

[ ] 完善歸檔

在前端渲染markdown的時候遇到了一點問題，相關的包很多，但是各種包解析的結果都有差異，react周邊社區(qū)推薦的是 react-markdown,使用方法也很簡單

import ReactMarkdown from "react-markdown"

const input = "# This is a header

And this is a paragraph"
ReactDOM.render(
    ,
    document.getElementById("container")
)

但是發(fā)現(xiàn)react-markdown對表格的支持不太友好，最后采用了marked，結合highlight.js對代碼部分實現(xiàn)高亮

import marked from "marked"
import hljs from "highlight.js"
  componentWillMount() {
    marked.setOptions({
      highlight: code => hljs.highlightAuto(code).value
    })
  }

最后解析出來的是一個字符串，還需要將它插入dom中，由于安全問題，React不提倡將字符串直接插入dom中，但React保留了一個API，可以這樣做：

react的組件由dom視圖和state組成，state是數(shù)據(jù)中心，它的狀態(tài)決定著視圖的狀態(tài)。react只負責UI的渲染，與其他框架監(jiān)聽數(shù)據(jù)動態(tài)改變dom不同，react采用setState來控制視圖的更新。setState會自動調用render函數(shù)，觸發(fā)視圖的重新渲染，如果僅僅只是state數(shù)據(jù)的變化而沒有調用setState，并不會觸發(fā)更新。說到組件，就必須了解react組件的生命周期，官方的圖解如下：

關于這部分的解釋網(wǎng)上有很多，可以自行查閱。而我在開發(fā)過程用的最多的就是

componentWillMount()

componentDidMount()

shouldComponentUpdate(nextProps, nextState)

這幾個鉤子函數(shù)了，關于性能優(yōu)化，可以在shouldComponentUpdate上作文章，由于shouldComponentUpdate默認返回true，簡單的方法可以通過比較更新前后的數(shù)據(jù)結構是否相同來判斷組件是否需要重新渲染，這時候就可以采用immutable.js了。

react是單向數(shù)據(jù)流，自上而下的傳遞數(shù)據(jù)。解決復雜組件之間通信的方法有很多。一般父子組件通信是最簡單的，父組件將一個回調函數(shù)傳遞給子組件，子組件通過this.props直接調用該函數(shù)與父組件通信。

如果組件之間嵌套很深，可以使用上下文getChildContext來傳遞信息，這樣在不需要將函數(shù)一層層往下傳，任何一層的子級都可以通過this.context直接訪問，react-redux內部實現(xiàn)就是利用此方法。

兄弟組件之間無法直接通信，它們需要利用同一層的上級作為中轉站。

redux不是必須的，如果不是復雜的組件通信，邏輯簡單，用context就行。redux并不是react特有的，其他框架也可以使用redux。當初為了學習redux花費了不少時間，一開始并不理解redux中間的操作，看了很多前輩們寫的文章才逐漸明白。簡單說說redux。
redux由三部分組成：store, reducer, action

store是一個對象，它主要由三個方法：
dispatch
用于action的分發(fā)，當action傳入dispatch會立即執(zhí)行，有些時候我們不想它立刻觸發(fā)，可以在createStore中使用middleware中間件對dispatch進行改造，例如redux-thunk，不過這是react-radux做的事了。
subscribe
顧名思義，監(jiān)聽器，監(jiān)聽state的變化，這個函數(shù)在store調用dispatch時會注冊一個listener監(jiān)聽state變化。
getState
獲取store中的state，當我們用action觸發(fā)reducer改變了state時，需要拿到新的state里面的數(shù)據(jù)。getState在兩個地方會用到，一是通過dispatch提交action后store需要拿到state里面的數(shù)據(jù)，二是利用subscribe監(jiān)聽到state發(fā)生變化后調用它來獲取新的state數(shù)據(jù)。

說了這么多，store的核心代碼其實很短：

/**
 * 應用觀察者模式
 * @param {Object} state
 * @param {Function} reducer
 */
function createStore(reducer) {
  let state = null
  const listeners = []
  const subscribe = listener => listeners.push(listener)
  const getState = () => state
  const dispatch = action => {
    // 覆蓋原對象
    state = reducer(state, action)
    listeners.forEach(listener => listener())
  }
  // 初始化state
  dispatch({})
  return {
    getState,
    dispatch,
    subscribe
  }
}

另一部分，reducer是一個純函數(shù)(pure function)，它接收一個state和action作為參數(shù)，根據(jù)action的type返回一個新的state，如果傳入的action type沒有匹配到，則返回默認的state，簡單實現(xiàn)如下：

function reducer(state, action) {
  if (!state) {
    return {
      title: {
        text: "water make redux",
        color: "red"
      },
      content: {
        text: "water make redux",
        color: "green"
      }
    }
  }
  switch (action.type) {
    case "UPDATE_TITLE_TEXT":
      return {
        ...state,
        title: {
          ...state.title,
          text: action.text
        }
      }
    case "UPDATE_TITLE_COLOR":
      return {
        ...state,
        title: {
          ...state.title,
          color: action.color
        }
      }
    default:
      return state
  }
}

action比較簡單，它返回一個對象，其中type屬性是必須的，同時也可以傳入一些其他的數(shù)據(jù)。
使用例子如下：

/ 生成store
const store = createStore(reducer)
let oldState = store.getState()
// 監(jiān)聽數(shù)據(jù)變化重新渲頁面
store.subscribe(() => {
  const newState = store.getState()
  renderApp(newState, oldState)
  oldState = newState
})
// 首次渲染頁面
renderApp(store.getState())
store.dispatch({
  type: "UPDATE_TITLE_TEXT",
  text: "water is fighting"
})
store.dispatch({
  type: "UPDATE_TITLE_COLOR",
  color: "#f00"
})

react-redux則是對redux做了封裝，可以在react中直接使用，并且提供了Provider和connect。
Provider是一個組件，它接受store作為props，然后通過context往下傳，這樣react中任何組件都可以通過context獲取store。
connect是一個函數(shù)，也是一個高階組件(HOC)，通過傳入state和dispatch返回一個新的組件，它的寫法是如下：

connect(mapStateToProps, mapDispatchToProps, mergeProps, options)(component)

也可以采用裝飾器的寫法，這需要babel的支持：

@connect(
    state,
    { func }
)

具體的不多介紹，迷你實現(xiàn)可以看看這個項目：https://github.com/k-water/ma...