在这里,我将分享我在不使用任何状态管理库(例如Redux或Mobx)的情况下编写react app的经验。 并探索我们可以用来在组件树中任何级别的React组件之间共享数据的所有其他可能方式。
这是我们想在React组件之间进行通信时可以想到的可能方法。
- 使用React的道具 (组件树中的自上而下的遍历)
- 使用事件回调/引用 (组件树中的自底向上遍历)
- 使用React的Context Api
- 使用事件发射器概念
我们将讨论每个选项的使用时间,何时使用/何时不使用,以及我将分享我们最终编写另一种实用程序来管理国家的背后原因。 这是您可以使用的实用程序react-state-provider 。
- 使用React的道具:这是每个人都会想到的基本步骤,当我们想要在React组件之间传递状态数据时。 使用Props的好处是最好仅将数据传递给子组件。 欲了解更多信息,请点击这里。
从'react'导入React,{组件};问候语扩展了Component {
render(){
返回(
您好{this.props.name}
);
}
}
导出类App扩展了组件{
render(){
返回(
);
}
}
使用Props不适合: 当您要将数据传递到组件树中两层以上的组件时。
2.使用事件回调/引用:现在,如果您想在子组件中执行某些操作时通知父组件,该怎么办。 同样,更简单的方法是通过props将回调函数传递给子组件,并在子组件中发生某些动作(例如,单击按钮)时调用该回调函数。 这样,我们可以通知父组件任何数据更改。
但是问题是,如果超级授予子项希望将数据更改通知超级父组件,您将通过所有子组件传递父组件的回调,直到超级授予子项。 如果这样做,维护代码或修复错误将是一场噩梦。
3,React的Context API正在计划编写任何库。 欲了解更多信息请点击这里。
4.Event Emitter:不仅是我们想要在一个父组件的子组件之间进行通信,而且要与不同级别的不同父组件的子组件进行通信时,它也是一个不错的选择。 它是您可以使用的优秀事件发射器库之一。
但是我在使用事件发射器通知状态变化时看到的一个问题是,您将不会跟踪对状态所做的更改。 同样,如果没有发射器另一个具有更新数据的事件,就不可能获得最新更改的数据。
通过分析所有可能性,我们希望有某种方法可以将状态更改通知不同父组件的子组件,同时我们也应该始终有一种方法可以从任何其他组件获取最新状态更改。 这是我们通常使用Redux和Mobx解决的问题。 但是现在我们处在无法与Redux / Mobx兼容的情况下。 因此这里是另一个名为React-State-Provider的小工具,通过它我们可以解决上述问题。
React-State-Provider:这是简单的实用程序库,例如事件发射器,但我们可以控制由其他组件的动作(例如,按钮单击)更改的数据。 在这里,您可以创建任意数量的状态,这些状态可以是您的应用程序状态,也可以是临时状态,例如在从Grant Grant Child子组件进行Ajax调用时在父组件中启用和禁用加载。
使用方法:这是您可以结帐和Git回购的完整示例。
- 在您认为该新创建的状态将在所有其他子组件之间共享的位置上,在组件中创建状态。
从“ react-state-provider”导入{StateProvider}; // createState方法采用两个参数// 1.状态名称。//2. 2.实际状态objectthis.counterState = StateProvider.createState(“ counter”,{counter: 1}); ///我们在应用程序的Root组件中创建柜台商店。
2.在子组件中创建一个观察者,当任何其他组件更改数据时,您想在其中使用此数据。
// 1. 1.以其名称检索创建的商店this.counterState = StateProvider.getState(“ counter”); // 2.在componentDidMount或构造函数上创建观察者componentDidMount(){//为状态属性更改添加侦听器随着时间的流逝//,并对该变化做出反应,如果wantthis.counterState.observe(“ counter”,this.onCounterIncrease);}
3.使用定义的API方法从StateProvider获取最新状态
//您可以获取具有最新更改的状态this.counterState.getState()//也可以获取部分状态值this.counterState.get('Counter')
4.销毁相应的组件时,请同时销毁观察者和状态。
compnentWillUnmount(){//当您的组件卸载this.counterState.destroy(“ counter”,this.onCounterIncrease);}时,不要忘记破坏监听器
通过这种方式,我们可以轻松地在任何级别上跨组件传输应用程序状态,同时跟踪最后的状态更改,并在状态更改时自动通知其他组件。
希望对您有用。 如果您喜欢,请鼓掌。 这样它将覆盖许多人。 如果出现问题,请随时纠正我。 我愿意征求反馈。