Лучшее место / способ объявить статические данные в React - PullRequest
Новая
       7

Лучшее место / способ объявить статические данные в React

0 голосов
/ 02 июня 2018

Я читаю в Интернете, пытаясь найти какой-то решительный или предпочтительный метод объявления статических данных, переменных в реагировании, поэтому я хотел бы услышать ваше мнение.

Это относится к реакциям без учета состояния и компонентам класса.

Допустим, у меня есть массив с цветами, которые я хочу использовать где-то внутри React return(). 

const colors = ["red, "green", "blue"];

1) Объявите его внутри render()

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

2) Объявите его в конструкторе как глобальную переменную 

this.colors = ["red, "green", "blue"];

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

3) Объявить его как возвращение функции, размещенной внутри компонента React, но вне render().Мы вызываем функцию из React return()

4) Я думаю, что где-то видел, используя defaultProps.

Есть ли лучшая практика?

Ответы [ 3 ]

0 голосов
/ 02 июня 2018

Несколько распространенных подходов -

объявить его над классом или в начале файла после импорта

, если это константы, специфичные для файла. 

const CONST1 = [0,1,2,];

class xxx extends yy {
 ....
}

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

что-то вроде

файл json

файл a.json 

{
 "color": "red"
}

использование b.js 

 import constant from 'constants/a.json';

 console.log(constant.color);

или даже global.color = 'red', которые я бы не советовал использовать

0 голосов
/ 06 апреля 2019

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

import React from 'react';

class Example extends React.Component {
  // never changes, but may be used in other places, such as parent components
  static displayName = 'Example';

  state = {
    someStateData: 'World'
  };

  render() {
    const { someStateData } = this.state;
    // do work
    return <p>Hello {someStateData}</p>;
  }
}

export default Example;
0 голосов
/ 02 июня 2018

Ну, я думаю, это зависит от ваших потребностей, большинства случаев 2 и 3 может быть достаточно.Я видел несколько исходных источников (например, create-реагирование-приложение, реакция-нативные-карты), и все они обрабатывают эти константы и «глобальные ресурсы» одинаково:

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

...