This is problematic both server rendering (where the external data won’t be used) and the upcoming async rendering mode (where the request might be initiated multiple times). There is a common misconception that fetching in componentWillMount lets you avoid the first empty rendering state. In practice this was never true because React has always executed render immediately after componentWillMount. If the data is not available by the time componentWillMount fires, the first render will still show a loading state regardless of where you initiate the fetch. This is why moving the fetch to componentDidMount has no perceptible effect in the vast majority of cases.
为什么React的getDerivedStateFromProps方法是static ?
to help ensure purity which is important because it fires during interruptible phase ----- by Dan
This proposal is intended to reduce the risk of writing async-compatible React components.
Choosing lifecycle method names that have a clearer, more limited purpose.
Making certain lifecycles static to prevent unsafe access of instance properties. ----- react-rfc
Reconciliation / Render phase: React builds the work in progress tree and finds out the changes it needs to make without flushing them to the renderer. This is interruptible.
Commit phase: all the changes are flushed to DOM. This is uninterruptible.
useEffect vs useLayoutEffect
useLayoutEffect: If you need to mutate the DOM and/or DO need to perform measurements
useLayoutEffect fires synchronously after all DOM mutations but before Paint phase. Use this to read layout(styles or layout information) from the DOM and then perform blocking custom DOM mutations based on layout.
useEffect: If you don't need to interact with the DOM at all or your DOM changes are unobservable (seriously, most of the time you should use this).
useEffect runs after the render is committed to the screen i.e. after Layout and Paint phase. Use this whenever possible to avoid blocking visual updates
type
type代表JSX的类型，在JSX中标签是什么type就是什么，例如<div> type就是div，<Example> type就是Example，所以说这里的标签是啥type就是啥。即 type === Example
$$typeof
$$typeof是对JSX中type的细化，一般能渲染出的比如<div><Modal>等的自定义component的$$typeof都是Symbol('react.element')，而无法渲染出的（React自身定义的一些封装类型）则由具体类型决定，例如<React.Portal> 的$$typeof就为Symbol('react.portal') <React.Fragment>则为Symbol('react.fragment')，还有memo,lazy,forwardRef都类似。Why Do React Elements Have a $$typeof Property? 【PS：为了安全】
tag
tag是针对fiber的类型标识（type和$$typeof是针对element或者说JSX的返回值）主要为了react处理不同任务。
Defines the type of the fiber. It’s used in the reconciliation algorithm to determine what work needs to be done. As mentioned earlier, the work varies depending on the type of React element. The function createFiberFromTypeAndProps maps a React element to the corresponding fiber node type
React为什么不应该在componentWillMount阶段获取数据
为什么React的getDerivedStateFromProps方法是static ?
Reconciliation/ Render phase 和 Commit phase
useEffect vs useLayoutEffect
why is setState asynchronous?
RFClarification: why is
setStateasynchronous?React中的 type $$typeof tag
type type代表JSX的类型，在JSX中标签是什么type就是什么，例如
<div>type就是div，<Example>type就是Example，所以说这里的标签是啥type就是啥。即 type === Example$$typeof $$typeof是对JSX中type的细化，一般能渲染出的比如
<div><Modal>等的自定义component的$$typeof都是Symbol('react.element')，而无法渲染出的（React自身定义的一些封装类型）则由具体类型决定，例如<React.Portal>的$$typeof就为Symbol('react.portal')<React.Fragment>则为Symbol('react.fragment')，还有memo,lazy,forwardRef都类似。Why Do React Elements Have a $$typeof Property? 【PS：为了安全】tag tag是针对fiber的类型标识（type和$$typeof是针对element或者说JSX的返回值）主要为了react处理不同任务。
... 待补充