当你想要两个React组件进行通信时，它们不受关系(父子关系)的约束，建议使用Flux或类似的架构。

您要做的是监听可观察组件存储的变化，该存储保存模型及其接口，并将导致呈现变化的数据保存为MyComponent中的状态。当存储推送新数据时，更改组件的状态，这会自动触发呈现。

通常你应该尽量避免使用forceUpdate()。从文档中可以看到:

通常情况下，你应该尽量避免使用forceUpdate()，只从这个中读取。道具和这个。render()中的状态。这使您的应用程序更加简单和高效

你可以有几种方法:

1. 使用forceUpdate()方法:

使用forceUpdate()方法时可能会出现一些故障。一个例子是它忽略shouldComponentUpdate()方法，并将重新呈现视图，而不管shouldComponentUpdate()是否返回false。因此，应该尽可能避免使用forceUpdate()。

2. 通过这个。状态转换为setState()方法

下面这行代码克服了前面例子中的问题:

this.setState(this.state);

实际上，所有这些都是用触发重新渲染的当前状态覆盖当前状态。这仍然不一定是最好的方法，但它确实克服了使用forceUpdate()方法时可能遇到的一些故障。

使用钩子或HOC选择

使用钩子或HOC(高阶组件)模式，可以在存储发生变化时进行自动更新。这是一种没有框架的轻量级方法。

useStore钩子处理存储更新的方式

interface ISimpleStore {
  on: (ev: string, fn: () => void) => void;
  off: (ev: string, fn: () => void) => void;
}

export default function useStore<T extends ISimpleStore>(store: T) {
  const [storeState, setStoreState] = useState({store});
  useEffect(() => {
    const onChange = () => {
      setStoreState({store});
    }
    store.on('change', onChange);
    return () => {
      store.off('change', onChange);
    }
  }, []);
  return storeState.store;
}

withStores HOC处理存储更新

