Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use Immer.js". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use Immer.js.

Brief introduction

React's Reconciliation solves the problem of virtual DOM updates, but does not provide a solution to optimize updates in what scenarios. Unlike Reactive, it automatically tracks state changes, but leaves the problem to developers through shouldComponentUpdate. So developers need to compare the status changes before and after to decide whether to continue to render and update DOM. If the level of state objects is deep and complex, then the comparison is bound to be painful.

But then again, if the comparison is painful, it is likely that there is something wrong with the design of the state object.

So Immutable was born, you can simply think of Immutable as a black box, the input is object A, the output is an object A'.

Expressed by a formula is

If the input objects A1 and A2 are exactly the same (but still not the same instance), the output A1' and A2' can easily compare whether they are equal (direct API calls are provided for comparison), and the raw data of A1 or A2 can also be extracted from A1' or A2' (but A1' and A2' are still two different instances). Subsequent updates will also be done through A' API, which means that the original object is far away from you.

If there is really no change, it can not be called a back wave. It is based on the copy-on-write mechanism-copy a temporary draft on the current status data, then alter the draft, and finally generate new status data. With the help of ES6's Proxy, you only need to modify the object directly, and you don't need to call the complex API (almost only a produce function is used! ), which is the same as responsive automatic tracking

The official website document likens it to your little secret (not honey), who makes a copy of your letter for you to correct, and then prints out a new revised letter for you.

Import produce from "immer"

Const baseState = [

{

Todo: "Learn typescript"

Done: true

}

{

Todo: "Try immer"

Done: false

}

]

Const nextState = produce (baseState, draftState = > {

DraftState.push ({todo: "Tweet about it"})

DraftState [1] .done = true

})

If you understand the response, you will find that

In React, setState becomes

This.setState (

Produce (draft = > {

Draft.user.age + = 1

})

)

In Redux, Reducer becomes

Const byId = produce ((draft, action) = > {

Switch (action.type) {

Case RECEIVE_PRODUCTS:

Action.products.forEach (product = > {

Draft [product.id] = product

})

}

})

The default branch can also be omitted because the produce method returns the original object instance by default.

There is also an exception, that is, if you can't do it directly if you want to return undefined, you have to return nothing

Import produce, {nothing} from "immer"

Const state = {

Hello: "world"

}

Produce (state, draft = > {})

Produce (state, draft = > undefined)

/ / Both return the original state: {hello: "world"}

Produce (state, draft = > nothing)

/ / Produces a new state, 'undefined'

Thank you for your reading, the above is the content of "how to use Immer.js", after the study of this article, I believe you have a deeper understanding of how to use Immer.js, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.