javascript - 当上下文更改时，使用上下文的子组件是否应该自动更新自己？

Question

我正在尝试创建本地化解决方案。

我有以下结构用于测试目的

index.js

import { Provider } from 'react-redux';
import store from './store';  //This is a redux store
import LocalizedComponent from './components/containers/HomeContainer';

function App() {
  return (
    <Provider store={store}>
      <LocalizedComponent />
    </Provider>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

HomeContainer 组件是一个 HOC，它将简单的表示组件包装到本地化组件中。

本地化.jsx

import React, { PropTypes } from 'react';
import STRINGS from 'strings'; //This is an object containing translations


const translate = mapper => (Component) => {
  function LocalizedComponent(props, { store }) {
    const language = store.getState().language;
    const translatedProps = mapper(STRINGS, language);
    return (
      <Component {...props} {...translatedProps} />
    );
  }
  LocalizedComponent.contextTypes = {
    store: React.PropTypes.object
  };

  return LocalizedComponent;
};

export default translate;

mapper 是这样的函数

const mapTranslationToProps = (strings, language) => ({
  <property key>: strings.<some key>[language]
});

和一个组件可能是这样的

Home.jsx

import React from 'react';

function SomeComponent(props) {
  return (
    <div>
      <p>{props.<property key>}</p>
    </div>
  );
}
SomeComponent.propTypes = {
  <property key>: React.PropTypes.string
};
SomeComponent.defaultProps = {
  <property key>: ''
};

export default SomeComponent;

为了将所有这些结合在一起，我们这样做

HomeContainer.jsx

import Home from 'components/presentational/Home';
import translate from 'components/HOC/Localization';

const mapTranslationToProps = (strings, language) => ({
  <property key>: strings.<some key>[language]
});

LocalizedComponent = translate(mapTranslationToProps)(SomeComponent);

export default LocalizedComponent;

第一次渲染时，会通过context从状态中选择正确的语言，并相应地显示文本

但是，当我分派(dispatch)更改状态中的语言的操作时，组件不会更新。

我的印象是，上下文的更改会在适用的情况下触发重新渲染，但似乎事实并非如此。

我尝试使用生命周期方法将 localization.jsx 内的 LocalizedComponent 实现为一个类，但我注意到 shouldComponentUpdate 甚至不触发当状态改变时。

我希望 LocalizedComponent 在所选语言更改时自动更新。显然我一定做错了什么。

有人可以帮我理解什么吗？

Answer 1

如果你使用React-Redux，你应该使用connect将组件连接到 redux 存储的方法。
更新 context 值不会触发组件重新渲染 - 当 context 中的任何内容发生更改时，React 组件不会收到通知。仅当其状态发生更改、其父组件已重新渲染或 forceUpdate 时，React 组件才会重新渲染。已被调用。在你的例子中，上下文只是指向一个充当 redux 存储的对象，React 组件不知道该对象的变化。此外，你永远不应该更新上下文。根据 react docs :

Don't do it.

React has an API to update context, but it is fundamentally broken and you should not use it.

此外，在 React-Redux 中，上下文存储属性始终指向相同的存储对象 - 当状态更新时，仅更改一些内部存储对象属性，但上下文仍然保留相同的对象引用，因此实际上上下文值不会更改。

有两种解决方案可确保在分派(dispatch)操作后 redux 状态发生更改时通知并更新您的组件。

如果你使用 React-Redux，你应该使用 React-Redux connect 。根据文档 connect 返回:

A higher-order React component class that passes state and action creators into your component derived from the supplied arguments.

当给定组件使用的状态属性发生更改时，连接到存储的组件将自动重新渲染。

如果您不使用 React-Redux，您还可以使用 Redux store subscribe 手动订阅商店更新。方法。根据文档订阅:

Adds a change listener. It will be called any time an action is dispatched, and some part of the state tree may potentially have changed. You may then call getState() to read the current state tree inside the callback.