функция размещения лучшие практики

Question

У меня есть следующий код

 browserClick = () => {
    console.log("test");
  };

  constructor() {
    super();
    this.state = {};
  }
  render() {

    const browserClick = () => {
      console.log("test");
    };

Я просто хочу знать, в чем разница между объявлением функции перед "render ()" и объявлением функции внутри Render.Есть ли какой-то конкретный сценарий, когда мне нужно объявить функцию снаружи и внутри?Я новичок в React, поэтому хотел знать, что является лучшим методом при объявлении функции.

TIA

Answer 1

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

Если вы объявите его вне объявления класса, он станет глобальной переменной / функцией без доступа к this свойствам класса (включая this.props и / или this.state), если вы не передадите что-либо в качестве параметра. Наилучший подход, возможно, состоит в том, чтобы поместить его в класс, но вне рендера, а затем вызвать его с помощью this.browserClick. В конце концов, вы должны использовать то, что соответствует вашим потребностям.

Answer 2

Внешнее объявление, такое как ваш код, создаст статический дескриптор функции, если вы передадите его как свойство дочерним компонентам (расширение от PureComponent), это не приведет к визуализации дочернего компонента.Внутри объявления вы будете передавать разные дескрипторы функций дочернему компоненту при каждом вызове рендера.

Answer 3

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

Если у вас есть объявление функции или объявление переменной внутри вашего метода render, он будет постоянно обновляться-создано на каждом рендере.

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

Вот тест, который вы можете запустить, чтобы убедиться в этом: https://jsperf.com/inner-function-vs-global-function

---

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

Answer 4

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

Один из сценариев создания функции в методе рендеринга - это когда вам нужно создать замыкание для некоторого значения.Например, если вы отображаете массив, и ваша функция должна иметь доступ к индексу каждого элемента массива.В этом случае вы, вероятно, создадите встроенную функцию для каждого элемента.