This is a non-technical article, intended to record a story that made me feel ashamed, and to lash myself with shame and courage.

background

The story will start at the end of 2020, when the direction of our company changes, the previous work content may be abandoned forever, I was somewhat disappointed and confused, so the idea of moving home. As it happens, the ** from The Dingding team pulled me out of the resume library shortly after (early 2021) and asked if I was interested in changing jobs, which I readily told him I would consider after the year.

Occasionally prepare…

Time comes to February 19, 2021 (today), the first bytedance two days before the Spring Festival, and I have negotiated the offer. When I was thinking about byte efficiency, it occurred to me that if I didn’t promote Ali, I might not be able to finish the interview before I joined the company. Therefore, I contacted ** in a hurry, hoping that he could help me to promote my resume and told him that I had already got the offer of bytes (just a few days without holidays). He was very attentive and willing to help me to push the resume as soon as possible. I was touched and told him that there was no need to push the resume as soon as possible or it would be troublesome to push the resume as soon as possible. He still rushed me, but LITTLE did I know that it would be one of the causes of my great shame a few hours later.

A quarter of an hour later, the ## of Chengdu Document contacted me and asked me when it would be convenient for me to take the online written test. I was somewhat flattered, as if they had specially opened an independent runway for me, and they had worked hard for an applicant. So I thought a little, set the written test at 9 o ‘clock tonight.

course

Read the topic

Around 9 o ‘clock, I received the pen test link, one and a half hours two pen test questions, the topic is as follows:

Use React to implement a traffic light controller. By default, 1.1. the red light is on for 20 seconds and blinks for the last 5 seconds 1.2. The green light is on for 20 seconds and flashes for the last 5 seconds 1.3. The yellow light is on for 10 seconds 1.4. Lights =[{color: '# FFF ', duration: 10000, twinkleDuration: 5000},...] * /

import React from 'react'
import ReactDOM from 'react-dom'
class TrafficLightItem extends React.Component {}IPV4 IP addresses are 32-bit binary numbers. To improve readability, we usually divide them into groups of 8 bits, represent each part in decimal notation, and connect them with dots, such as 192.168.1.1. Obviously, there are IP addresses where the numbers 0 to 90 appear once each. In an IP address with this feature, there are several cases where the binary number is symmetric (i.e., "palindrome", which is represented as 32-bit binary without omits 0). What are the two cases? Require the highest possible performance */
Copy the code

I looked up the title and soon found the difficulty for me:

  • The first question uses React, which I have hardly ever used, but I believe this won’t be too much of a hindrment as the questions aren’t complicated
  • The second question is more obscure, I do not have a good idea to solve

So I made my answer plan:

  1. Finish the first problem
  2. The second way to do a part, too late to do part of the notes

Problem.

I wanted to run react first to know which syntax to write, so I googled react and found NPX create-react-app test1.

I opened the project, took a quick look at the structure and quickly created itcomponents/ 和 .js/.cssFile, but the next moment I ran into my first unexpected problem. The initializing project used the Function component, while the title used the Class component, and I was a little frustrated in trying to emulate the scaffolding template.

Luckily, I remember watching a video of react using the class component, so I didn’t have to go through the documentation like a headless fly, so I went to MOOC and found the React introduction video in my history, From there I found the way I wanted to write the class component (with a react snippet plug-in from vscode) and ran through the props way I was going to use later.

Because something happened in the initialization stage, I kept paying attention to the time and found that it was only more than ten minutes after I wrote the main structure and props parameters, so I didn’t think the situation was out of control. I found that the data structure provided by the topic could not guarantee the complete configuration of the street lamp, because the light color has three states and the time of each light should be controlled separately. Therefore, I extended the props parameters and simulation data, and completed the display of the components in the non-logical state. It was a little rough, but I didn’t feel anxious at this point, as I had nearly 70 minutes left, but what happened next shattered all my expectations and/or fantasies.

  1. Street lamp simulation data is an array, so I split the componentsTrafficLight 和 TrafficLightItem“, and uses a for loop to generate multiple, as I remember from the JSX syntax I sawTrafficLightItemBut this step is wrong… A TS error when I’m using JS…I tried many ways to solve this problem:
    • Vscode promptlights 是 anyType, I wonder if you need to explicitly define Array, but JS doesn’t define type
    • I wondered if there was a problem with HMR, and the editor also reported a random error, so I restarted the project and still reported an error in the browser
    • I doubt itlightsProp didn’t come through, so I’ll justlightsDefine variables in the current component, and even execute directly using simulated data (an Array) without defining variablesmapmethods

    Finally try adding a root node to the return and no more errors will be reported…

  2. React to dynamically switch colors, I need to know how react dynamically changes the style. I tried several methods, but finally decided to rely on Google
  3. To switch colors dynamically, I need to know how React updates the viewsetStateFunction, but how that function is called,stateIt couldn’t be a normal variable, so I went to Google and spent a lot of time tweaking and experimentingsetStateThe question of where to put the call (originally I putrenderFunction where the view stuck and couldn’t load until I realized I couldn’t) and finally passedThis articleTo solve all my problemsthis,setState,stateThe problem

