javascript-ReactJS this.state

2019-11-11 18:37:51 阅读：262 来源： 互联网

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

标签：ecmascript-6,reactjs,javascript
来源： https://codeday.me/bug/20191111/2021684.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-ReactJS this.state