父更新导致上下文消费者重新挂载？答案

【问题标题】：Parent update causes remount of context consumer?父更新导致上下文消费者重新挂载？
【发布时间】：2019-04-02 21:06:08
【问题描述】：

我有一个包装器组件，它创建上下文使用者并将上下文值作为道具传递给处理程序组件。当包装组件的父级更新时，它会导致我的处理程序组件重新安装，而不仅仅是更新。

const Wrapper = forwardRef((props, ref) => {
  class ContextHandler extends Component {
    componentDidMount() {
      // handle the context as a side effect
    }

    render() {
      const { data, children } = this.props;
      return (
        <div ref={ref} {...data}>{children}</div>
      );
    }
  }
  return (
    <Context.Consumer>
      {
        context => (
          <ContextHandler
            data={props}
            context={context}
          >
            {props.children}
          </ContextHandler>
        )
      }
    </Context.Consumer>
  );
});

我将包装器放在父组件中：

class Parent extends Component {

  state = {
    toggle: false
  }

  updateMe = () => {
    this.setState(({toggle}) => ({toggle: !toggle}))
  }

  render() {
    const { children, data } = this.props;
    return (
      <Wrapper
        onClick={this.updateMe}
        {...data}
        ref={me => this.node = me}
      >
        {children}
      </Wrapper>
    )
  }
}

当我单击Wrapper 并导致Parent 中的更新时，ContextHandler 组件会重新挂载，这会导致其状态重置。它应该只是更新/协调和维护状态。

我在这里做错了什么？

【问题讨论】：

你的意思是重新渲染而不是重新挂载？
不，我的意思是重新安装
这也可能是由于使用了forwardRef作为功能组件，这种情况您可以尝试切换到HOC。
我确实在 ContextHandler 里面有 ContextHandler，但我认为使用上下文的目的是能够毫无顾虑地通过多个级别传递数据？
传递给 ContextHandler 的上下文也永远不会更新。只传过一次。

标签： javascript reactjs react-context

【解决方案1】：

您的 ContextHandler 类在 Wrapper 组件的渲染函数中实现，这意味着将在每次渲染时创建一个全新的实例。要解决您的问题，请将 ContextHandler 的实现从 Wrapper 的渲染函数中提取出来。

【讨论】：