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，fetch）可能会更好
摆脱构造函数，因为它没有被使用，只是直接在类中添加状态

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放在代码示例的顶部，这样可以更轻松地找出本地定义的内容以及其他地方的内容。在componentDidMount()中提出您的AJAX请求即可。

改进React组件

2 个答案: