preface

The purpose of this article is to document the pitfalls of daily development, or the trouble of writing prettier, into 10 rules that avoid formatting and style problems solved by esLint and Prettier’s rule.


rules

You and I agree not to mention the sad past, also promised never to let each other worry ~



1. Forbid the dangerouslySetInnerHTML attribute in DOM elements.

/ / 💢 bad
<div className={classname} dangerouslySetInnerHTML={{ __html: html }} />

/ / ✅ good
const htmlValue = process(html); // escape or get useful msg
<div value={htmlValue} />Copy the code


2. Do not use.bind() in JSX properties. Since new functions are created during render, performance is affected. 

/ / 💢 bad
class Demo extends PureComponent {
  onClick() {
    // ...
  }

  render() {
    return<div onClick={this.onClick.bind(this)} />; }} // ✅good class Demo extends PureComponent {onClick = () => {//... } render() { return <div onClick={this.onClick(this)} />; }}Copy the code


3. Do not pass instance references as render after React 16 May not be synchronized and the timing of the instance method may not be correct.



4. Default values must be set for props that are not isRequired. Components can accept external classnames 

class Demo extends PureComponent {
    static propTypes = {
      visible: PropTypes.bool,
      onChange: PropTypes.func,
      className: PropTypes.string,
    }

    // Props that are not isRequired must be set to default values
    static defaultProps = {
      // Each component should be able to accept className values from the outside world
      className: ' '.visible: false.// The default value of the callback function can use the null function provided by Lodash
      onChange: noop,
    }
}Copy the code


5. Components should not change props and functions should not mutate 

import update from 'immutability-helper';

class Demo extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      data: this.initData(props),
    };
  }
  
  / / 💢 bad
  initData = (props) = > {
    props.data = []
    
    return props;
  }
  
  / / ✅ good
  initData = (props) = > {
    return update(props, {
      data: { $set: []}}); }}Copy the code


6. Do not use vague type validation. Ts is recommended, but the rules for TS are the same 

class Demo extends React.Component {... }/ / 💢 bad
Demo.propTypes = {
  list: PropTypes.array,
  info: PropTypes.onject,
  status: PrpoTypes.any
};

/ / ✅ good
Demo.propTypes = {
  list: PropTypes.arrayOf(PropTypes.string),
  info: PropTypes.shape({
    title: ProTypes.string,
    count: ProTypes.number
  }),
  status: PrpoTypes.bool
};Copy the code


7. The component must have componentDidCatch, in which information must be reported. 

class Demo extends React.Component {
  constructor(props) {     
    super(props);     
    this.state = { error: false };
  }
  
  componentDidCatch(error, info) {     
    this.setState({ error, info });
  }
  
  render() {
    if (this.state.error) {
      return <ErrorUI />;
    }
    
    return <NormalUI />; }}Copy the code


8. Do not use index for anything, including but not limited to 1. Component key, 2. Entity ID, 3. Unique flag bit 😑



9. Style files should have their own scope 

// 💢 bad.title {... } // ✅ good.report-list {... .title { ... }}Copy the code


10. Watch out for style side effects when removing component references 

// A component
import React, { PureComponent } from 'react';
import './index.less'; // Style files are introduced as side effects

class A extends PureComponent {... }// B component
import A from '.. components/A'; // The style of component A is used even if the logic of component A is not used

class B extends PureComponet {... }Copy the code