React - arthur791004/notes GitHub Wiki

Basic

JSX

Container/Component

Props/State

Lifecycle

Others

  • Router
  • Redux
  • CSS
  • Testing
  • Babel
  • Webpack

Advance

Component v.s PureComponent

Context

Basic

  • 我們可以把 context 想像成隱藏的 props
  • 一旦我們宣告了 context，React 在背後幫我們把這個隱藏的 props 確實地一層層傳到 subtree 所有節點。
  • 宣告 context 的方式是宣告 Component 的 childContextTypes 和 getChildContext()
  • 在 subtree 的 Component 我們可以用 contextTypes 取出 context
  • Naming: 通常會用 Provider

Notes

  • getChildeContxt() { return }
  • 因為每次 update 時，React 都會用 Object.assign() 創造新的 context --> 避免 subtree 的 context 污染的上層的 context
  • 一個 component 內不應該同時出現 setState 和 getChildContext。
  • 如果你想開發 React 的 library，多了解 React 底層實作能讓你對 code 掌握度更高

QA

  1. 為什麼 React 不在 Object.assign() 前先檢查 getChildContext() 和 parentContext 的 reference 是不是有更新，再決定要不要創造新的 context 呢？

React 不能這麼做是因為 React 不能確保開發者沒有用 mutable 的方式更新 context。

Reconciliation

Tech Stack

Name Description
react
redux
redux-observable
reselect reselect memoizes ("caches") previous state trees and calculations based on said tree. This means repeated changes and calculations are fast and efficient, providing us with a performance boost over standard mapStateToProps implementations.
styled-components v2 a CSS-in-JS framework
redux-immutable transform store to immutable.js
react-helmet dynamic header
react-loadable every sub-components can be split into separate chunks, and then we can cache and even preload every components whenever possible
react-router v4
react-intl i18n

Reference