Разработка спецификации кода Team React

спецификация кода React.js
Разработка спецификации кода Team React

предисловие

Уровень каждого разработчика в команде разный, и техническая направленность разная.Если нет ссылки и ограничения спецификации кода, код в проекте будет сильно отличаться по стилю и сложно поддерживать.Чтобы обеспечить единообразие качества и стиля кода, Копия «Спецификации кода Team React», чтобы разработчики всей команды могли ссылаться на эту спецификацию кода для кодирования, чтобы стиль кода команды был унифицирован и прост в обслуживании. Если у вашей команды еще нет такой спецификации кода React, возможно, это то, что вам нужно; если у вашей команды уже есть спецификация кода React, эта спецификация может стать вишенкой на торте.

Примечание. Спецификации кода для JS, SCSS, Vue можно найти в другой статье, написанной автором ранее.«Список контрольных списков проверки кода командой разработчиков».

Я много работал над организацией в течение долгого времени, и я надеюсь вручную поставить лайк и поощрить ~

адрес гитхаба:кликните сюда, если вам нравится или есть вдохновение, пожалуйста, помогите поставить звезду ~, что также является поощрением для автора.

1. Основные правила

  • Файл объявляет компонент:Хотя можно объявить несколько компонентов React в одном файле, лучше этого не делать, рекомендуется объявлять один компонент React в файле и экспортировать только один компонент;
  • Используйте выражения JSX:Не используйте React.createElement;
  • Сценарии использования функциональных компонентов и компонентов класса:Если определенный компонент не требует свойств и состояния, рекомендуется определить компонент как компонент функции, в противном случае он определяется как компонент класса класса.

2. Объявление компонента

(1) рекомендуется, чтобы имя компонента и имя файла, определяющего компонент, были согласованы;

рекомендовать:

import Footer from './Footer';

Не рекомендуется:

import Footer from './Footer/index';

(2) Не используйте свойство displayName для определения имени компонента, вы должны объявить имя компонента непосредственно после ключевого слова класса или функции.

рекомендовать:

export default class MyComponent extends React.Component {
}

Не рекомендуется:

export default React.Component({
  displayName: 'MyComponent',
});

3. Именование в React

  • Название компонента:Рекомендуется использовать имена с большим верблюжьим регистром;
  • Имя свойства:React DOM использует camelCase для определения имен свойств вместо соглашения об именах свойств HTML;
  • атрибут стиля стиля:Объекты JavaScript с именованными свойствами в стиле camelCase;

рекомендовать:

// 组件名称
MyComponent
// 属性名称
onClick
// 样式属性
backgroundColor

4, внимание к написанию JSX

4.1 Этикетки

(1) Всегда используйте самозакрывающиеся теги, если у тега нет дочерних элементов.

рекомендовать:

// Good
<Component />

Не рекомендуется:

<Component></Component>

(2) Если метка имеет несколько строк атрибутов, закрывающая метка должна начинаться с новой строки.

рекомендовать:

<Component
  bar="bar"
  baz="baz" 
/>

Не рекомендуется:

<Component
  bar="bar"
  baz="baz" />

(3) Оставьте пробел перед самозакрывающимся тегом.

рекомендовать:

<Foo />

Не рекомендуется:

<Foo/>

<Foo                 />

<Foo
 />

(4) Если компонент состоит из строк, используйте круглые скобки для переноса тегов JSX.

рекомендовать:

  render() {
    return (
      <MyComponent className="long body" foo="bar">
        <MyChild />
      </MyComponent>
    );
  }

Не рекомендуется:

  render() {
    return <MyComponent className="long body" foo="bar">
             <MyChild />
           </MyComponent>;
  }

4.2. Выравнивание

Синтаксис JSX использует следующие выравнивания:

// 推荐
<Foo
  superLongParam="bar"
  anotherSuperLongParam="baz"
/>

// 如果组件的属性可以放在一行（一个属性时）就保持在当前一行中
<Foo bar="bar" />

// 多行属性采用缩进
<Foo
  superLongParam="bar"
  anotherSuperLongParam="baz"
>
  <Quux />
</Foo>

// 不推荐
<Foo superLongParam="bar"
     anotherSuperLongParam="baz" />

4.3, кавычки

Атрибуты JSX используют двойные кавычки, другие JS используют одинарные кавычки, потому что атрибуты JSX не могут содержать экранированные кавычки, поэтому удобнее использовать двойные кавычки при вводе сокращений, таких как «нельзя».

рекомендовать:

<Foo bar="bar" />

<Foo style={{ left: '20px' }} />

Не рекомендуется:

<Foo bar='bar' />
    
<Foo style={{ left: "20px" }} />

5. Стиль письма

В React вы можете использовать встроенный стиль стиля или использовать атрибут className для ссылки на класс CSS, определенный во внешней таблице стилей CSS.Мы рекомендуем использовать className для определения стиля. Рекомендуется использовать SCSS для замены традиционного метода записи CSS. Чтобы узнать о конкретном методе записи SCSS для повышения эффективности, см.Ранее обобщенные статьи.

6. DefaultProps использует статические определения свойств

DefaultProops рекомендует использовать статические атрибуты и не рекомендуется определять в классе.

рекомендовать:

class Example extends React.Component {
  static defaultProps = {
    name: 'stranger'
  }

  render() {
   // ...
  }
}

Не рекомендуется:

class Example extends React.Component {
  render() {
    // ...
  }
}

Example.propTypes = {
  name: PropTypes.string
};

