Определение внутренних переменных класса внутри методов класса с использованием Javascript?
Эти вопросы на самом деле связаны с React JS. Можно ли определять внутренние переменные класса внутри одного из методов класса, а затем использовать его в других методах? Я хочу сделать что-то вроде этого:
class Something extends React.Component {
state = {
value: 'doesnt matter'
};
something = () => {
//a lot is happening in here and at some point I define this.thing
this.thing = 1;
}
increase = () => {
if (this.thing) {
this.thing += 1;
}
}
decrease = () => {
if (this.thing && this.thing > 0) {
this.thing -= 1;
}
}
render() {
return (
<span>this.state.value</span>
);
}
}
Дело в том, что мне не нужно помещать этот this.thing в качестве значения состояния, потому что он мне нужен только для внутренних целей. Имейте в виду, что этот код является всего лишь примером, реальный код немного сложнее, но главный вопрос: можно ли определять внутренние переменные класса (this.thing), как я это делаю в моем примере? А может мне стоит поступить иначе? Что было бы лучше всего?
Вы можете проверить medium.freecodecamp.org/… Просто использовать this, как будто вы делаете, похоже, хороший вариант
@DaniloAssisNobredosSantos. Это хорошая идея, если изменение в thing обязательно должно вызывать повторный рендеринг - в противном случае, я думаю, лучше всего хранить thing в другом месте.
Возможный дубликат Свойство экземпляра в классе React ES6
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Использование конструктора для этого не проблема, но, основываясь на теории реакции и рендеринге пользовательского интерфейса, этот вид использования не будет повторно отрисовываться или следовать шаблону реакции триггера и повторного рендеринга, он будет просто сервером в качестве хранилища для значения, не имеющего ничего общего с жизненным циклом реакции.
class Something extends React.Component {
constructor(props) {
super(props);
// Your thing
this.thing = 0;
this.state = {
value: "doesnt matter."
};
}
something = () => {
//a lot is happening in here and at some point I define this.thing
this.thing = 1;
};
increase = () => {
if (this.thing) {
this.thing += 1;
}
};
decrease = () => {
if (this.thing && this.thing > 0) {
this.thing -= 1;
}
};
render() {
this.something();
console.info(this.thing); // will equal 1.
return <span>{this.state.value}</span>;
}
}
да, я знаю, что могу использовать конструктор и определять там переменные, но вопрос в том, необходимо ли определять все переменные this.something в конструкторе? если да, то почему? Еще одна вещь, касающаяся повторного рендеринга, мне не нужен компонент для повторного рендеринга, когда это значение изменяется, поэтому я знаю об этом. Вопрос все еще остается, это нормальная практика или неправильно использовать такие шаблоны с this.thing, которые я использую в моем примере? :)
Это не проблема и ничего плохого, прежде всего, React - это javascript, а это. {Anything} - действительный прототип класса / объекта.
Итак, нет никаких правил / передовых практик, как и когда это. {что-нибудь} можно определить?
В конструкторе проверьте, как он определен и как транслируется за сценой с помощью babel stackoverflow.com/questions/35774928/…
I don't need to put that this.thing as a state value, because I only need it internally.
state компонента React также следует использовать только для внутренних целей.
What would be the best practice?
Вы можете использовать переменные экземпляра (ivars) вместо состояния повысить производительность, потому что вы можете уменьшить нагрузку на очередь событий. С эстетической точки зрения, ivars часто требует меньше кода. Но обновления состояния обычно предпочтительнее, потому что они запускают повторную визуализацию; эта гарантия делает ваш код легче думать о, так как визуализация никогда не устаревает. В вашем случае функция рендеринга не зависит от this.thing, поэтому можно сохранить ее в ivar.
Как правило, лучше всего инициализировать ivars в конструктор, потому что он запускается первым, поэтому this.thing гарантированно будет готов для использования другими методами:
constructor(props) {
super(props);
this.thing = 0;
}
Я не понимаю, как работает конструктор, и знаю рабочий процесс состояний. Я не уверен в том, могу ли я определять ivars, где хочу, или для этого есть какие-то правила / лучшие практики? Типа, действительно ли нужно определять их в конструкторе? в любом случае спасибо за ответ :)
Вы можете инициализировать ivars где угодно, но вы можете получить неожиданное поведение, если код, который читает this.thing, каким-то образом запускается до инициализации this.thing. Даже если вы запрограммируете это правильно, когда я (сторонний участник) открою вашу кодовую базу, я не уверен, правильно ли вы это сделали. Эта неопределенность устраняется, если вы инициализируете this.thing в конструкторе.
Переменная «вещь» является классом переменных, и к ней можно получить доступ во всех методах, которые вы определяете в этом классе. То же самое, если вы исправите его в своем состоянии: state = {value: "...", thing: null}