1

我想用来根据传入的道具withPropsOnChange创建一个新的去抖动函数。如果道具被更改，它应该创建一个新函数。withPropsOnChange似乎很适合这个，除了我需要访问回调this.state内部createProps，而 recompose 不提供。

有哪些替代方案？即如何创建一个属性（React 或 vanilla），它取决于/依赖于其他一些属性，并在这些属性更新时自动更新？

这是我现在所掌握的要点：

class MyClass extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            isOpen: false,
            isLoading: 0,
            isWaiting: false,
            searchQuery: '',
            options: [],
            value: undefined, 
            highlightedValue: undefined,
            scrollPos: 0,
        };
        if(props.options) {
            this.loadOptions = Lo.debounce(searchQuery => {
                this.setState(state => ({
                    isLoading: state.isLoading + 1,
                }));
                props.options(searchQuery).then(result => {
                    this.setState(state => ({
                        isLoading: state.isLoading - 1,
                        options: result.options,
                    }));
                });
            }, props.delay);
        }
    }
}

如您所见，我正在定义一个名为的属性this.loadOptions，它只是props.options带有一些状态处理的去抖动副本。

这目前可以正常工作，但如果上游修改props.optionsor props.delay，则this.loadOptions 不会更新，因为我只在构造函数中执行此操作。

现在我可以在 中再次执行所有这些操作componentWillUpdate，但实际上我只想在更新props.options或props.delay更新时这样做，因为这是它仅有的两个依赖项。

我只是在寻找一种更简洁的设计模式来处理这类事情。现在我考虑它基本上只是“计算的属性”（但我不能根据需要“重新计算”它——除非修改了这些属性，否则我每次都需要返回相同的实例）。

4

1 回答 1

1

因此，据我了解，您有一些当前位于组件内部的状态。而且您想在createProps回调中使用该状态。

是否可以使用 recompose 来提取该内部状态（及其逻辑）withState？

然后，如果您使用withState, 状态“开始”组合 recompose 函数，则应该可以“进一步向下”作为道具。（或者至少这是我的理解。）

const enhance = compose(
  // handle previously internal state
  withState('importantState', 'changeImportantState', 0),
  withHandlers({
    logicForChangingTheImportantState:
        props => () => props.changeImportantState(old =>  ({...old, moreImportant: 'xyz'}))
  }),
    // do your logic here
  withPropsOnChange(
    [], // ?? shouldMapOrKeys
    (props) => {
        return {
        thisPreviouslyDependedOnInternalState: props.importantState
      }
    }    
  ) 
);
于 2017-08-25T00:59:43.327 回答