初探 Formik

2019-09-22

379
0
2019-09-28

Formik

觀看 Taming Forms in React - JARED PALMER 做的筆記整理如下：

1. JSON.stringify(props, null, 2) 這是什麼？

// 第3個參數 space (up to 10)
JSON.stringify(
{ uno: 1, dos: 2, a:11, b:12, c:13 }, 
null, 2);
"{
  "uno": 1,
  "dos": 2,
  "a": 11,
  "b": 12,
  "c": 13
}"

JSON.stringify(
{ uno: 1, dos: 2, a:11, b:12, c:13 }, 
null, 10);
"{
          "uno": 1,
          "dos": 2,
          "a": 11,
          "b": 12,
          "c": 13
}"

// 第2個參數 The replacer parameter

function replacer(key, value) {
  // Filtering out properties
  if (typeof value === 'string') {
    return undefined;
  }
  return value;
}

var foo = {
    foundation: 'Mozilla', 
    model: 'box', 
    week: 45, 
    transport: 'car', 
    month: 7
};

var a = JSON.stringify(foo, replacer);

"{"week":45,"month":7}"

2. react is the v in mvc

MVC 是什麼：
(維基百科) MVC模式（Model–view–controller）是軟體工程中的一種軟體架構模式，把軟體系統分為三個基本部分：模型（Model）、視圖（View）和控制器（Controller）。

為什麼 react 只是 v：
react 會被視為只有 v 是因為 react 沒有一個專職狀態管理，屬於 Model 的部分

總結：

Context api 可以是 Model 嗎？看完大大的文章，其實 mvc 就是一個架構，各司其職，目的是要讓專案好維護。
A JavaScript library for building user interfaces
網上有 react + redux 成就一個 MVC 架構的說法，React 是 view 的角色，Redux 是 controller，Model 就是 Redux Store 中存儲的 state。
https://juejin.im/post/59084154a0bb9f0065117437（文章節取）
另一種做法就是遵循MVC模式，應該通過Controller去改變Model的結構，然後通知View去改變自己（或者理解為View偵聽到Model的變化，從而改變自己）。

執行action的目的雖然是修改Model ，不過在Redux中，我們盡量希望遵循FP的思想設計出所謂的“純函數”，於是Redux就引入了reducer函數，這個函數要做的事情其實就是對Model進行transform （可以考慮引入immutable.js來存儲和操作Modle）。一旦Model對象發生了變化（並不是真正發生了變化，而是產生了一個新的Model），Redux就會通知React Component根據新獲得的Model去重新Render。

顯然，React扮演的是View的角色，Redux則是Controller，至於Model就是Redux Store中存儲的State。我們要從MVC模式的角度去思考React+Redux開發，把代碼需要做的每件事情想清楚，明確是誰的職責，如此才不至於在實現時走歪路，不討好地去編寫大量View的控制邏輯，尤其是那些牽涉到parent-child組件的遞歸關係時，可能會讓前端代碼燉成一鍋粥。

3. react is declarative ? ( you focus not so much on the how but the what )

React Native教學 Part 3.5 - 概念分析：Declarative Programming
JavaScript: Functional Programming 函式編程概念
以上文章筆記：

React的設計貫徹Declarative Programming（聲明式編程）的思想，與其相反的是Imperative Programming （命令式編程）。
React.js的設計理念主要有三：
1. Declarative
2. Component-Based
3. Learn Once, Write Anywhere
Imperative vs Declarative
How（如何） vs What（甚麼）
Imperative：是告訴程式如何做（How）一些事，其實就是平日programming常做的，你寫下指示，程式一步一步跟隨你的指示做。（照我說的就對了）
Declarative：是聲明你需要甚麼（What），不用理會程式用甚麼方法、甚麼步驟做到。（我相信你會有好方法）

4. no magic this is important we don’t use a ton of observable ? observable怎麼magic了嗎？

...

5. 如何看懂 formik 原始碼

需要時間
先記下一些
1. They use React context to hook into the parent <Formik /> state/methods. —> hook into the parent 是什麼意思
2. when context api came out : you can implicitly pass props without having to write them out, that was one of our goals to cut down on the annoying

6. this.props.children (該如何解釋？)

What :
Some components don’t know their children ahead of time. This is especially common for components like Sidebar or Dialog that represent generic “boxes”.
We recommend that such components use the special children prop to pass children elements directly into their output

When :
在固定的基礎上，加上一些變動的 children，使 component 更可以重複利用

How :

render () {
  return (
    <div className='container'>
      <Picture key={picture.id} src={picture.src}>
          //what is placed here is passed as props.children  
      </Picture>
    </div>
  )
}

Composition vs Inheritance
A quick intro to React’s props.children

7. How Are Function Components Different from Classes?

看了How Are Function Components Different from Classes? 做了筆記，感覺這篇文章是在說明 class component 裡的 this 問題，和使用 Hook 就不會有這樣的問題了

For a while, the canonical answer has been that classes provide access to more features (like state). With Hooks, that’s not true anymore.
In our observation, the performance differences are negligible( 微不足道 ), though optimization strategies ( 優化策略 ) are a bit different.
If you plan to use functions more often in a React app, you might want to understand it.
UI從概念上講是當前應用程式狀態的函式，事件處理程序是渲染結果的一部分 — just like the visual output. Our event handlers “belong” to a particular render with particular props and state.
Our showMessage callback is not “tied” to any particular render, and so it “loses” the correct props. Reading from this（class component 的 this）severed(切斷) that connection.
However, the problem would go away if we fully relied on JavaScript closures.
Now we understand the big difference between functions and classes in React:
Function components capture the rendered values.
With Hooks, the same principle applies to state as well.
So we know functions in React capture props and state by default.
In classes, you’d do it by reading this.props or this.state because this itself is mutable. React mutates it.
In function components, you can also have a mutable value that is shared by all component renders. It’s called a “ref”:
```
function MyComponent() {
  const ref = useRef(null);
  // You can read or write `ref.current`.
  // ...
}
```

回首頁

點點筆記

練功去