本文共 6619 字，大约阅读时间需要 22 分钟。
react 引入组件
by Jake Moxey
杰克·莫西(Jake Moxey)
There are so many methods to handle state in React right now. From local state to Redux, the new and new libraries such as and . All these methods have great use cases, and there are no absolutes in which I’d drop one entirely in favour of another. Each of them have their situational benefits.
现在有很多方法可以在React中处理状态。 从本地状态到Redux ，新的 和 新的库，例如 和 。 所有这些方法都有很好的用例，没有绝对的方法可以让我完全放弃另一种方法。 他们每个人都有自己的处境利益。
But I don’t want to get into the nitty gritty of React state management. Check out Kent C. Dodd’s excellent article about for that.
但是我不想陷入React状态管理的棘手问题。 请查看Kent C. Dodd撰写的有关的出色文章。
Though I do want to touch on the case of handling loading and response state from a promise, for example HTTP requests and resource fetchers. A promise has three explicit states: pending, resolved, and rejected. It has the additional implicit state of idle, when the promise has not yet been triggered.
尽管我确实想谈谈处理来自promise的加载和响应状态的情况，例如HTTP请求和资源获取程序。 一个承诺具有三个显式状态： 未决 ，已解决和已拒绝。 当尚未触发承诺时，它具有空闲的其他隐式状态。
It can be managed in local state through something as simple as an isLoading variable to reflect the “pending” state. response and error variables are then used to reflect the “resolved” and “rejected” states, respectively.
可以通过类似于isLoading变量的简单方式在本地状态下对其进行管理，以反映“待定”状态。 然后使用response和error变量分别反映“已解决”和“已拒绝”状态。
It can be managed in a Redux store through actions such as GET_DOG_REQUEST , GET_DOG_SUCCESS and GET_DOG_ERROR . These then could map to respective isLoading , response , and error variables in the store.
可以通过诸如GET_DOG_REQUEST ， GET_DOG_SUCCESS和GET_DOG_ERROR操作在Redux存储中对其进行管理。 然后，这些可以映射到存储中各自的isLoading ， response和error变量。
Nested ternaries in your render function can get difficult to interpret and messy, and can therefore be prone to errors. Here is an example of such a problem:
render函数中的嵌套三进制可能难以解释且混乱，因此容易出错。 这是此问题的示例：
From this example, it is not clear that !error && !response implies the “idle” state. It is also unclear that the else section of the isLoading ternary implies that the section has been loaded or errored. And just imagine managing more than one promise and their respective states! Urgh.
从此示例中，还不清楚!error && !response暗示“空闲”状态。 还不清楚isLoading三元数的else节isLoading暗示该节已被加载或错误。 并想象管理一个以上的承诺及其各自的状态！ 嗯
2. Seeing flashes of “loading” state in your UI is annoying. When a promise goes from an “idle” state to a “pending” state, this state change should be reflected in the UI with a loading indicator. However, it’s possible that your promise will resolve in a minuscule amount of time causing your user to see a “flash” of loading state. This is something many developers are not aware of when they handle promise states.
2.在用户界面中看到闪烁的“正在加载”状态很烦人。 当承诺从“空闲”状态变为“待处理”状态时，此状态更改应通过加载指示器反映在UI中。 但是，您的承诺可能会在极短的时间内解决，从而使用户看到加载状态的“闪光”。 许多开发人员在处理承诺状态时并没有意识到这一点。
3. Solely managing promise states in Redux is unnecessary. When Redux was first released, it was common for developers to transfer the majority of their state into a Redux store. However, creating three actions for a promise state, then creating three reducer cases for those actions, causes unnecessary bloat in your application. I’m guilty of this too — but no longer! Actions to handle response/error data are sufficient in my opinion.
3.无需在Redux中仅管理承诺状态。 当Redux首次发布时，开发人员通常会将其大部分状态转移到Redux存储中。 但是，为一个promise状态创建三个动作，然后为这些动作创建三个reduce案例，会导致应用程序不必要的膨胀。 我也对此感到内—-但不再！ 我认为处理响应/错误数据的动作就足够了。
Avoid handling promise state in Redux.
避免在Redux中处理Promise状态。
aims to solve the above issues in a minimalistic fashion. The user provides the <Loads> component with a function that returns a promise. It will return its state and response data as render props.
旨在以简约的方式解决上述问题。 用户为<Loa ds>组件提供返回诺言的功能。 它将e and re n its状态， e and re响应数据ta as渲染道具。
React Loads provides you with render props to load the promise. This also handles its state and response data. You can get it to load the promise when the component mounts by passing the loadOnMount prop to <Loads>.
React Loads为您提供了render道具来加载Promise。 这也处理其状态和响应数据。 您可以通过将loadOnMount道具传递给<Loa ds>来使其在装入组件时加载loadOnMount 。
Using state variables such as isIdle , isLoading , isTimeout , isSuccess , and isError from render props will make your render function predictable and easy to read.
使用render道具中的状态变量(例如isIdle ， isLoading ， isTimeout ， isSuccess和isError将使您的render函数可预测且易于阅读。
React Loads doesn’t transition to the “loading” state until 300 ms after the promise is triggered. It will wait 300 ms for the promise to hopefully resolve before it goes into a pending state. This time can be modified using the delay prop for <Loads> .
直到承诺被触发后300毫秒，React Loads才会转换为“正在加载”状态。 它将等待300毫秒，以期有望 在进入待处理状态之前解决。 可以使用<Loa ds>的delay道具修改此时间。
React Loads has the ability to cache the response data on an application context level. Once the data loads from an invocation of fn , it will use the response returned from the promise for the next subsequent invocation’s response . The newest data will then load in the background, skipping the isLoading state, and update response accordingly. You can enable caching by adding a cacheKey prop to <Loads> . Read more about cag here.
React Loads可以在应用程序上下文级别上缓存响应数据。 从fn调用加载数据后，它将使用promise返回的响应作为下一个后续调用的response 。 然后，最新的数据将在后台加载，跳过isLoading状态，并相应地更新response 。 您可以通过将cacheKey添加到<Loa ds>来启用缓存。 在此处阅读有关ca g的更多信息。
We’ve been using React Loads in production at on our patient and practitioner facing web app for the past couple of months. It has made our developing experience really easy. We’ve been able to remove a heap of code that handled promise state and response data, and just let React Loads do all the dirty work.
在过去的几个月中，我们一直在面向Web应用程序的患者和从业者的使用React Loads进行生产。 这使我们的开发经验非常容易。 我们已经能够删除处理承诺状态和响应数据的代码堆，只需让React Loads完成所有肮脏的工作即可。
Consider using it in one of your projects and let me know how it goes! If you have any suggestions or spot a bug, feel free to raise a PR (or an issue) !
考虑在您的一个项目中使用它，让我知道它的进展！ 如果您有任何建议或发现错误，请随时提出PR(或问题)！
Thanks for reading!
谢谢阅读！
Follow me on and (I’ll follow you back I promise).
在和关注我(我保证会再跟着您)。
翻译自:
react 引入组件
转载地址：http://mjkzd.baihongyu.com/