React learning summary (I)

Time:2022-5-16

Label < react StrictMode>

Note: strict mode check only runs in development mode; They do not affect production builds.

Strictmode currently helps:
1. Identify unsafe life cycles
2. Warning about using obsolete string ref API
3. Warning about using the obsolete finddomnode method
4. Detect unexpected side effects
5. Detect obsolete context API

Lifecycle warning
Outdated component life cycle often leads to unsafe coding practices. The specific functions are as follows:

1、componentWillMount
2、componentWillReceiveProps
3、componentWillUpdate

16.3: introduce aliases for unsafe life cycles

1、UNSAFE_componentWillMount
2、UNSAFE_componentWillReceiveProps
3、UNSAFE_componentWillUpdate

Warning for ref API
Reference address: https://wuqiang.blog.csdn.net/article/details/104153645

Detect side effects
The lifecycle of the rendering phase includes the following class component methods:

1、constructor
2、componentWillMount (or UNSAFE_componentWillMount)
3、componentWillReceiveProps (or UNSAFE_componentWillReceiveProps)
4、componentWillUpdate (or UNSAFE_componentWillUpdate)
5、getDerivedStateFromProps
6、shouldComponentUpdate
7、render
8. Setstate update function (first parameter)

Because the above methods may be called many times, it is very important not to write code related to side effects inside them. Ignoring this rule can lead to various problems, including memory leaks and or invalid application states. Unfortunately, these problems are difficult to find because they are usually uncertain.

Strict mode can’t automatically detect your side effects, but it can help you find them and make them more deterministic. This operation is achieved by deliberately repeatedly calling the following functions:

1. Constructor, render and shouldcomponentupdate methods of class component
2. Class component’s lifecycle method getderivedstatefromprops
3. Function component body
4. State update function (i.e. the first parameter of setstate)
5. Function components use usestate, usememo or usereducer

Context API warning

Context API warning
Outdated context APIs are error prone and will be removed in future major releases. In all 16 It will be displayed in strict mode, but it will still be valid in the following versions:

Reference documents