Изучаю сейчас 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>
);
}
Я например уже знаю, почему при задании нового состояния на основании значений текущего, лучше помещать текущее в переменную. Но здесь случай ведь другой.
Есть какая-нибудь реальная причина использовать промежуточные переменные в данных случаях?
Greeting
код очень избыточен и должен быть так написан как вариант:return props.isLoggedIn ? <UserGreeting /> : <GuestGreeting />
. А вообще пишут так для того, чтобы везде не писатьthis.state
(мне лень лично) и я стараюсь получать вrender
те состояния которые нужны так:const { isLogin, isCount } = this.state;
(та же вещь и из this.props)/ Плюс вложенность переменной может быть большойthis.props.first.second.thirt.isLogin
что не очень удобно везде писать. Если что оформлю как ответ. – Dmitrii Sedov 11 апр '20 в 8:25