Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

React development specification (part 1)

9, the State

9.1. Do not modify state directly

To change state anywhere other than state initialization, use the setState() method, otherwise the component will not be rerendered if it is assigned directly.

Recommendation:

this.setState({comment: 'Hello'});
Copy the code

Is not recommended:

this.state.comment = 'hello';
Copy the code

9.2 State updates may be asynchronous

React may combine multiple setState() calls into a single call for performance reasons; Because this.props and this.state might update asynchronously, this scenario requires setState() to receive a function instead of an object.

Recommendation:

this.setState((state, props) = > ({
  counter: state.counter + props.increment
}));
Copy the code

Is not recommended:

this.setState({
  counter: this.state.counter + this.props.increment,
});
Copy the code

10. Code sequence of components

Components should have a strict code order to facilitate code maintenance, and we recommend consistent code order in each component.

class Example extends Component {
    // Static attributes
    static defaultProps = {}
 
    // constructor
    constructor(props) {
        super(props);
        this.state={}
    }
 
    // Declare the periodic hook function
    // In the order in which they are executed, some hooks are "obsolete" and are not recommended.
    // 1. ComponentWillMount (obsolete)
    / / 2. ComponentWillReceiveProps (obsolete)

    // 3. getDerivedStateFromProps
// 4. shouldComponentUpdate
// 5. getSnapshotBeforeUpdate
    // 6. componentDidMount
    // 7. componentDidUpdate
// 8. componentWillUnmount
 
componentDidMount(){... }// Event function/normal function
    handleClick = (e) = >{... }// Finally render method
    render(){... }}Copy the code

11. Use advanced components

Use HOC to solve crosscutting concerns instead of mixins, which can be documented;

12, avoid unnecessary render

The shouldComponentUpdate hook function and the react. PureComponent class are both methods to avoid unnecessary render when state and props change. The shouldComponentUpdate hook function needs to implement its own shallow comparison logic manually, while the react. PureComponent class defaults to shallow comparisons between props and state and reduces the possibility of skipping necessary updates. We recommend using React.PureComponent to avoid unwanted render.

13. State improvement

If multiple components need to reflect the same change data, it is recommended that the shared state be promoted to the nearest common parent component. Instead of trying to synchronize state across different components, rely on top-down data flow.

14. Context is recommended

If a property is needed between components at different levels of the component tree, we should use Context to provide a way to share the property between components, rather than explicitly passing props through each layer of the component tree.

15. Refs

Refs provides a way to access DOM nodes or React elements created in the Render method:

It is recommended to use Refs using the createRef API or as a callback function,

Instead of using this.refs.textinput to access refs in an outdated way, which has some problems.

16. Route loading

It is recommended to use routing lazy to load content that the current user needs, which can significantly improve the performance of your application. While it doesn’t reduce the overall code volume of your application, you can avoid loading code that users never need, and reduce the amount of code that needs to be loaded during initial loading.

Recommendation:

const OtherComponent = React.lazy(() = > import('./OtherComponent'));
Copy the code

Is not recommended:

import OtherComponent from './OtherComponent';
Copy the code

17. Timing of AJAX requests

It is recommended to make AJAX requests in the life cycle function componentDidMount. By doing so, you can take the data returned by the AJAX request and update the component with setState.

18. Naming conventions for folder file names

Limit the number of lines in a single file

A single file cannot exceed 500 lines. If the number exceeds 500 lines, components need to be split

20. Comment information in the file header

It is recommended to use the VScode plug-in koroFileHeader to automatically generate header comments when creating or modifying files

Contains the following fields:

• @Author: your name
• @Date: 2021-09-28 09:26:47
• @LastEditTime: 2021-09-28 09:26:48
• @LastEditors: Please set LastEditors
• @Description: In User Settings Edit

21. Function comment information

Contains the following fields:

Function description, parameter description, and return value description

22. Constants are uniformly extracted into the constants.ts file

Extract typescript type definition information into the types.ts file

Determine whether to extract it separately based on component complexity (lines of code, lines of type)

Use scenarios for function components and class components

It is recommended to use the function component +hooks in preference