天天看点

react生命周期

/******************************************* mounting ***********************************************/

* class constructor

* componentwillmount

  被调用一次,在初始渲染之前立即被调用. state不会触发重新渲染

* render

* componentdidmount

  被调用一次, 在初始渲染之后立即被调用. 在生命周期的这个时间点,组件有了一个可被访问的dom内容

 (这样对于数据获取操作而言是很有用的)

/********************************************* unmounting *******************************************/

* componentwillunmount

在一个组件被从com中卸载时候被立即调用。如off一些eventlistener

/*******************************************props change *********************************************/

* componentwillreceiveprops  (与 state change不同的地方)

当一个组件接收到新的props时被调用。在这个函数中调用this.setstate()不会触发一次额外的渲染

* shouldcomponentupdate

这次渲染可以被跳过?

* componentwillupdate

接收到新的props或者state, 渲染之前调用。在这个函数中不允许通过this.setstate对state进行任何更改,

它只能严格地用于准备即将开始的渲染,而不能自己再去触发一次更新

* componentdidupdate

在组件的更新被刷新到dom之后...

/******************** state change *************************.

* componnetwillupdate

属性值由父组件传递到子组件

调用外部的web接口 http://kanbanapi.pro-react.com/cards

[{"id":10812,"title":"read the book","description":"i should read the **whole** book","color":"#bd8d31","status":"in-progress","tasks":[]},{"id":10813,"title":"write some code","description":"code along with the samples in the book at [github](https://github.com/pro-react)","color":"#3a7e28","status":"todo","tasks":[{"id":37900,"name":"contactlist example","done":true},{"id":37901,"name":"kanban example","done":false},{"id":37902,"name":"my own experiments","done":false}]}]

run:

react生命周期

* package.json sample

https://www.sitepoint.com/build-a-basic-crud-app-with-node-and-react/