Do you know why reducer is best a pure function?

This is the 11th day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021

📢 Hello everyone, I am Xiao Cheng, a sophomore front-end enthusiast

📢 this article will talk about a few interview questions I came across recently, but also hope to see your understanding ~

📢 Thank you very much for reading

📢 May you be true to yourself and love life

preface

Recently looked at the interview, some bloggers under oneself also followed the thinking about some topics, found that there are many simple and important knowledge a bit hold not to live, therefore, decided to write a column to record the title, and write your own understanding, more important is, want readers to share their understanding, or in what topic has a problem, So we can pay attention to these topics together, we make progress together! Therefore, I hope that if you are reading this article, you can think about it first and then see my understanding, so that you can also test the correctness of my article.

• If there are any mistakes in the content of the article, please be sure to point them out!
• If you’re looking forward to new articles in this column, feel free to leave a comment!
• If you are the same age, or have any needs, you can add my VX and DISCUSS with me!

💡 Knowledge points look first

1. for... in 和 for ... ofThe difference between
2. splice 和 sliceThe difference between
3. includes 和 indexOfThe difference of
4. The role of pseudo-classes
5. ajaxStatus code
6. reduxIn thereducerWhy is it best to be a pure function?

Can you tell mefor ... in 和 for ... ofIs the difference between?

To put it simply… In and for… Of is used for traversal, but for… In iterates through the index of the array, while for… Of iterates over the element value of the array

First,for ... of

✅ it can only iterate over data structures where the Iterator interface is deployed. Objects that do not implement the Iterator interface cannot use for… Of traversal

✅ for… Not only can “of” iterate over the value of an element, you can also iterate over the key and value of an object in the following way, but this is a bit more cumbersome, so it is not recommended for… Of to iterate over the object

✅ for… Of is better for iterating over groups of numbers, and it only iterates over elements in a group, not over stereotype attributes or its own attributes

Take a look atfor ... in

for … In is more suitable for traversing objects, when used to traverse groups of numbers, because for… The nature of in can cause some problems

✅ for… In iterates through the prototype object of the array, as well as the properties of the array itself, so the following index prints a

✅ It is also worth noting that… The index iterated by in is not a number, but a string. Therefore, be careful when using index for calculation

👉 To sum up, for… In and for… The difference between of is as follows

1. for ... inThe loop is going to beindex.for ... ofThe loop is going to bevalue
2. for ... of Can’tLoop ordinary objects, need to be implementediteratorinterface
3. for ... of Don’tIterate over the stereotype and its own properties, andfor ... in 会
4. for ... of 是 ES6The new syntax

Let’s talk about arraysslice 和 splicemethods

The slice method is used to slice arrays and strings. It takes two arguments, the start and end of the slice, and returns a new array of truncated elements without altering the original array

You can see that truncating from index 1 to index 3 returns a truncated array without changing the original array

The splice method is used to delete an array and to add elements to the array. The first argument it takes is the initial index, the second argument is the number of elements to delete, and the remaining arguments are the elements to add

The argument after the second argument is the element you want to add, insert it at the starting position, you can kind of say, you delete some elements, you fill in some elements here, splice changes the array

You can see that starting at index 1 (including 1), two elements (b, c) are removed, and two elements are added. You can also see that the arR of the original array has been changed

👉 to summarize the above:

1. There is no direct correlation between the two,spliceTo add and delete arrays,sliceUsed to intercept arrays or strings
2. spliceWill change the original array,sliceIt doesn’t change the original array

Three, why haveindexOfMethods, also added in ES7includesMethod?

There were some problems in the previous indexOf method, mainly in the determination of NaN. IndexOf could not determine the existence of NaN values in the array. When we need to determine the existence of NaN values in the array, we need to use includes to determine

Using indexOf results in the following differences

If an array has a null value, includes considers the null value to be undefined, while indexOf does not

Therefore, includes was introduced to address some of the remaining issues with indexOf

👉 to summarize the above:

