Question

在单个反应组件中，用户单击按钮=＆gt;调用方法=＆gt;触发动作=＆gt; async fetch =＆gt; reducer updates state =＆gt;组件接收新的道具。

回到触发我一直使用的操作的原始组件中：

componentWillReceiveProps(nextProps){
    if(nextProps.someProp !== this.props.someProp){
        //ok new prop is here
        this.someMethod(nextProps.someProp);
    }
}

我是否以正确的方式解决这个问题？

从用户操作或状态更改中看起来有点笨拙和分离作为回调机制。只要有一些这样的组件，它就会更加努力地遵循组件的逻辑流程，我有一个具有其中3个的组件，并且已经认为它并不容易推理，特别是当它们是相关流程的一部分时a> b> C 。我最终得到了这样的东西：

componentWillReceiveProps(nextProps){

    if(this.patchJavaScriptWillLoad(nextProps)){
        this.createPatchInstance();
        // method fires an action which will also result in state change that triggers the below.
    }

    if(this.patchInstanceWillBeReady(nextProps)){
        this.startPatchAudio(nextProps.webAudioPatch.instance);
        // method fires an action which will also result in state change that triggers the below.
    }

    if(this.patchParametersWillChange(nextProps)){
        this.updateWebAudioPatchParameters(nextProps.webAudioPatchParameters);
    }
}

// abstracted away if conditions to make componentWillReceiveProps more readable.

但这是应该如何完成的，还是这是一个没有为行动创作者移动足够逻辑的症状？

Answer 1

更详细的例子会有用，但根据你在这里的内容，我想我会看到你所得到的。

简短回答：是的，这是对动作创作者没有足够逻辑的症状。理想情况下，您的组件应该是纯视图组件。在大多数情况下不需要componentWillReceiveProps - 你只需渲染任何道具，就是那样。这就是为什么阿布拉莫夫（redux的创造者）主张功能组件的原因。更多关于here。

如果您需要在异步调用返回某些数据后执行其他操作，您可以按照您的说法在操作创建器中执行此操作。我将使用一个使用thunk的示例：

编辑：我添加了一个组件示例，该组件将对音频播放器的引用作为参数传递给操作。这样，操作可以在异步步骤之后进行操作。

//An async action creator that uses the thunk pattern.
//You could call this method from your component just like any other
//action creator.

export function getMaDatums(audioPlayer, audioContext) {
  return function (dispatch) {

    //make the actual call to get the data
    return fetch(`http://<your stuff here>`)
      .then(data => {

        //call dispatch again to do stuff with the data
        dispatch(gotDataAction(data));

        //call dispatch some more to take further actions
        dispatch(...);

        //since the component passed us references to these, we can
        //interact with them here, after our data has loaded! FTW!
        audioPlayer.doTheThings();
        audioSession.doTheOtherThings();

        //plus anything else you want...
      });
  }
}

如果您想了解有关使用redux执行异步内容的更多信息，或者就此而言，与redux应用程序中的有状态库进行交互，我强烈建议您仔细阅读redux文档。以上thunk示例的基础来自here。

祝你好运并享受React + Redux！

Answer 2

几年后回到我自己的问题。

如果可以使用功能组件，则可以使用react钩子useEffect。如果逻辑可以外在化，那么也许是一个传奇。

useEffect(() => {
  methodToCallIfPropChanges()
}, [watchedProp]);

Answer 3

更新可能是由于道具或状态的更改引起的。重新渲染组件时，将按以下顺序调用这些方法：

静态getDerivedStateFromProps（）
shouldComponentUpdate（）
render（）
getSnapshotBeforeUpdate（）
componentDidUpdate（） 尝试使用 componentDidUpdate（）

反应文档https://reactjs.org/docs/react-component.html#updating

如何以及何时在从redux状态更改后调用react组件方法

3 个答案: