maxjhandsome
/
react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tutorial: Fetch data in componentDidMount instead 

In a world where this component was server-rendered, we wouldn't want to call the data-fetching code there so it makes more sense to have it in componentDidMount.
This commit is contained in:
Ben Alpert 2014-07-09 12:02:54 -07:00
parent cd1adc5303
commit 774f5a022e
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/docs/tutorial.md
View File

@ -386,7 +386,7 @@ var CommentBox = React.createClass({
getInitialState: function() { getInitialState: function() {
return {data: []}; return {data: []};
}, },
componentWillMount: function() { componentDidMount: function() {
$.ajax({ $.ajax({
url: this.props.url, url: this.props.url,
dataType: 'json', dataType: 'json',
@ -410,7 +410,7 @@ var CommentBox = React.createClass({
}); });
``` ```
Here, `componentWillMount` is a method called automatically by React before a component is rendered. The key to dynamic updates is the call to `this.setState()`. We replace the old array of comments with the new one from the server and the UI automatically updates itself. Because of this reactivity, it is only a minor change to add live updates. We will use simple polling here but you could easily use WebSockets or other technologies. Here, `componentDidMount` is a method called automatically by React when a component is rendered. The key to dynamic updates is the call to `this.setState()`. We replace the old array of comments with the new one from the server and the UI automatically updates itself. Because of this reactivity, it is only a minor change to add live updates. We will use simple polling here but you could easily use WebSockets or other technologies.
```javascript{3,19-20,34} ```javascript{3,19-20,34}
// tutorial14.js // tutorial14.js
@ -430,7 +430,7 @@ var CommentBox = React.createClass({
getInitialState: function() { getInitialState: function() {
return {data: []}; return {data: []};
}, },
componentWillMount: function() { componentDidMount: function() {
this.loadCommentsFromServer(); this.loadCommentsFromServer();
setInterval(this.loadCommentsFromServer, this.props.pollInterval); setInterval(this.loadCommentsFromServer, this.props.pollInterval);
}, },
@ -538,7 +538,7 @@ var CommentBox = React.createClass({
getInitialState: function() { getInitialState: function() {
return {data: []}; return {data: []};
}, },
componentWillMount: function() { componentDidMount: function() {
this.loadCommentsFromServer(); this.loadCommentsFromServer();
setInterval(this.loadCommentsFromServer, this.props.pollInterval); setInterval(this.loadCommentsFromServer, this.props.pollInterval);
}, },
@ -613,7 +613,7 @@ var CommentBox = React.createClass({
getInitialState: function() { getInitialState: function() {
return {data: []}; return {data: []};
}, },
componentWillMount: function() { componentDidMount: function() {
this.loadCommentsFromServer(); this.loadCommentsFromServer();
setInterval(this.loadCommentsFromServer, this.props.pollInterval); setInterval(this.loadCommentsFromServer, this.props.pollInterval);
}, },
@ -668,7 +668,7 @@ var CommentBox = React.createClass({
getInitialState: function() { getInitialState: function() {
return {data: []}; return {data: []};
}, },
componentWillMount: function() { componentDidMount: function() {
this.loadCommentsFromServer(); this.loadCommentsFromServer();
setInterval(this.loadCommentsFromServer, this.props.pollInterval); setInterval(this.loadCommentsFromServer, this.props.pollInterval);
}, },