let x = 5; (function () { console.log(x); let x = 0; })()
Frontend
Mesélj a useCallback-ről — felhasználási forgatókönyv, miért szükséges?
Mit csinál az in operátor a TypeScript-ben?
Beszélj a React-ben végzett űrlamunkáról: kontrollált és kontrollálatlan komponensek, az egyes megközelítések előnyei és hátrányai.
Feladat: járd végig egy objektumfát (minden objektumnak van value és elements mezője), és számold össze az összes értéket. Hogyan valósítanád meg?
const LiveSearch = () => { const [inputValue, setInputValue] = useState('') const onInputChange = (e) => { setInputValue(e.target.value) search(e.target.value) } return ( <div> <input value={inputValue} onChange={onInputChange} type="text" /> </div> ) } <span> Keresés: <LiveSearch /> </span>
Mi az a React.memo? Mikor alkalmazzuk a useCallback-et?
// A szerverről származó adatok a termék áráról a következő formában érkeztek: // 12345678 (az ár lehet bármilyen, de 1 és [phone] között) // Írjon egy függvényt, amely az árat formázott sztringgé alakítja a következő módon: // 12'345'678
function sum(a, b) { return a + b; } function memo() {}
Dolgozott már Blob-pal? Hogyan hozhat létre egy linket egy dinamikusan generált fájl letöltéséhez?
Mesélj a React-komponensek életciklusának szakaszairól
const X = { a: 1, b: 2, c: 3, d: 4 } function getProperty(obj, key) { // Feladat: típusosítsa a függvényt return obj[key] } getProperty(X, 'a') // nincs hiba getProperty(X, ' ') // hiba: kulcs nem érvényes kulcs az X objektumhoz getProperty({ name: 'Sergey' }, 'name') // nincs hiba
Hogyan valósítható meg a fa bejárása rekurzió nélkül? Milyen adatszerkezet segít?
Mesélj a Virtual DOM-ról és a reconciliation mechanizmusról a React-ben. Hogyan optimalizálja a React a fák összehasonlítását?
Hogyan jelenítsünk meg egyszer egy bannert egy bejelentkezett felhasználónak minden eszközén?
import React, { useState, useEffect, useRef, useContext, useReducer, useMemo } from 'react'; export default () => { const [count, setCount] = useState(0); useLayoutEffect(() => console.log("minden render 1")); console.log("minden render 2"); useEffect(() => { console.log("minden render 3"); return () => { console.log(4); }; }, [count]); return ( <button onClick={() => setCount((prevProps) => ++prevProps)}> Növelés </button> ); }
Mi az a tisztítási (cleanup) funkció a useEffect-ben? Mikor fut le? Írd be a useEffect-be.
Mi történik, ha megváltozik a komponens típusa? Segít-e ugyanaz a kulcs megőrizni az állapotot?
Mesélj a React Hook Form-ról: fő lehetőségek, hogyan használják, hogyan működik az érvényesítés?
const { foo: [bar], bar: [{ baz: foo }] } = { foo: [1], bar: [{ baz: 3 }] } console.log(bar) console.log(foo) //