Skip to content

Commit 9611a4b

Browse files
zpaozpao
committed
Merge pull request #3691 from jonscottclark/patch-1
Add 'cache: false' to $.ajax when fetching comments (docs/tutorial)
1 parent 0493fa2 commit 9611a4b

File tree

3 files changed

+30
-15
lines changed

3 files changed

+30
-15
lines changed

‎docs/docs/tutorial.ja-JP.md

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -387,7 +387,7 @@ var CommentBox = React.createClass({
387387

388388
注意: ここからは AJAX アプリケーションを作っていくので、自分のファイルシステム上ではなく Web サーバを使ってアプリを作る必要があります。残りのチュートリアルに必要な機能は [冒頭で紹介した](#running-a-server) サーバに含まれています。ソースコードは [GitHub に](https://github.com/reactjs/react-tutorial/)用意してあります。
389389

390-
```javascript{6-17}
390+
```javascript{6-18}
391391
// tutorial13.js
392392
var CommentBox = React.createClass({
393393
getInitialState: function() {
@@ -397,6 +397,7 @@ var CommentBox = React.createClass({
397397
$.ajax({
398398
url: this.props.url,
399399
dataType: 'json',
400+
cache: false,
400401
success: function(data) {
401402
this.setState({data: data});
402403
}.bind(this),
@@ -419,13 +420,14 @@ var CommentBox = React.createClass({
419420

420421
さて、`componentDidMount` はコンポーネントがレンダリングされたときに React が自動的に呼び出すメソッドです。動的な更新の鍵となるのは `this.setState()` の呼び出し方です。ここでは、古いコメントの配列をサーバから取ってきた新しい配列に置き換え、UI を自動的に更新させてみましょう。このような reactivity（反応性・柔軟性）のおかげで、リアルタイム更新を最小限にすることが出来ます。次のコードではシンプルなポーリングをしていますが、WebSockets や他の方法でも簡単に実現できます。
421422

422-
```javascript{3,14,19-20,34}
423+
```javascript{3,15,20-21,35}
423424
// tutorial14.js
424425
var CommentBox = React.createClass({
425426
loadCommentsFromServer: function() {
426427
$.ajax({
427428
url: this.props.url,
428429
dataType: 'json',
430+
cache: false,
429431
success: function(data) {
430432
this.setState({data: data});
431433
}.bind(this),
@@ -525,13 +527,14 @@ React がコンポーネントにイベントハンドラを登録する際は c
525527

526528
ここでは子のコンポーネントから親に向かって、いつもとは逆方向にデータを返す必要があります。まず、親のコンポーネントに新しいコールバック関数（`handleCommentSubmit`）を定義します。続いて `render` メソッド内にある子のコンポーネントにコールバックを渡すことで、`onCommentSubmit` イベントとコールバックを結び付けています。こうすることで、イベントが発生するたびにコールバックが呼び出されます。
527529

528-
```javascript{15-17,30}
530+
```javascript{16-18,31}
529531
// tutorial17.js
530532
var CommentBox = React.createClass({
531533
loadCommentsFromServer: function() {
532534
$.ajax({
533535
url: this.props.url,
534536
dataType: 'json',
537+
cache: false,
535538
success: function(data) {
536539
this.setState({data: data});
537540
}.bind(this),
@@ -593,13 +596,14 @@ var CommentForm = React.createClass({
593596

594597
こうしてコールバックが出来たので、あとはサーバにコメントを送信してリストをリフレッシュすれば完璧です。
595598

596-
```javascript{16-27}
599+
```javascript{17-28}
597600
// tutorial19.js
598601
var CommentBox = React.createClass({
599602
loadCommentsFromServer: function() {
600603
$.ajax({
601604
url: this.props.url,
602605
dataType: 'json',
606+
cache: false,
603607
success: function(data) {
604608
this.setState({data: data});
605609
}.bind(this),
@@ -645,13 +649,14 @@ var CommentBox = React.createClass({
645649

646650
アプリケーションに必要な機能は一通り実装できました。しかし、フォームからコメントを送信しても、サーバからのレスポンスが来るまで自分のコメントはリストに載らないため、アプリの動作は遅く感じます。ここでは、送信したコメントをリストに先読みさせて、アプリの体感速度をアップさせましょう。
647651

648-
```javascript{16-18}
652+
```javascript{17-19}
649653
// tutorial20.js
650654
var CommentBox = React.createClass({
651655
loadCommentsFromServer: function() {
652656
$.ajax({
653657
url: this.props.url,
654658
dataType: 'json',
659+
cache: false,
655660
success: function(data) {
656661
this.setState({data: data});
657662
}.bind(this),

‎docs/docs/tutorial.ko-KR.md

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -388,7 +388,7 @@ var CommentBox = React.createClass({
388388

389389
주의: 우리의 앱이 AJAX 애플리케이션으로 변화하고 있기 때문에, 이제 파일 시스템의 파일을 참조하는 대신 웹서버를 사용하도록 앱을 개발해야 합니다. [위에서 언급한 바와 같이](#running-a-server), 우리는 튜토리얼의 나머지 부분에 필요한 기능을 제공하는 서버를 몇 가지 준비해 놓았습니다. [GitHub에 올려놓았으니](https://github.com/reactjs/react-tutorial) 확인해 보세요.
390390

391-
```javascript{6-17}
391+
```javascript{6-18}
392392
// tutorial13.js
393393
var CommentBox = React.createClass({
394394
getInitialState: function() {
@@ -398,6 +398,7 @@ var CommentBox = React.createClass({
398398
$.ajax({
399399
url: this.props.url,
400400
dataType: 'json',
401+
cache: false,
401402
success: function(data) {
402403
this.setState({data: data});
403404
}.bind(this),
@@ -420,13 +421,14 @@ var CommentBox = React.createClass({
420421

421422
여기서 `componentDidMount`는 컴포넌트가 렌더링 된 다음 React에 의해 자동으로 호출되는 메소드입니다. 동적 업데이트의 핵심은 `this.setState()`의 호출입니다. 우리가 이전의 댓글 목록을 서버에서 넘어온 새로운 목록으로 변경하면 자동으로 UI가 업데이트 될 것입니다. 이 반응성 덕분에 실시간 업데이트에 아주 작은 수정만 가해집니다. 우리는 여기선 간단한 폴링을 사용할 것이지만 웹소켓등의 다른 기술도 쉽게 사용할 수 있습니다.
422423

423-
```javascript{3,14,19-20,34}
424+
```javascript{3,15,20-21,35}
424425
// tutorial14.js
425426
var CommentBox = React.createClass({
426427
loadCommentsFromServer: function() {
427428
$.ajax({
428429
url: this.props.url,
429430
dataType: 'json',
431+
cache: false,
430432
success: function(data) {
431433
this.setState({data: data});
432434
}.bind(this),
@@ -526,13 +528,14 @@ React는 카멜케이스 네이밍 컨벤션으로 컴포넌트에 이벤트 핸
526528

527529
자식 컴포넌트가 그의 부모에게 데이터를 넘겨줄 필요가 있습니다. 부모의 `render` 메소드에서 새로운 콜백(`handleCommentSubmit`)을 자식에게 넘겨주고, 자식의 `onCommentSubmit` 이벤트에 그것을 바인딩해주는 식으로 구현합니다. 이벤트가 작동될때(triggered)마다, 콜백이 호출됩니다:
528530

529-
```javascript{15-17,30}
531+
```javascript{16-18,31}
530532
// tutorial17.js
531533
var CommentBox = React.createClass({
532534
loadCommentsFromServer: function() {
533535
$.ajax({
534536
url: this.props.url,
535537
dataType: 'json',
538+
cache: false,
536539
success: function(data) {
537540
this.setState({data: data});
538541
}.bind(this),
@@ -594,13 +597,14 @@ var CommentForm = React.createClass({
594597

595598
이제 콜백이 제자리를 찾았습니다. 우리가 할 일은 서버에 요청을 날리고 목록을 업데이트하는 것 뿐입니다:
596599

597-
```javascript{16-27}
600+
```javascript{17-28}
598601
// tutorial19.js
599602
var CommentBox = React.createClass({
600603
loadCommentsFromServer: function() {
601604
$.ajax({
602605
url: this.props.url,
603606
dataType: 'json',
607+
cache: false,
604608
success: function(data) {
605609
this.setState({data: data});
606610
}.bind(this),
@@ -646,13 +650,14 @@ var CommentBox = React.createClass({
646650

647651
우리의 애플리케이션은 이제 모든 기능을 갖추었습니다. 하지만 댓글이 목록에 업데이트되기 전에 완료요청을 기다리는 게 조금 느린듯한 느낌이 드네요. 우리는 낙관적 업데이트를 통해 댓글이 목록에 추가되도록 함으로써 앱이 좀 더 빨라진 것처럼 느껴지도록 할 수 있습니다.
648652

649-
```javascript{16-18}
653+
```javascript{17-19}
650654
// tutorial20.js
651655
var CommentBox = React.createClass({
652656
loadCommentsFromServer: function() {
653657
$.ajax({
654658
url: this.props.url,
655659
dataType: 'json',
660+
cache: false,
656661
success: function(data) {
657662
this.setState({data: data});
658663
}.bind(this),

‎docs/docs/tutorial.md

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -387,7 +387,7 @@ We'll use jQuery to help make an asynchronous request to the server.
387387

388388
Note: because this is becoming an AJAX application you'll need to develop your app using a web server rather than as a file sitting on your file system. [As mentioned above](#running-a-server), we have provided several servers you can use [on GitHub](https://github.com/reactjs/react-tutorial/). They provide the functionality you need for the rest of this tutorial.
389389

390-
```javascript{6-17}
390+
```javascript{6-18}
391391
// tutorial13.js
392392
var CommentBox = React.createClass({
393393
getInitialState: function() {
@@ -397,6 +397,7 @@ var CommentBox = React.createClass({
397397
$.ajax({
398398
url: this.props.url,
399399
dataType: 'json',
400+
cache: false,
400401
success: function(data) {
401402
this.setState({data: data});
402403
}.bind(this),
@@ -419,13 +420,14 @@ var CommentBox = React.createClass({
419420

420421
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.
421422

422-
```javascript{3,14,19-20,34}
423+
```javascript{3,15,20-21,35}
423424
// tutorial14.js
424425
var CommentBox = React.createClass({
425426
loadCommentsFromServer: function() {
426427
$.ajax({
427428
url: this.props.url,
428429
dataType: 'json',
430+
cache: false,
429431
success: function(data) {
430432
this.setState({data: data});
431433
}.bind(this),
@@ -525,13 +527,14 @@ When a user submits a comment, we will need to refresh the list of comments to i
525527

526528
We need to pass data from the child component back up to its parent. We do this in our parent's `render` method by passing a new callback (`handleCommentSubmit`) into the child, binding it to the child's `onCommentSubmit` event. Whenever the event is triggered, the callback will be invoked:
527529

528-
```javascript{15-17,30}
530+
```javascript{16-18,31}
529531
// tutorial17.js
530532
var CommentBox = React.createClass({
531533
loadCommentsFromServer: function() {
532534
$.ajax({
533535
url: this.props.url,
534536
dataType: 'json',
537+
cache: false,
535538
success: function(data) {
536539
this.setState({data: data});
537540
}.bind(this),
@@ -593,13 +596,14 @@ var CommentForm = React.createClass({
593596

594597
Now that the callbacks are in place, all we have to do is submit to the server and refresh the list:
595598

596-
```javascript{16-27}
599+
```javascript{17-28}
597600
// tutorial19.js
598601
var CommentBox = React.createClass({
599602
loadCommentsFromServer: function() {
600603
$.ajax({
601604
url: this.props.url,
602605
dataType: 'json',
606+
cache: false,
603607
success: function(data) {
604608
this.setState({data: data});
605609
}.bind(this),
@@ -645,13 +649,14 @@ var CommentBox = React.createClass({
645649

646650
Our application is now feature complete but it feels slow to have to wait for the request to complete before your comment appears in the list. We can optimistically add this comment to the list to make the app feel faster.
647651

648-
```javascript{16-18}
652+
```javascript{17-19}
649653
// tutorial20.js
650654
var CommentBox = React.createClass({
651655
loadCommentsFromServer: function() {
652656
$.ajax({
653657
url: this.props.url,
654658
dataType: 'json',
659+
cache: false,
655660
success: function(data) {
656661
this.setState({data: data});
657662
}.bind(this),

0 commit comments

Comments
 (0)