# react
###### tags: `react`
難但詳細:https://ithelp.ithome.com.tw/articles/10215265

較簡單:https://ithelp.ithome.com.tw/articles/10243347


JSX特性:

## function component

有無function component比較(無)
(有)

## props
於是，React的設計者就讓所有寫在自製元件標籤上的「屬性」，和其他從外部控制元件的參數包成一個物件、傳入元件中，並稱為props。


## children
他們把「夾在標籤中間」的內容也全部包成一個物件，**稱為children，然後再丟進props裡面**。

---------



↑
DAY12

route:day16

### Function Component
當只有render而沒有自己的state時
可把`this.props` 通通換成 `props`

https://zh-hant.reactjs.org/tutorial/tutorial.html
OOXX實做 https://codepen.io/l53513955-the-scripter/pen/dyWGoej

1.點選方塊會變色
2.讀被滑鼠標起來的字的value
3.把該方塊跟value綁定(值一起被記錄)

--------------------------------------------

為styled-components套件

this.inputOpenFileRef = React.createRef() //react open file browser on click a div
每次點擊會重開瀏覽器一次已達到動態效果

**`RegExp`** 物件被用來比對符合自訂規則的文字

### dangerouslySetInnerHTML

`dangerouslySetInnerHTML` 是 React 用來替代 DOM 的 `innerHTML`。普遍來說，從程式碼中注入 HTML 是個冒險的行為，你會很輕易地讓使用者暴露在 [cross-site scripting (XSS)](https://zh.wikipedia.org/wiki/%E8%B7%A8%E7%B6%B2%E7%AB%99%E6%8C%87%E4%BB%A4%E7%A2%BC) 攻擊風險之下。所以在 React 裡你還是可以直接注入 HTML，但是你必須使用 `dangerouslySetInnerHTML`，然後傳入一個有 `__html` 為 key 的 object，藉此來提醒你自己這樣做具有風險。

src/modules/TagModule/index.jsx /120
把原本list的用螢光筆標記:

選擇到了哪位被告://src/modules/SideMenuModule/defendant.jsx


# action & reducer
參考:https://chentsulin.github.io/redux/docs/basics/Reducers.html

## action
包含:type
一般會觸發dispatch
## reducer
Action 描述實際發生一些事，不過並不指定應用程式的 state 要如何去應對改變。這是 reducer 的工作。

reducer 是一個pure function，它接收先前的 state 和一個 action，然後回傳下一個 state。

讓 reducer 保持 pure 非常重要。你**永遠不**應該在 reducer 裡面做這些事：

- 改變它的參數；
- 執行有 side effect 的動作，像是呼叫 API 和 routing 轉換。
- 呼叫不是 pure 的 function，像是 `Date.now()` 或是 `Math.random()`

reducer之所以都要先創造一個空的儲存值一方面是為了安全性(不會動到值) 一方面是因為網頁是偵測STATE的值有沒有變化

# store
在前面的章節，我們定義了代表實際上「發生了什麼」的 [action](https://chentsulin.github.io/redux/docs/basics/Actions.html)，和依據這些 action 更新 state 的 [reducer](https://chentsulin.github.io/redux/docs/basics/Reducers.html)。

**Store** 是把它們結合在一起的物件。store 有以下的責任：

- 掌管應用程式狀態；
- 允許藉由 [`getState()`](https://chentsulin.github.io/redux/docs/api/Store.html#getState) 獲取 state；
- 允許藉由 [`dispatch(action)`](https://chentsulin.github.io/redux/docs/api/Store.html#dispatch) 來更新 state；
- 藉由 [`subscribe(listener)`](https://chentsulin.github.io/redux/docs/api/Store.html#subscribe) 註冊 listener;
- 藉由 [`subscribe(listener)`](https://chentsulin.github.io/redux/docs/api/Store.html#subscribe) 回傳的 function 處理撤銷 listener。
你的 Redux 應用程式中將只會有一個 store

把滑鼠拖曳過的值讀取進來:modules/TagModule/index.jsx

增加銀行名稱
增加start跟end進去DB的資料

變成被告人的資訊前面先包額外一個欄位:被告人資訊之類的

----------------------------------
## redux 筆記
1. componentDidMount:第一次load時會跑的

2. 運用action已達成非子傳父的連結


redux thunk 套件 記得npm後面都要加--save 才會存到package

## dispatch 動態分配
`dispatch` is used as a callback which gets invoked once some async action is complete. In redux-thunk `dispatch` is simply a function which dispatches an action to the Redux store after, let's say, you fetch data from an api (which is asynchronous). You can pass any function you like to `.then()` or `.catch()` of some Promise and it will be invoked upon success of failure.

當你從非同步的地方(ex:api)得到數據時 就會call 他 用來分配到store(中的reducer)

# container component:
我們以下將使用 React Redux 提供的 [`connect()`](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) function 產生 container component 而非手動寫成。

mapStateToProps（state, ownProps）
mapStateToProps是一個函數，用於建立組件跟store的state的映射關係
作為一個函數，它可以傳入兩個參數，結果一定要返回一個object
傳入mapStateToProps之後，會訂閱store的狀態改變，在每次store的state發生變化的時候，都會被調用

只要是jsx檔最後面都要接connect and mapDispatchToProps

直接把正則套到上面試試

直接用repalce_all換行符號去做 後面的highlight總會有地方可以套入


把最開始的cj_text 中的\r改成\\r
bank regex 合併

## 困難點
在前端用正則找位置 再用後端傳來的值畫highlight

銀行正則因為中間可能夾太多字 所以先把包含帳號的字串抓下來 再額外篩出來一次只有帳號的