After all the above processing, the time had already run out. I was very anxious with half an hour remaining, but strangely I didn’t give up. Maybe I thought I could do the first question well, but maybe I just didn’t have enough time to do the second question.

In the next 10 minutes, I wrote three state-switching functions: The twinkle function, init (the initialization state function), and lightInterval (the looped initialization function) handled the problem pointed to by this in the timer, but the streetlight state switch I wanted didn’t happen.

The next 15 minutes were the worst of my debugging days, as I tried and tried again and again with anxiety and numbness, but nothing worked. I know it’s asynchrony, but I don’t know why, my mind seems to go into stasis after writing the key function…

At 10:25, the interviewer reminded me to prepare to hand in the paper, and I struggled for two minutes in a trance. Finally, I handed in the paper at 10:28, and tried hard to give up the paper to the interviewer through nails.

Here is the original test paper handed over by a man who has worked for nearly five years and boasted of his good skills:

Use React to implement a traffic light controller. By default, 1.1. the red light is on for 20 seconds and blinks for the last 5 seconds 1.2. The green light is on for 20 seconds and flashes for the last 5 seconds 1.3. The yellow light is on for 10 seconds 1.4. Lights =[{color: '# FFF ', duration: 10000, twinkleDuration: 5000},...]  */ import React from 'react' import ReactDOM from 'react-dom' class TrafficLightItem extends React.Component { constructor(props) { super(props); const { stopColor = "red", passColor = "green", pendingColor = "yellow", stopDuration = 20000, stopTwinkleDuration = 5000, passDuration = 20000, passTwinkleDuration = 5000, pendingDuration = 10000, } = this.props.config; this.stopColor = stopColor this.passColor = passColor this.pendingColor = pendingColor this.stopDuration = stopDuration this.stopTwinkleDuration = stopTwinkleDuration this.passDuration = passDuration this.passTwinkleDuration = passTwinkleDuration this.pendingDuration = pendingDuration this.state = { coolr: this.stopColor }; } // initial async init() { // stop color await setTimeout(() => {}, this.stopDuration - this.stopTwinkleDuration); // stop color twinkle await this.twinkle(this.stopColor, this.stopTwinkleDuration) // switch to pass color this.setState({ color: this.passColor, }); await setTimeout(() => {}, this.passDuration - this.passTwinkleDuration); // pass color twinkle await this.twinkle(this.passColor, this.passTwinkleDuration) // switch to pending color this.setState({ color: this.pendingColor, }); } // interval async lightInterval() { this.init() let totalDuration = this.stopDuration + this.passDuration + this.pendingDuration; setInterval(this.init, totalDuration); } // async twinkle(color, duration) { let _timer await setTimeout(() => { let cur = color _timer = setInterval(() => { if (cur === color) { this.setState({ color: 'black' }) } else { this.setState({ color }) } }, 1000); }, duration) clearInterval(_timer) } componentDidMount() { this.timer = this.lightInterval(); } componentWillUnmount() { clearInterval(this.timer); } render() { return ( <div class="light" style={{ backgroundColor: this.state.color }}></div> ); } } class TrafficLight extends React.Component { render() { const lights = this.props.lights; return ( <div> {lights.map((light, index) => ( <TrafficLightItem key={index} config={light}></TrafficLightItem> ))} </div> ); } } ReactDOM.render(<TrafficLight/>, document.body); IPV4 IP addresses are 32-bit binary numbers. To improve readability, we usually divide them into groups of 8 bits, represent each part in decimal notation, and connect them with dots, such as 192.168.1.1. Obviously, there are IP addresses where the numbers 0 to 90 appear once each. In an IP address with this feature, there are several cases where the binary number is symmetric (i.e., "palindrome", which is represented as 32-bit binary without omits 0). What are the two cases? Required performance as high as possible * / function findPalindromeIPAddresses () {/ / code goes here} / / test the console. The log (findPalindromeIPAddresses ());Copy the code

reflection

The bugs that haven’t been solved in 15 minutes are actually very simple. After the dust settles, I found the problems soon. There are two:

  1. I useawaitWait for the macro task
  2. There is some confusion in the logic of flicker function, definedcurI didn’t change his value.

I’m afraid the reason for the first problem is that I wrote too little, so outrageous, with the sword to cut the former officer, I can’t think of any excuse. Once the apologies and courtesies were taken care of, I did in fact quickly fix the problem by adding a new one for asynchronous waitingwaitFunction.

No reflection on the second question.

Summary and Perception

When I decided to write this article, I was still filled with shame and sadness, shame at going through a special channel but acting like a clown, and sadness at betraying the trust of others. Therefore, I want to record the situation, urge myself to learn a little more in the future and try to avoid such accidents, but also want to write out to tell the ** and ## I contact, do not be depressed because of individual cases, please believe the applicant as always.

I can only be strong if I face my own bad.

2021/02/20 notable day

Additional note: this article is not intended to beat around the bush against Ali, and I hereby guarantee that I will not seek any ali job opportunities in this change of job