javascript - 仅当我更改类 Prop 时如何安装组件

Question

我有一个 ReactJS 项目，我从 REST Django 主机获取 JSON 并为其创建一个带有过滤器的表。我有一个表类:

class MainTable extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      results: []
    };
  }

  componentDidMount(){
    axios.get(this.props.link)
      .then(res => {
        this.setState({results: res.data.results});
    });
  }

  render() {
    return (
      <Table hover striped bordered responsive size="sm">
        <thead>
          <tr>
            <th>Name</th>
            <th>Name</th>
          </tr>
        </thead>
        <tbody>
          {this.state.results.map(result =>
            <tr key={result.fileId}>
              <td>{result.Name}</td>
              <td>{result.Name}</td>
            </tr>
          )}
        </tbody>
      </Table>
    );
  }
}

以及我运行所有过滤器类的主要部分:

class Main extends React.Component {
  constructor() {
    super();
    this.state = {
      origin: '',
      limit: 10
    };

    this.handleChangeOrigin = this.handleChangeOrigin.bind(this);
    this.handleChangeLimit = this.handleChangeLimit.bind(this);
  }

  handleChangeLimit(event) {
    this.setState({limit: event.target.value});
  }
  handleChangeOrigin(event) {
    this.setState({origin: event.target.value});
  }

  render() {
    var link = `http://106.120.89.142:8000/database/?limit=${this.state.limit}&`;
    if (this.state.origin){
      link += `ORIGIN=${this.state.origin.toLowerCase()}`;
      console.log(link)
    }
    return (
      <div>
        <div>
          <h1 className="jumbotron-heading display-4">Here u got database *_*</h1>
        </div>
        <div>
          <Limit handleChange = {this.handleChangeLimit} />
        </div>
        <div>
          <OriginRow handleChange = {this.handleChangeOrigin} />
        </div>
        <div id="tableWrapper">
          <MainTable link={link} />
        </div>
      </div>
    );
  }
}

我有一个问题，因为当我使用 componentDidMount() 时，我的 axios.get(my link to REST JSON) 仅运行一次。当我在 Table class render() 中使用 axios 时，它每秒会访问我的服务器几次。我可以仅在 Table 类的 props 更改时进行安装吗？

Answer 1

正如所指出的，您可以实现 shouldComponentUpdate。或者，如果您不需要深度比较，即在任何集合或对象上，只需使用 PureComponent 而不是 Component:

https://github.com/facebook/react/blob/master/docs/docs/reference-react.md

React.PureComponent#React.PureComponent 与 React.Component 完全相同，但通过浅层 prop 和状态比较实现了 shouldComponentUpdate()。