7. Настройка ключевого атрибута

Ключ помогает React определить, какие элементы были изменены, например добавлены или удалены. Поэтому вы должны присвоить определенный идентификатор каждому элементу в массиве. Когда элемент не имеет идентификатора, в крайнем случае вы можете использовать индекс индекса элемента в качестве ключа, но в основном, если порядок элементов списка может измениться, если вы используете индекс в качестве значения ключа, потому что это приведет к привести к снижению производительности, а также может вызвать проблемы с состоянием компонента.

рекомендовать:

{todos.map(todo => (
  <Todo
    {...todo}
    key={todo.id}
  />
))}

Не рекомендуется:

{todos.map((todo, index) =>
  <Todo
    {...todo}
    key={index}
  />
)}

8. Привяжите обработчики событий к компонентам

React предоставляет 4 метода для обработчиков событий привязки компонентов, включая синтаксис полей открытого класса, привязку в конструкторе, использование функции стрелки в обратном вызове и использование Function.prototype.bind для привязки, мы рекомендуем использовать синтаксис полей открытого класса, использовать запись функции стрелки (передавая параметры обработчикам событий), когда требования не выполняются.

рекомендовать:

 handleClick = () => {
    console.log('this is:', this);
 }
 <button onClick={this.handleClick}> Click me </button>

Не рекомендуется:

 constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
 }
 handleClick(){
    console.log('this is:', this);
 }
 <button onClick={this.handleClick}> Click me </button>

9. Состояние

9.1. Не изменяйте состояние напрямую

Помимо инициализации состояния, для изменения состояния в других местах необходимо использовать метод setState(), иначе, если вы присвоите значение напрямую, компонент не будет перерисовываться.

рекомендовать:

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

Не рекомендуется:

this.state.comment = 'hello';

9.2 Обновление состояния может быть асинхронным

Из соображений производительности React может объединять несколько вызовов setState() в один вызов, поскольку this.props и this.state могут обновляться асинхронно, в этом случае setState() должна получать функцию, а не объект.

рекомендовать:

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

Не рекомендуется:

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

10. Порядок кодирования компонентов

Компоненты должны иметь строгий порядок кода, что хорошо для обслуживания кода.Мы рекомендуем согласованность порядка кода в каждом компоненте.

class Example extends Component {
    // 静态属性
    static defaultProps = {}

    // 构造函数
    constructor(props) {
        super(props);
        this.state={}
    }

    // 声明周期钩子函数
    // 按照它们执行的顺序
    // 1. componentWillMount
    // 2. componentWillReceiveProps
    // 3. shouldComponentUpdate
    // 4. componentDidMount
    // 5. componentDidUpdate
    // 6. componentWillUnmount
    componentDidMount() { ... }

    // 事件函数/普通函数
    handleClick = (e) => { ... }

    // 最后，render 方法
    render() { ... }
}

11. Используйте компоненты высшего порядка

Используйте компоненты более высокого порядка для решения сквозных проблем вместо использования примесей.Документация;

12. Избегайте ненужного рендеринга

Хук shouldComponentUpdate и класс React.PureComponent позволяют избежать ненужных рендеров при изменении состояния и свойств. Функция-ловушка shouldComponentUpdate должна реализовать логику поверхностного сравнения вручную, а класс React.PureComponent выполняет поверхностное сравнение свойств и состояния по умолчанию и снижает вероятность пропуска необходимых обновлений. Мы рекомендуем использовать React.PureComponent, чтобы избежать ненужных рендеров.

13. Улучшение статуса

Если несколько компонентов должны отражать одни и те же изменяющиеся данные, рекомендуется продвигать общее состояние к ближайшему общему родительскому компоненту, таким образом, полагаясь на поток данных сверху вниз, а не пытаясь синхронизировать состояние между компонентами.

14. Рекомендуется контекст

Если свойство необходимо использовать между компонентами на разных уровнях дерева компонентов, мы должны использовать Context, чтобы обеспечить способ совместного использования этого свойства между компонентами, а не явно передавать свойства через дерево компонентов.

15. Написание ссылок

Рефы предоставляют способ доступа к узлам DOM или элементам React, созданным в методе рендеринга. Мы рекомендуем использоватьКак создатьRef APIилиКак вызвать функциюИспользуйте Refs вместо this.refs.textВведите устаревший способ доступа к refs, потому что он имеет некоторыепроблема.

16. Загрузка маршрута

Рекомендуется использоватьОтложенная загрузка маршрутаКонтент, который необходим текущим пользователям для значительного повышения производительности вашего приложения. Хотя это не уменьшает общий размер кода приложения, вы можете избежать загрузки кода, который никогда не понадобится пользователю, и уменьшить объем кода, который необходимо загрузить при начальной загрузке.

рекомендовать:

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

Не рекомендуется:

import OtherComponent from './OtherComponent';

17. Когда AJAX инициирует запрос

Рекомендуется инициировать запросы AJAX в функции жизненного цикла componentDidMount. Делая это, вы можете получить данные, возвращаемые запросом AJAX, и обновить компонент с помощью setState.

Я много работал над организацией в течение долгого времени, и я надеюсь вручную поставить лайк и поощрить ~

адрес гитхаба:кликните сюда, если вам нравится или есть вдохновение, пожалуйста, помогите поставить звезду ~, что также является поощрением для автора.

использованная литература:

1,GitHub.com/Хан/стиль-…

2,сегмент fault.com/ah/119000001…

Категории