我尝试从ReactJS理解示例:
class App extends Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
this.date = new Date(); // why not just this.date
}
render() {
return (
<div>
<h1>App Hello, {this.state.date.toLocaleTimeString()}.</h1>
<h2>{ this.date.toLocaleTimeString() }</h2> //same result
</div>
);
}
}
为什么我应该使用this.state.date而不是仅this.date?
为了更新this.date,我还可以使用setter,例如setDate().
解决方法:
如果通常在组件生命周期内不更改属性,那么您是对的-结果将相同.但是,如果您要更改此属性,那么您决定使用this.someProperty时,您的react组件将不会意识到这些更改,因为在初始安装后,仅当setState(这会更新this.state对象)时才重新渲染React组件)被调用,父组件被重新渲染或forceUpdate被调用.因此,如果您希望在更改某些属性时重新呈现组件,则应将其存储在状态对象中并使用setState更新.回到您的示例:如果使用setDate更新this.date,则您的组件将不会意识到此操作,并且仍会显示旧值.如果使用此:
this.setState({date: '2016'})
它将更新this.state.date,React将意识到这一更改,并将重新渲染您的组件以显示当前日期值.