Question

我有一个ReactJS项目，我从REST Django主机获取JSON，并为其创建一个包含过滤器的表。我有一个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)时，我的axios只运行一次。当我在Table class render()中使用@RequestMapping时，它每秒会在我的服务器上点击几次。只有当我对Table类的道具发生变化时，我才能进行安装吗？

Answer 1

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

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

React.PureComponent＃ React.PureComponent与React.Component完全相同，但实现了带有浅支柱和状态比较的shouldComponentUpdate（）。

Answer 2

感谢您的帮助，我找到并选择的最佳解决方案是：

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

  componentWillReceiveProps(nextProps) {
    axios.get(nextProps.link)
      .then(res => {
        this.setState({results: res.data.results, count: res.data.count});
    });
  }

这正是我需要的，你可以在这里阅读：https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops。它会在我每次新render()时重新运行props而我在我的axios中没有使用render，这更有吸引力。

Answer 3

您应该查看shouldComponentUpdate()生命周期方法here。

<强> shouldComponentUpdate（）
shouldComponentUpdate(nextProps, nextState)
使用shouldComponentUpdate()让React知道组件的输出是否不受当前状态或道具更改的影响。默认行为是在每次状态更改时重新呈现，在绝大多数情况下，您应该依赖于默认行为。
在收到新的道具或州时，在渲染之前调用
shouldComponentUpdate()。默认为true。初始渲染或使用forceUpdate()时不会调用此方法。

将以下代码段添加到MainTable组件中。这将阻止它重新渲染，除非props已更改。

shouldComponentUpdate(nextProps) {
  return JSON.stringify(this.props) !== JSON.stringify(nextProps);
}

这将检查所有道具。如果您想检查特定道具，可以执行以下操作：

shouldComponentUpdate(nextProps) {
  return JSON.stringify(this.props.link) !== JSON.stringify(nextProps.link);
}

正如评论中所指出的那样，JSON.stringify(this.props) !== JSON.stringify(nextProps)即使在相同的情况下也会false返回this.props，这总是存在小的机会。

因此，如果您想要一种更健壮的方法来将newProps对象与getopt对象进行比较，则应该查看this post。

如何在我更改类道具时安装组件

3 个答案: