All about React

https://reactjs.org/

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

Core Ideas

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

React Rendering Process

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: {
    }
  }
}

Some Tips

• Better way to pass props

Finished Topics

Main Concepts

GO TO MAIN CONCEPTS

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

Advanced Guides

GO TO ADVANCED GUIDES

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

API Reference

GO TO API REFERENCE

• React Top-Level API
• React.Component

Hooks

GO TO hooks

• Using the Effect Hook
• Hooks API Reference

Q and A

Q: What causes the component re-render?

A:

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

Function component vs Class Component

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

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

Unknown Prop Warning

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

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

未整理 or 未理解

Topic to Read

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

References

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