javascript-ReactJS this.state

我尝试从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将意识到这一更改,并将重新渲染您的组件以显示当前日期值.

上一篇:javascript-未定义的React Router Props


下一篇:javascript-React / Redux-假设我们有两个单独的待办事项列表,分别是已完成和未完成