React JS 中在特定道具更改时调用组件方法的正确模式是什么? [英] 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);

现在假设您想在每次 bool 属性更改时调用 boolUpdate()，但这不应触发组件更新，因为在渲染中没有任何内容组件受到影响.

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?

是否有首选的方式来监听特定的 prop 变化并触发组件方法?

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

谢谢！

推荐答案

如果你想在 props 改变时运行一些代码(例如数据获取)，请在 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 中获取数据，并返回 .内部组件将有一个 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 中在特定道具更改时调用组件方法的正确模式是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！