我目前正在从官方文档中学习 React,并注意到了这件事。在组件和道具、状态和生命周期部分,他们直接使用道具和状态:
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>
);
}
}
但是在下一章中,例如,条件渲染,他们已经转向这种方法,首先将值放在中间变量中:
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>
);
}
例如,我已经知道为什么在根据当前状态的值设置新状态时,最好将当前状态放在一个变量中。但这里的情况不同。
在这些情况下是否有任何真正的理由使用中间变量?