Question

我想学习重构，所以我从一个简单的组件组件开始：

const timer: React.SFC<MyProps | any> = ({ seconds }) => (
  <span>{ seconds }</span>
);

我想以某种方式使用重构将seconds传递给它，它会在每秒递增。

let seconds = 0;
export default compose(
  withProps(() => ({ seconds })),
  pure,
)(Timer);

如何正确增加seconds道具，以便在道具更改时传播到组件？我尝试在setTimeout声明后使用let seconds添加recurrsive函数，但在更改时它不会传播到组件。

我最终得到了这个

let seconds = 0;

incrementSeconds();

function incrementSeconds() {
  seconds += 1;
  setTimeout(
    () => {
      incrementSeconds();
    },
    1000,
  );
}

export default compose(
  withProps(() => ({ seconds })),
  pure,
)(Timer);

Answer 1

而不是withProps，我会使用withState，然后更新状态，如

export default compose(
  withState('seconds', 'updateSeconds', 0),
  lifecycle({
     componentDidMount() {
         const { seconds, updateSeconds} = this.props;
         setTimeout(
            () => {
               updateSeconds(seconds + 1);
            },
            1000,
         );
     }
  }),
  pure,
)(Timer);

如何在重构中使用setTimeout更新状态？

1 个答案: