javascript - 来自单独模块的 React 状态更新。怎么做？

Question

我不知道如何更新主组件 App 中的 react 状态。

所以，我有一个主要组件 App，它存储整个应用程序的所有状态。我想通过单独模块 settingState 的状态更新进行操作。

状态更新的链式逻辑如下:

1. 子组件 MenuButtonOpen 做一些事情并更改状态参数之一并将其作为参数推送到中间件模块 settingState;
2. 中间件模块settingState获取该参数并将其传递给组件App，对整个App进行状态更新。

求求你，帮帮我...

我的结构。它可以工作，但当我在页面上执行某些操作时不会更新状态:

/* 应用程序 */

import settingState from '../../view/settingState'
import MenuButtonOpen from '../menu-buttons/MenuButtonOpen'

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      toggle: false,
      coordY: 0
    };
  }

  componentDidMount() {
    this.setState = ({
      toggle: settingState().toggle,
      coordY: settingState().coordY
    })
  }
 }

/* 中间件设置状态 */

const settingState = (e, d) => {
    return ({
     toggle: e,
     coordY: d
    });
  };

  export default settingState;

/* 一些进行状态更新的子组件 */

import settingState from '../../view/settingState'

class MenuButtonOpen extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        settingState(
            e = true,
            d = window.pageYOffset
        );
    }
}

Answer 1

为了从不同的组件操作 App 组件状态，您需要将 App 的引用传递给每个可以修改其状态的组件，或传递一个绑定(bind)到 App 的函数，并在您需要状态更新时调用它。然而，这与您希望实现的有所不同，因为 settingState 作为单独的组件将变得无用。

您要实现的目标与 React 应用程序中使用的流行通量架构/模式非常相似。使用通量模式，您需要创建一个名为 Data Store 的单独组件来保存您的数据，这将是全局可访问的，就像您的 settingState 一样。然后，您的 App 组件将监听此商店中的状态变化，就像它是自己的状态一样。有几个库实现了这种模式。最常用的大概是Redux , 但由于它非常复杂，我建议您查看 Reflux或 Cartiv .这些库以非常简单的方式实现了类似的功能。

当然你也可以自己实现这样的东西，为了做到这一点，你需要创建一个单例组件，它总是在那里，不渲染任何东西，只保存数据。然后您的 App 组件可以订阅它以查看修改。这将具有与您在问题中具有的功能非常相似的功能。为了订阅更改，您可以使用 High-Order Components .

这是一个自动处理监听器的商店实现示例，以及如何返回包装到监听商店中变化的 HOC 的组件:

export class Store {

  constructor() {
    this.listeners = [];
    this.listenerId = 0;
    this.state = {};
  }

  addChangeListener(func) {
    this.listeners[this.listenerId] = func;
    this.listenerId++;
    return this.listenerId - 1;
  }

  removeChangeListener(id) {
    if (id > 0) delete this.listeners[id];
  }

  componentWillUpdate() {
    this.listeners.map(listener => listener());
  }

  setState(nextState) {
    extend(this.state, this.state, nextState);
    this.componentWillUpdate();
  }

  getState() {
    return this.state;
  }
}

export function withSubscription(WrappedComponent, ...stores) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.listenerId = -1;
      this.handleChange = this.handleChange.bind(this);
      let data = {};
      stores.map(s => {
          extend(data, s.getState())
        }
      );
      this.state = {
        data: data
      };
    }

    componentDidMount() {
      this.listenerId = stores.map(s => s.addChangeListener(this.handleChange));
    }

    componentWillUnmount() {
      stores.map(s => s.removeChangeListener(this.listenerId));
    }

    handleChange() {
      let data = {};
      stores.map(s => {
          extend(data, s.getState())
        }
      );
      this.setState({
        data: data
      });
    }

    render() {
      return <WrappedComponent {...this.state.data} {...this.props} />;
    }
  };

可能不是一个很好的解决方案，上面链接的库在实现数据存储方面做得非常好。这个更多的是一个例子，说明如何使用 HOC 来实现它。在此示例中，您的 App 组件将用作 const AppWithSubscription = withSubscription(App, YourStore)，其中 YourStore extends Store。我仍然建议您查看提到的库。