Question

React和Redux - React的新手，只是寻找资源，链接以更好地理解这个特定问题。

TLDR; 如何在不重新渲染父组件的情况下每秒更新子组件？但是父母需要至少在点击提交按钮时获得状态。

我有一个包含表单和多个表单字段的组件。其中一个字段是日期选择器。默认情况下，日期选择器字段每秒都在滴答，但用户可以手动设置时间。当用户“提交”表单时，它将花费时间在字段中，无论是每秒自动填充还是用户手动操作日期。

每次更改日期选择器，每秒或手动更改一次，我的整个组件都会重新渲染。这不是一个很大的交易，除了我有一个响应式引导表，当向右滚动时将每秒重新拉回到左边，或当滴答时钟每秒更新时。

最初，我使用setState（）来保持此值更新，但在遇到此问题后，我在redux中设置了一个action和reducer，但我得到了相同的行为。

以下是用于更新状态的代码（以及当前评论的redux方法）

export const onInputChangeCommon = function (event) {
  const target = event.target;
  const value = target.type === 'checkbox' ? target.checked : target.value;
  const name = target.name;
  this.setState({
    [name]: value
  });

  if (name === 'showHideCustomDatetime' && value) {
    this.interval = setInterval(this.getTime, 1000);
  } else if (name === 'showHideCustomDatetime' && !value) {
    clearInterval(this.interval);
  }
}

export const getTime = function () {
  const time = moment().format(`${this.state.timeFormat.date} ${this.state.timeFormat.time}`);
  // this.props.setEnterTimeCustomDatetime(time);
  this.setState({
    enterTime: time,
    isInvalidDate: false
  });
}

欣赏任何见解

修改看看这个CodePen。 https://codepen.io/anon/pen/EbNqpJ?editors=1111

我不明白如何从子组件回到父组件。

Answer 1

React计算所有组件的虚拟dom，并仅重新渲染具有更改的组件（因此，对主DOM的更改最小）。因此，将主要组件拆分为多个组件，您可以根据其状态更改单独重新组合。

Answer 2

您应该将组件拆分为多个组件。然后，您可以使用生命周期方法shouldComponentUpdate()来验证组件是否应该重新呈现。请注意，您的组件应为stateful才能使用生命周期。

React - 每秒更新组件而无需重新渲染整个表单

2 个答案: