Стоит ли помещать значения из props и state в промежуточную переменную перед использованием в React?
Изучаю сейчас React по официальной доке и обратил внимание вот на такую вещь. В разделе Components and Props, State and Lifecycle они используют пропсы и стейт напрямую:
function Avatar(props) {
return (
<img className="Avatar"
src={props.user.avatarUrl} <-----
alt={props.user.name} <-----
/>
);
}
...
class Clock extends React.Component {
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.props.date.toLocaleTimeString()}.</h2> <-----
</div>
);
}
}
Но в следующей главе, например, Conditional Rendering, уже переходят на вот такой подход, с предварительным помещением значения в промежуточную переменную:
function Greeting(props) {
const isLoggedIn = props.isLoggedIn; <-----
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
...
render() {
const isLoggedIn = this.state.isLoggedIn; <-----
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}
Я например уже знаю, почему при задании нового состояния на основании значений текущего, лучше помещать текущее в переменную. Но здесь случай ведь другой.
Есть какая-нибудь реальная причина использовать промежуточные переменные в данных случаях?
Ответы (1 шт):
Может я не прав и умные дяди укажут мне на мою не правоту но, я считаю, что в Greeting код очень избыточен и должен быть так написан как вариант:
return props.isLoggedIn ? <UserGreeting /> : <GuestGreeting />
А вообще пишут так для того, чтобы везде не писать this.state (мне лень лично) и я стараюсь получать в render те состояния которые нужны так:
const { isLogin, isCount } = this.state;
(та же вещь и из this.props) Плюс вложенность переменной может быть большой this.props.first.second.thirt.isLogin что не очень удобно везде писать