Question

在Dan Abramov的egghead.io Redux课程，第22讲，视频说FilterLink组件需要明确订阅商店（通过forceUpdate），以便更改反映在组件。也就是说，在点击过滤器后调度SET_VISIBILITY_FILTER类型操作后，当前过滤器（state.visibilityFilter）将更改为单击的过滤器。

我在讲座中的理解是，如果我们没有subscribe并执行forceUpdate，过滤器上的格式就不会改变，因为信息没有传播到FilterLink形式存储，然后直到Link。

但是，当我删除componentDidMount组件中componentWillUnmount和FilterLink的行时，应用程序工作正常，即使没有明确强制更新，信息似乎仍在传播商店。

    class FilterLink extends Component {



      componentDidMount() {
        this.unsubscribe = store.subscribe(() =>
        this.forceUpdate()
      );
    }

    componentWillUnmount() {
      this.unsubscribe();
    }


    render() {

      const {
        filter,
        children,
      } = this.props;
      const state = store.getState();
      return (
        <Link
        active = {filter === state.visibilityFilter}
        onClick = {() => store.dispatch({
          type: 'SET_VISIBILITY_FILTER',
          filter: filter,
        })}


        >  {children}</Link>
    )
  }

  }

从下面的代码中，我们看到只有活动链接有<span>（即没有下划线），非活动过滤器应显示在它们下面的下划线。

  const Link = ({
    active,
    children,
    onClick,
  }) => {

if (active) {
  return (
    <span>
    {children}
    </span>
  )
}
else return (
  <a href='#' onClick = { e => {
      e.preventDefault();
      onClick()
    }
  }

  >{children}</a>
  )
}

我的问题是：用户界面中包含或排除componentDidMount / componentWillUnmount行的结果是相同的。单击的过滤器将成为跨度而不是带下划线，其他两个将变为<a>并加下划线。这表明，即使没有明确的订阅，商店中的信息（在这种情况下为state.visibilityFilter）也已成功传递给<Link>组件。

对于商店的订阅和FilterLink组件中的forceUpdate实现了某种在幕后重要的更新，并且在UI中不明显，或者这一步纯粹是可选的？如果用户界面中没有明显的更新，那是什么？

Answer 1

它仍然呈现的原因是因为代码中此时仍然存在顶级渲染store.subscribe(render);。在视频的后面，Dan将删除此顶级渲染，并让类仅处理生命周期。代码更改为here。

FilterLink不需要订阅更新

1 个答案: