Оё таҷрибаи кор кардан бе аналитик доштед, вақте ки бояд дар вазифаро худатон фаҳмед?
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> </> ) }
Танзимоти кукиҳо (httpOnly, secure, expires, domain, path) чӣ гуна аст?
WeakMap чист?
const { foo: bar, bar: foo } = { foo: 1, bar: 2 } console.log(bar) // console.log(foo) //
const createCounter = () => {
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);
React чӣ гуна props-ро муқоиса мекунад? Муқоисаи рӯизаминӣ чӣ гуна кор мекунад?
Дар бораи Event Loop гап зан: чӣ гуна кор мекунад, микросаволҳо ва макросаволҳо чистанд?
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);
useRef барои чӣ аст? Кадом истифодаҳо дорад?
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
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;
Типгузории функсияи getParam так, ки TypeScript худкор мавҷудияти хосиятҳоро дар объект нишон диҳад. Типгузориро тавре соз, ки имкон надошта бошад, массивҳоро гузаронидан.
Чаро debounce ва на throttle барои ҷустуҷӯ?
let obj = { a: 1 }; let array = [obj]; obj = null; console.log(obj); // console.log(array); //
Агар компоненте падарувандаи волидайн як массиви навро ҳамчун 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]) чист?