反応成分の改善

Question

以下の反応成分があります。コードの書き方を改善するために何かできることがあるかどうか疑問に思っていましたか？私は反応を覚えようとしており、より良いコードを書く方法を学びたいと思っています。ありがとう！

component.var JSON_URL = "https://api.example.io/comments.json"; 

class CommentList extends React.Component { 
constructor() {  
    super();  
    this.state = { comments: [] } 
       } 
componentDidMount() {  
    $.ajax({  
     url: JSON_URL,  dataType: 'json',  success: function(data) {  this.setState({comments: data.comments});  }.bind(this) }); 
}; 
render() {  
    return <ul> {this.state.comments.map((comment) => {     
     return <li>{comment.body}—{comment.author}</li>;    })}   </ul>; } 
} 
React.render(<CommentList />, document.getElementById('root')) 

Answer 1

このコードはあまり良くないので、フォーマットする必要があります。

• 必ずすべてがそれ自身の機能に
• 抽出AJAXリクエストが
• を使用する方がよいかもしれません（おそらくそれ自身のモジュールにする必要があります）
正しくフォーマットされていることを確認：ここではそれを改善することができますいくつかの小さなものがありますjqueryのとは別のAJAXライブラリそれが使用されていないので、
• は、コンストラクタを取り除く（axios、フェッチ）とちょうどクラス

---

に直接状態を追加

import React, {Component} from 'react'; 

// move api related things to it's own module 
const JSON_URL = 'https://api.example.io/comments.json'; 
const getComments = (callback) => { 
    $.ajax({ 
    url: JSON_URL, 
    dataType: 'json', 
    success: (data) => { 
     // handle errors 
     callback(data.comments); 
    } 
    }); 
}; 

class CommentList extends Component { 
    state = { 
    comments: [] 
    }; 

    componentDidMount() { 
    getComments(this._setComments); 
    } 

    _setComments = (comments) => { 
    this.setState({ 
     comments 
    }); 
    } 

    render() { 
    return (
     <ul> 
     {this.state.comments.map((comment) => { 
      return (
      <li> 
       {comment.body}—{comment.author} 
      </li> 
     ); 
     })} 
     </ul> 
    ); 
    } 
} 

ReactDOM.render(
    <CommentList />, 
    document.getElementById('root') 
); 

Answer 2

一般的に、ここではかなり機能的なようです。 @Felix Kingは読みやすさに関しては正しいです。コードを書式設定すると、批評がより簡単になります。あなたのコードの最後の呼び出しはReact.render(<CommentList />, document.getElementById('root'))ですが、.renderメソッドはReactDOM APIにのみ公開されています。また、コードサンプルの最上部にimportを必ず含めてください。ローカルで定義されているものと他の場所から何が入っているのかを簡単に把握できます。あなたのAJAXリクエストをcomponentDidMount()に入れておくのがいいですね。