export default function (...stores: SimpleStore[]) {
  return function (WrappedComponent: React.ComponentType<any>) {
    return class WithStore extends PureComponent<{}, {lastUpdated: number}> {
      constructor(props: React.ComponentProps<any>) {
        super(props);
        this.state = {
          lastUpdated: Date.now(),
        };
        this.stores = stores;
      }

      private stores?: SimpleStore[];

      private onChange = () => {
        this.setState({lastUpdated: Date.now()});
      };

      componentDidMount = () => {
        this.stores &&
          this.stores.forEach((store) => {
            // each store has a common change event to subscribe to
            store.on('change', this.onChange);
          });
      };

      componentWillUnmount = () => {
        this.stores &&
          this.stores.forEach((store) => {
            store.off('change', this.onChange);
          });
      };

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

SimpleStore类

import AsyncStorage from '@react-native-community/async-storage';
import ee, {Emitter} from 'event-emitter';

interface SimpleStoreArgs {
  key?: string;
  defaultState?: {[key: string]: any};
}

export default class SimpleStore {
  constructor({key, defaultState}: SimpleStoreArgs) {
    if (key) {
      this.key = key;
      // hydrate here if you want w/ localState or AsyncStorage
    }
    if (defaultState) {
      this._state = {...defaultState, loaded: false};
    } else {
      this._state = {loaded: true};
    }
  }
  protected key: string = '';
  protected _state: {[key: string]: any} = {};
  protected eventEmitter: Emitter = ee({});
  public setState(newState: {[key: string]: any}) {
    this._state = {...this._state, ...newState};
    this.eventEmitter.emit('change');
    if (this.key) {
      // store on client w/ localState or AsyncStorage
    }
  }
  public get state() {
    return this._state;
  }
  public on(ev: string, fn:() => void) {
    this.eventEmitter.on(ev, fn);
  }
  public off(ev: string, fn:() => void) {
    this.eventEmitter.off(ev, fn);
  }
  public get loaded(): boolean {
    return !!this._state.loaded;
  }
}

如何使用

对于钩子:

// use inside function like so
const someState = useStore(myStore);
someState.myProp = 'something';

在HOC情况下:

// inside your code get/set your store and stuff just updates
const val = myStore.myProp;
myOtherStore.myProp = 'something';

// return your wrapped component like so
export default withStores(myStore)(MyComponent);

确保 以单例方式导出你的商店，以获得全局变化的好处，如下所示:

class MyStore extends SimpleStore {
  public get someProp() {
    return this._state.someProp || '';
  }
  public set someProp(value: string) {
    this.setState({...this._state, someProp: value});
  }
}
// this is a singleton
const myStore = new MyStore();
export {myStore};

这个方法非常简单，对我来说很管用。我也在大型团队中工作，使用Redux和MobX，并发现它们也很好，但只是很多样板文件。我只是个人喜欢我自己的方法，因为我总是讨厌大量的代码，当你需要的时候，它可以是简单的。

应该避免使用forceUpdate，因为它偏离了React的思维模式。React文档引用了一个何时使用forceUpdate的例子:

默认情况下，当组件的状态或道具改变时，组件将重新呈现。然而，如果这些隐式变化(例如:对象内部的深层数据变化而不改变对象本身)，或者如果你的render()方法依赖于一些其他数据，你可以通过调用forceUpdate()告诉React它需要重新运行render()。

然而，我想提出这样的观点:即使对于嵌套很深的对象，forceUpdate也是不必要的。通过使用不可变数据源跟踪更改变得便宜;更改总是会产生一个新对象，因此我们只需要检查对对象的引用是否已更改。你可以使用Immutable JS库将不可变数据对象实现到你的应用程序中。

通常情况下，你应该尽量避免使用forceUpdate()，只从这个中读取。道具和这个。render()中的状态。这使得你的组件“纯粹”，你的应用程序更简单、更高效。

改变你想要重新渲染的元素的键也可以。通过state在元素上设置键道具，然后当你想更新Set state时有一个新的键。

<Element key={this.state.key} /> 

然后发生了变化，您重置了密钥

this.setState({ key: Math.random() });

我要注意的是，这将取代键改变的元素。这可能有用的一个例子是，当您有一个文件输入字段，您希望在图像上传后重置。

虽然OP问题的真正答案是forceUpdate()，但我发现这个解决方案在不同的情况下都很有用。我还想指出的是，如果你发现自己使用了forceUpdate，你可能需要检查你的代码，看看是否有另一种方法来做事情。

注意1-9-2019:

以上(改变键)将完全替换元素。如果您发现自己正在更新键来进行更改，那么您的代码中的其他地方可能存在问题。在key中使用Math.random()将在每次渲染时重新创建元素。我不建议像这样更新键，因为react使用键来确定重新渲染事物的最佳方式。

使用useEffect作为componentDidMount, componentDidUpdate和componentWillUnmount的组合，如React文档中所述。

要像componentDidMount一样工作，你需要像这样设置你的useEffect:

  useEffect(() => console.log('mounted'), []);

第一个参数是一个回调，它将根据第二个参数(一个值数组)触发。如果第二个参数中的任何值发生了变化，您在useEffect中定义的回调函数将被触发。

然而，在我所展示的示例中，我传递了一个空数组作为第二个参数，这将永远不会被更改，因此回调函数将在组件挂载时调用一次。

这是对useEffect的总结。如果不是空值，而是有一个参数，比如:

 useEffect(() => {

  }, [props.lang]);

这意味着每次道具。Lang改变，你的回调函数将被调用。useEffect实际上不会重新渲染你的组件，除非你在回调函数中管理一些状态，这些状态可能会触发重新渲染。

如果你想要触发一个重新渲染，你的渲染函数需要在你的useEffect中更新一个状态。

例如，在这里，渲染函数开始显示英语作为默认语言，在我的使用效果中，我在3秒后改变了语言，所以渲染被重新渲染并开始显示“西班牙语”。

function App() {
  const [lang, setLang] = useState("english");

  useEffect(() => {
    setTimeout(() => {
      setLang("spanish");
    }, 3000);
  }, []);

  return (
    <div className="App">
      <h1>Lang:</h1>
      <p>{lang}</p>
    </div>
  );
}

另一种方法是调用setState和preserve state:

this.setState（prevState=>（{...上一页状态}））;