Կուկիների ինչ կարգավորումներ կան (httpOnly, secure, expires, domain, path)?
Frontend
Ինչպե՞ս հասկանում եք, թե ինչ է ռենդերը React-ում: Ինչո՞ւ կարող է դա տեղի ունենալ։
Դու երբևէ ունեցել ես փորձ առանց վերլուծաբանի աշխատելու, երբ պետք է ինքնուրույն հասկանալ գործը?
import React, { useState, useEffect, useRef, useContext, useReducer, useMemo } from 'react'; export default Effects = () => { const [count, setCount] = useState(0); useLayoutEffect(() => console.log("յուրաքանչյուր ռենդեր 1")); console.log("յուրաքանչյուր ռենդեր 2"); useEffect(() => console.log("յուրաքանչյուր ռենդեր 3")); return ( <> <button onClick={() => setCount((prevProps) => ++prevProps)}> Հավաքել </button> </> ) }
const createCounter = () => {
Ի՞նչ է WeakMap-ը։
const obj = [{ value: 1, elems: [ { value: 2, elems: [ { value: 3 }, { value: 6 }, ... ] }, { value: 4, elems: [ { value: 5, elems: [ { value: 6 }, ... ]} ] } ] }] ------------- setTimeout(() => { console.log(1); }, 0); const p = new Promise(resolve => { console.log(2); resolve(); }); p.then(() => { console.log(3) }).then(() => { console.log(4); }); console.log(5);
const { foo: bar, bar: foo } = { foo: 1, bar: 2 } console.log(bar) // console.log(foo) //
Ինչպե՞ս է React-ը համեմատում props-ները: Ինչպե՞ս է աշխատում մակերեսային համեմատությունը։
Պատմիր ինձ Event Loop-ի մասին՝ ինչպես է աշխատում, ինչ են միկրոցուրտերը և մակրոցուրտերը?
useRef ինչի համար է: Ի՞նչ կիրառումներ ունի։
const { foo: bar, bar: foo } = { foo: 1, bar: 2 }; //foo //bar setTimeout(() => { console.log("timeOut"); }, 0); console.log(1); new Promise((resolve) => { console.log("Promise"); setTimeout(() => { console.log("timeOut2"); resolve(); }, 0); }) .then(() => { console.log("then1"); }) .then(() => { console.log("then2"); }); console.log(4); setTimeout(() => { console.log("timeOut3"); }, 0);
Տիպավորիր getParam ֆունկցիան այնպես, որ TypeScript-ը ինքնուրույն նշի օբյեկտում հատկությունների առկայությունը: Տիպավորումը կազմիր այնպես, որ հնարավոր չլինի փոխանցել զանգվածներ։
import { useState, useRef, useEffect } from "react"; const useDebugRender = ({props}) => { const prevProp = useRef(props) useEffect(() => { }, []) } const ParentComponent = () => { const [random, setRandom] = useState(0); // Prop-ով փոխանցվում է երեխա կոմպոնենտին const [text, setText] = useState(""); // Prop-ով փոխանցվում է երեխա կոմպոնենտին const createRandom = () => setRandom(Math.floor(Math.random() * 100)); const onTextChange = (e) => setText(e.target.value); const [count, setCount] = useState(0); const incrementCount = () => setCount((prev) => prev + 1); // Այս ֆունկցիան փոխանցվում է Prop-ով երեխա կոմպոնենտին return ( <> <Count: {count} /> <input type="text" onChange={onTextChange} /> <button onClick={createRandom}>Ստեղծել պատահական</button> <div> <ChildComponent random={random} text={text} incrementCount={incrementCount} /> </div> </> ); }; export default ParentComponent;
const Effects = () => { const [count, setCount] = useState(0); useLayoutEffect(() => console.log("յուրաքանչյուր ռենդեր 1")); console.log("յուրաքանչյուր ռենդեր 2"); useEffect(() => console.log("յուրաքանչյուր ռենդեր 3")); return ( <> {count} <button onClick={() => setCount((prevProps) => ++prevProps)}> Հավաքել </button> </> ); }; export default Effects; // 1 ռենդեր: // Դրանից հետո սեղմում: const Effects = () => { const [count, setCount] = useState(0); const [number, setNumber] = useState(0); useEffect(() => { console.log(count); return () => { console.log(count); }; }); return ( <> {count} <button onClick={() => setCount((prevProps) => ++prevProps)}> Հավաքել </button> </> ); }; export default Effects; // 1 ռենդեր: // 2 1 3 // Դրանից հետո սեղմում: // 2 1 3 // null վերադարձնել: // 2 1 3 // // 1: 1, 0 // +: 1, 2 // ++: 2, 2
let obj = { a: 1 }; let array = [obj]; obj = null; console.log(obj); // console.log(array); //
Ինչու debounce, ոչ թե throttle որոնման համար?
Եթե ծնողական կոմպոնենտը նոր զանգված փոխանցի որպես props, արդյոք դուք նոր տվյալները կտեսնեք էկրանին կամ հիները: Ինչու՞
const submit = useCallback((el) => () => { log(el); }, []); arr.map(el => <button onClick={submit(el)} />) arr.map(el => <SomeComp key={} onClick={() => submit(el)} />) const param = useMemo(() => ({c: a + b}), [a,b]) return <Child value={param} /> Child = React.memo(() => {})
Ի՞նչ տարբերություն կա await p1, await p2 և Promise.all([p1, p2]) միջև։