Question

我有两个问题。

首先，我将首先解释该算法。在加载页面 loaded 之后，我在商店中实现了“ loading”视觉效果，我将其作为通过props.loading的道具就可以了。然后，我将此逻辑移到一个高阶组件（HOC），它也可以工作。

但是在我更改之前，componentDidUpdate()在重新渲染时起作用。在我更改为HOC之后，componentDidUpdate()不起作用，因为它不再重新呈现，componentDidMount()也有效。因为只是渲染（不更新。只是渲染）。我说的对吗？
我不明白这部分 const withLoad = WrappedComponent => props => { }; 我为什么要在这里写props？我不了解这种机制。让我知道。

我认为这是多箭头功能。但是，如果这样，应该将其导出为export default withLoading(hello)(props);吗？但是我正在使用export default withLoading(hello);。

const withLoad = WrappedComponent => props =>
  props.load ? (
    <div>
      Loading...
    </div>
  ) : (
    <WrappedComponent {...props} />
  );

Answer 1

无论原始组件的componentDidUpdate是否工作，无论它是否包装在HOC中，都应进行验证，以验证道具是否确实在更改以触发更新。如果您要检查HOC的componentDidUpdate是否被调用，请确保正在更新HOC。
以ES5格式编写HOC可以帮助您了解内部函数中props参数的重要性，您的withLoad HOC可以写为

      function withLoad(WrappedComponent){
        console.log(WrappedComponent.displayName || WrappedComponent.name ); // App 
        return function(props){ // props of your HOC are consumed here
        if(props.load)
         return (<div>Loading...</div>)
        else
         return (<WrappedComponent {...props} />);
        }

因此，当您将HOC用作const LoadingApp = withLoad(App)并随后将其用作<LoadingApp load={true} />时，您会看到内部函数中正在使用LoadingApp道具。

看看React docs for HOC，它将有助于清理问题。

我对这个HOC（高阶组件）代码是否正确？

1 个答案: