React JS中调用特定props更改组件方法的正确模式是什么？ [英] What is the correct pattern in React JS to invoke a component method on specific props change?

问题描述

使用React和Redux，假设你有一个组件方法向外部API发送请求。

Using React and Redux, imagine you have a component method that sends a request to an external API.

import React, { Component } from 'react';
import { connect } from 'react-redux';

class MyComp extends Component {

  boolUpdate (val) {
    fetch('http://myapi.com/bool', { val });
  }

  shouldComponentUpdate (nextProps) {
    return false;
  }

  render () {
    return <h1>Hello</h1>;
  }

}

const mapStateToProps = ({ bool }) => ({ bool });

export default connect(mapStateToProps)(MyComp);

现在假设你要调用 boolUpdate（）每次 bool prop更改，但这不应该触发组件更新，因为组件的渲染中没有任何内容受到影响。

Now let's say that you want to invoke boolUpdate() each time the bool prop changes, but this should not trigger a component update because nothing in the render of the component is affected.

在React中做到这一点的最佳方法是什么？

What's the best way to do this in React?

直到最近，人们常常这样做：

Until recently people used to do something like:

componentWillReceiveProps (nextProps) {
  if (nextProps.bool !== this.props.bool) this.boolUpdate(nextProps.bool);
}

但是从React v16.3开始 componentWillReceiveProps（） 已被弃用。在此示例中，我们也不能使用 componentDidUpdate（），因为 shouldComponentUpdate（）会阻止这种情况发生。并且 getDerivedStateFromProps（）是一个静态方法，因此它无权访问实例方法。

But as of React v16.3 componentWillReceiveProps() has been deprecated. In this example we can't use componentDidUpdate() either, because shouldComponentUpdate() prevents that from happening. And getDerivedStateFromProps() is a static method, so it doesn't have access to the instance methods.

所以，我们留下的唯一选择似乎是使用 shouldComponentUpdate（）本身。类似的东西：

So, the only option we're left with seems to be using shouldComponentUpdate() itself. Something along the lines of:

shouldComponentUpdate (nextProps) {
  if (nextProps.bool !== this.props.bool) this.boolUpdate(nextProps.bool);
  return false;
}

这对我来说看起来相当hacky，而不是 shouldComponentUpdate（）是专为。

This looks rather "hacky" to me though, and not what shouldComponentUpdate() was designed for.

是否有人有更好的建议模式？

Does anybody have a better pattern to suggest?

是否有一种倾听特定道具变化和触发组件方法的首选方式？

Is there a preferred way to listen to specific prop changes and trigger component methods?

谢谢！

推荐答案

如果你想在道具改变时运行一些代码（例如数据提取），请在 componentDidUpdate 中执行。

If you want to run some code (e.g. data fetching) when props change, do it in componentDidUpdate.

componentDidUpdate(prevProps) {
  if (prevProps.id !== this.props.id) {
    this.fetchData();
  }
}

在您的示例中，这不起作用，因为 shouldComponentUpdate 返回 false 。我认为这不是一个非常常见的情况，因为如果道具发生变化，通常你仍然想要重新渲染。

In your example, this won't work because shouldComponentUpdate returns false. I'd argue this is not a very common case because typically you still want to re-render if props change.

例如，如果用户ID发生变化，您可能希望在加载新用户的数据时显示加载指示符。因此，在这种情况下，避免重新渲染不是很有用。

For example, if the user ID changes, you might want to show a loading indicator while the data for the new user is loading. So avoiding a re-render is not very useful in this case.

但是，如果您完全确定两者需要阻止重新渲染和需要执行副作用，例如在道具更改中获取数据，您可以将您的组件拆分为两个。外部组件将在 componentDidUpdate 中进行数据提取，并返回< InnerComponent {... this.props} /> 。内部组件将具有 shouldComponentUpdate 实现，该实现可防止进一步重新呈现。同样，我不希望这是一个常见的情况，但你可以这样做。

However, if you're absolutely sure you both need to prevent a re-render and need to perform a side effect like fetching data on props change, you can split your component in two. The outer component would do the data fetching in componentDidUpdate, and return <InnerComponent {...this.props} />. The inner component would have a shouldComponentUpdate implementation that prevents re-rendering further. Again, I wouldn't expect this to be a common scenario, but you can do this.

这篇关于React JS中调用特定props更改组件方法的正确模式是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！