1. includesCan determine if there is an arrayNaN 值
2. includesDefaults the null value toundefined
3. If you want to determine whether a value exists in an array, use theincludesTo find the location of a value in the arrayindexOf

What are the functions of pseudo-elements?

Before we talk about functions, let’s distinguish between pseudo-elements and pseudo-classes

Pseudo-class: literally, a CSS class that selects elements in a specific state, such as the hover element, the number of elements in a class, which is not the same as a normal class. In addition, pseudo-classes are usually single colons, such as hover

Pseudo element: It is literally a pseudo element, as I understand it, similar to adding a new DOM node to the DOM tree, rather than changing the state of the element. But what’s important to note here is that you’re not actually adding a node; the element is actually created outside of the document.

In order to distinguish pseudo-elements from bit elements, double colons are generally used for pseudo-elements, such as ::after. However, for pseudo-elements, both single and double colons are acceptable

Return to the chase

The role of pseudo-elements

1. Pseudo elements can reduce the number of pagesDOMNodes, pseudo-elements that do not belong to HTML pages, can be reducedJSTo find theDOMTherefore, it can be said that using pseudo-elements can optimize performance
2. Pseudo-elements can be used to clear floating, classic three-piece setscontent ,display clear
3. Speed up the browser to load HTML files

500 HTTP status code is abnormal?

500 is an internal server error

Common HTTP status codes

Vi.reduxIn thereducerWhat if it’s a pure function?

First of all, what will happen if reducer in REdux is not a pure function?

If we operate on the reducer based on the original state, the React component will not be re-rendered and no changes will be made due to the underlying implementation of Redux

Redux receives a state object and passes each part of the state to the Reducer through the for loop. If there are any changes, The Reducer will return a new object, which is the hasChanged judgment here, and we can see that it just passed! == to judge whether the state before and after is the same, which is a shallow comparison method, my understanding is whether the address has changed

So if the state we passed was changed on an old basis, its address would not change and therefore would not pass this shallow comparison, so hasChanged returns false and the state is not updated

So why did Redux design this way?

Wouldn’t that be a problem if I changed this to deep comparison?

The reason is that if the deep comparison method is adopted here, when the number of comparisons is large, the performance consumption is particularly large. Therefore, Redux makes a stipulation on reducer that no matter what changes happen, a new object should be returned. If there is no change, return the old object. In this way, we can continue to use the shallow comparison method, which greatly reduces the performance loss

Meanwhile, I customized a set of rules for Reducers in redux’s English official website: corresponding address

We said earlier that reducers must always follow some special rules:

• They should only calculate the new state value based on the state and action arguments
• They are not allowed to modify the existing state. Instead, they must make immutable updates, by copying the existing state and making changes to the copied values.
• They must not do any asynchronous logic or other “side effects”

Bad translations

As we said before, reducer must always follow some special rules

• They should only be based onstate 和 actionParameter computes the new state value
• They do not allow modification of the currentstate. Instead, they must do so by copying the presentstateAnd make changes to the copied valuesstateupdate
• They can’t do any asynchronous logic and other side effects.

Functions that follow these rules are also called ** “pure” functions **, so the Reducer needs a pure function from this

👉 Summarize the following

1. reduxThe bottom layer is judged by shallow comparisonstateChanges to optimize performance
2. Adopt pure function, guarantee old and newstateNot the same object reference
3. In order to guarantee the return of newstateIt is definite, and will not return uncertain due to side effectsstate

📖 summary

Through these interview questions, we reviewed loop statements in JavaScript, differentiated splice and slice, and deeply understood the working principle of Reducer in REdux. This was a great improvement for me, and I wonder if you have gained anything from this. There may be understanding in the article is not in place, welcome to point out in the comment area, we progress together, grow together!

Finally, I am Xiao Cheng, welcome to pay attention to this column, keep paying attention to the latest articles ~ wish you get your desired offer

Finally, I may not be clear enough in many places, please forgive me

💌 if the article has any mistakes, or have any questions, welcome to leave a message, also welcome private letter exchange