https://reactjs.org/

• Core Ideas
• Some Tips
• MAIN CONCEPTS
• ADVANCED GUIDES
• hooks
• API REFERENCE
• React Testing
• TypeScript with React
• Q/A

1. We typically want to perform our effects after React has updated the DOM => put side effects into componentDidMount and componentDidUpdate or useEffect.

In stateless component, return() runs before useEffect()

2. Props are Read-Only

flowchart LR
  Component -->|return| e("Element Object") -->|describe| ht("HTML Tag") 

Eg returned element (object) === Virtual DOM:

{
  type: "main", // string element to an HTML tag (DOM element) || Component
  key: null,
  ref: null, // reference to a real DOM node
  "$$typeof": Symbol(react.element),
  props: {
    children: {
    }
  }
}

• Better way to pass props

GO TO MAIN CONCEPTS

• [x] State and Lifecycle
• [x] Handling Events
• [x] Conditional Rendering
• [x] Lists and Keys
• [x] Forms
• [ ] Lifting State Up
• [x] Composition vs Inheritance
• [ ] Thinking in React

GO TO ADVANCED GUIDES

• [x] Typechecking With PropTypes
• [ ] JSX In Depth
• [x] Code-Splitting
• [ ] Context
• [ ] Refs and the DOM
• [ ] Uncontrolled Components
• [x] Higher-Order Components
• [x] Refs and the DOM (before Callback Refs)
• [ ] Forwarding Refs

GO TO API REFERENCE

• [ ] React Top-Level API
• [ ] React.Component

GO TO hooks

• [x] Using the Effect Hook
• [ ] Hooks API Reference

A:

1. The state changes (including global state)
2. There comes new props [4]

FC: 每次重新執行函數時，都是傳入獨立的 props，並且 state 也是獨立

CC: based on OOP，may have old props or state

https://reactjs.org/warnings/unknown-prop.html

1. 應避免將由 parent component 使用(interpret) 的 props，forward 至 child component

• 為何 useEvent 是個糟糕的方案？
• React 18 vs 17 benchmarks (2022.09)

1. https://reactjs.org/
2. https://chengr4.medium.com/react-%E7%AD%86%E8%A8%98-8b8a39e86655
3. Lifecycle Diagram
4. https://github.com/uberVU/react-guide/issues/17#issuecomment-305106051
5. https://hackmd.io/@JSDC-tw/2021conference/%2FbJrOFuCZQQioW7k6LarlOw 6 Anthony Garritano; Understanding React's UI Rendering Process (2019.11)