ThirdMirrors
/
cheatsheets
mirror of https://gitee.com/Hawkin99/cheatsheets.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Yep

This commit is contained in:
Rico Sta. Cruz 2015-04-17 18:41:22 +08:00
parent 18ab38aa49
commit afe7916d84
1 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
react.md
View File

@ -116,23 +116,26 @@ Methods and properties you can override. See [component specs](http://facebook.g
| [`displayName: "..."`](http://facebook.github.io/react/docs/component-specs.html#displayname) | Automatically filled by JSX | | [`displayName: "..."`](http://facebook.github.io/react/docs/component-specs.html#displayname) | Automatically filled by JSX |
{:.greycode.no-head} {:.greycode.no-head}
## [Lifecycle](http://facebook.github.io/react/docs/component-specs.html) ## Lifecycle
### Mounting ### Mounting
Before initial rendering occurs. Add your DOM stuff on didMount (events, timers, etc). See [reference](http://facebook.github.io/react/docs/component-specs.html#mounting-componentwillmount).
| `componentWillMount()` | Before rendering (no DOM yet) | | `componentWillMount()` | Before rendering (no DOM yet) |
| `componentDidMount()` | After rendering | | `componentDidMount()` | After rendering |
{:.greycode.no-head.lc} {:.greycode.no-head.lc}
### Updating ### Updating
Called when parents change properties and `.setState()`. These are not called for initial renders. See [reference](http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops).
| `componentWillReceiveProps`*(newProps={})* | Use `setState()` here; not on initial | | `componentWillReceiveProps`*(newProps={})* | Use `setState()` here |
| `shouldComponentUpdate`*(newProps={}, newState={})* | Skips `render()` if returns false | | `shouldComponentUpdate`*(newProps={}, newState={})* | Skips `render()` if returns false |
| `componentWillUpdate`*(newProps={}, newState={})* | Can't use `setState()` here | | `componentWillUpdate`*(newProps={}, newState={})* | Can't use `setState()` here |
| `componentDidUpdate`*(prevProps={}, prevState={})* | Operate on the DOM here | | `componentDidUpdate`*(prevProps={}, prevState={})* | Operate on the DOM here |
{:.greycode.no-head.lc} {:.greycode.no-head.lc}
### Cleanup ### Unmounting
Clear your DOM stuff here (probably done on didMount). See [reference](http://facebook.github.io/react/docs/component-specs.html#unmounting-componentwillunmount).
| `componentWillUnmount()` | Invoked before DOM removal | | `componentWillUnmount()` | Invoked before DOM removal |
{:.greycode.no-head.lc} {:.greycode.no-head.lc}
@ -143,7 +146,7 @@ table.lc tr>:nth-child(1) { width: 50%; }
table.lc tr>:nth-child(2) { text-align: right; } table.lc tr>:nth-child(2) { text-align: right; }
</style> </style>
### Example: before rendering ### Example: loading AJAX data
```js ```js
React.createClass({ React.createClass({
@ -154,9 +157,7 @@ React.createClass({
}, },
render: function () { render: function () {
return ( return <CommentList data={this.state.data} />
<CommentList data={this.state.data} />
);
} }
}); });
``` ```