directory

  • Write a React Hooks + KOA-style Web framework
  • What is the development experience of scheduling useEffect and memo for a session?

preface

In response to react-hooks, I have written a purely functional Web framework in the style of React-hooks + KOa, which is now available on NPM. If you are interested, check out the source code on Github.

A, the popular science

Session and cookies are topics that cannot be avoided in Web development, because HTTP is stateless. In fact, the server cannot identify whether a request from the same client is initiated by the same client. As a result, if there is no clear identification, There is an awkward “please prove yourself” situation.

The reason why there is such an unrecognizable situation is that the Internet is complicated. Even an IP address cannot prove that you are you, because the IP address obtained from the external network request sent from the same LAN will be the same.

How do you prove that both requests are initiated by the same client and are not aware to the user?

That’s where today’s topic comes in. Cookies are small text files stored on a user’s device.

The content in the browser will be sent to the server through the HTTP request header for each request. The server receives the request from the client and takes out the content from the request header.

The server can also actively write cookies. As long as the value of set-cookie is added to the header of the response, the browser will automatically update the content on the client.

Now that we have active reporting by the browser, it’s not perceptive to the user, and we can read and set the content through the Header, which is a great way to prove that you’re you.

However, there are many limitations and defects in Cookies. The most fatal defect is the size limit and security of the storage. Because Cookies are stored in the client, there will be the problem of stolen Cookies, so the security cannot be guaranteed.

So how do you solve these two problems?

Here is the protagonist of this Session, professional Session and Cookies popular science articles, the Internet has published a lot of articles, here is only to explain how the two are related.

Sessions are known to be stored in the server. In fact, a storage area is opened on the server. According to each client request, a sessionId will be generated, and then the value will be written into the storage area according to this ID.

At the same time, the sessionId will be written to the Cookies through the request header, so the next time the client wears the sessionId, we can get the value that was written to the client last time.

One point to emphasize for each client is that HTTP is stateless, and this request cannot be associated with the previous request. In other words, every time you clear the cookies, the request sent again is a new client connection for the server.

Therefore, we generally add a storage time limit to the session. Each time the client requests this time, the session will be reset. If the time exceeds this time, the session will be invalid.

Develop a session plugin

Session requires cookies, and here I’m using the cookies plug-in, which is a built-in koA plug-in.

Write the useCookies function

Write the createSessionId function

Write the createSession function

Write the useSession plug-in

UseEffect is set, which is called when the request ends and supports asynchro.

This is just simulation, without the function of time limit. Our session was stored in Redis before, so we can use the maxAge of cookies and the expiration mechanism of Redis to solve this problem

3. Use the session function

Because it is a pure function, it can be used directly in the route callback

For context, see writing a React hooks + KOA-style Web framework, which won’t be explained here.

We can see that this is a function call, which is very transparent to the developer, reducing a lot of the cost of understanding.

UseSession calls useSession multiple times.

So how do you solve this problem?

At this time, we need to use a new API, that is, memo. Let’s change the two hook functions useCookies and useSession.

We cover the two hook functions, but nothing changes to the caller, just caching during the call.

The results of the memo cache are cleared at the end of each request to ensure that there is no confusion between this request and the next one.

The end of the

React-hooks open the door to programming. We thought plugins couldn’t be written without constructors.

But now, pure function programming, more transparent than the constructor, the only difficulty is that the context management is particularly dependent on the bottom layer, but in terms of programming, undoubtedly provides us with some new ideas and solutions.

This can be said to be of great help to the improvement of programming ability.

  • Making portal
  • NPM portal
  • Sample code address