React一些细节的理解整理汇总

[LiuL0703]

React为什么不应该在componentWillMount阶段获取数据

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

why-is-getderivedstatefromprops-is-a-static-method

Reconciliation/ Render phase 和 Commit phase

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

why is setState asynchronous?

• Guaranteeing Internal Consistency
• Enabling Concurrent Updates
• Performance optimization

RFClarification: why is setState asynchronous?

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处理不同任务。

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

... 待补充