и снова здрасьте - reactjs спустя годы - понаделали тут всякого понимашь!
https://stackoverflow.com/a/70937134/2910338
events - syntheticEvent - in reactjs events catches from root mount dom element.
that's why propagation goes from top to bottom.
на самом верхнем уровне где react app там ловятся все события и создается реакт SyntheticEvent - потом прежде чем всплывет к корню dom дерева проходит через них всех.
event.stopPropagation();
src: https://blog.saeloun.com/2021/07/08/react-17-event-delagation.html
https://habr.com/ru/post/467361/
console.trace();
***************
error boundary( componentDidCatch) в хуках нет аналога
хуки неззя юзать в классах
хуки можно юзать только в react компонентах и в других хуках
хуки неззя использовать в циклах и условиях тк значения хуков пишутся последовательно в массив внутри реакта.
useCallback кеширует функцию
useMemo кеширует результат функции
useCallback и useMemo не гарантируют что будут вызваны только при мутировании функции/данных - это лишь оптимизация производительности.
const usePlanetName = (id) => {
const [name, setName] = useState(null );
useEffect(() =>{
fetch(`/url${id}`).then(res => res.json()).then(data => !cancelled && setName(data.name))
}, [id])
return name;
}
хуки реагируют на данные а не на жц.
useEffect(yourCallback, []) - will trigger the callback only after the first render. componentDidMount только первый раз.
useEffect(f1, []) если второй пустой массив то будет только на mount. null или ничего, то на каждое обновление. первое получение данных это тоже изменение - будет реакция хука как mount.
реагирует на изменение второго аргумента.
вернуть функцию может - вызывается при каждом новом срабатывании этого хука.
componentWillUnmount = useEffect(()=>()=>ci('unmount), [])
useEffect(()=>{
ci('mount')
return ()=>ci('unmount), [])
https://stackoverflow.com/a/35213639/2910338 innerText vs textContent
пример:
useEffect(()=>{
let cancelled = false;
fetch(`/url${id}`).then(res => res.json()).then(data => !cancelled && setName(data.name))},[id])
useState - полностью перезаписывает state то есть если часть перезаписать то через функцию.
а setState({key:val}) заменить только это поле key в state.
`${val}px`
Object.assign({}, this.state, {key1: var1})
или setState({...this.state, {nested levels}})
или в хуках (state) =>{
return {...state, key1: 'val1'}}
рефакторинг:
5. puppeter чтобы прокликивать при тестах
4. React.Lazy
3. всё что раньше через mapStateToProps теперь через hook useSelector
2. функции из jsx вынести - это для useCallback чтобы меньше перерисовок.
src: 19 00 https://www.youtube.com/watch?v=fFCTfj4zd-A&t=384s&ab_channel=UlbiTV
проект с примерами https://github.com/findli/game-store
1. useEffect это пару штук на компонент - это всегда про сайд эффекты например получить данные на действия; отреагировать на изменения пропса и сделать это внутри компонента.
логика в редюсер или в custom hook.
************
************
************паттерн
React.Children.map(this.props.children, (chuld, idx)=>{
return <CustomElem>{child.name}</CustomElem>})
тут чтобы менять готовый элемент надо юзать cloneElement чтобы добавить свойства в готовый jsx элемент( тк они типа immutable )
HOC:
в стрелке с параметром return class extends Component{
который юзает переданное}
и всякие контракты выносить - типа getData, HowToRenderPureCompopnent
еще заглушка:
const withChildFunction = (Wrapper, fnToRenderWithProps) => {
return (props) => {
return <Wrapped {... props}>{fnToRenderWithProps}</Wrapped>}
}
src: react-redux-professionalnaya-razrabotka?lesson=81
можно hoc Consumer контекста сделать
src 84
еще один враппер чтобы мапить названия метода сервиса в рандомные в фурнкции в парматре в hoc
src 85
const add = (a,b) => a + b;
add(a,b)
const add = (a) => (b) => a + b;
add(1)(2) каррирование - частично примененные функции partially applied functions
смысл - передают часть аргументов и возвращают новые функции с меньшим кол-вом параметров.
src: 88
const compose = (...funcs) =>(comp) =>{
return funcs.reduceRight((prevResult, f)=>f(prevResult), comp}
compose(
withService(mapper), ...)(ItemList);
src: 89
ComponentList.defaultProps = {
...
}
внутри класс компонента static defaultProps:...
static propsTypes
src: 91
************
************
********************
стрелочные функции запоминают контекст где были объявлены и поэтому их this это контекст обявления.
********************
********************
********************
можно сделать errorboundary
в componentdidcatch ловить и через state показать ошибку gracefull user friendly
и в render return this.props.children
this convenient reusable way to handle error in wrapper .
********************
********************
********************
debugger в коде это break point в browser!
********************
********************
*******************
uuid модуль для генератора id.
*******************
*******************
*******************
const {var1 = 'defaultVal'} = this.props.
*******************
*******************
*******************
мутировать массивы неззя тк полностью перерисуется
то есть вместо splice(idx, 1) который мутирует массив стейта
надо before = arrState.slice(0, idx) - slice не мутирует массив!
after = arrState.slice(idx+1)
newState = [...before, ... after];
даже arr.push() тоже мутирует массив - state неззя мутировать!
то есть надо:
this.setState(({arrState})=>{
const newArr =[...arrState, newItem];
то есть ссылки не изменились! и rerender не будет! гыы)
return {arrState:newArr}
})
even more!:
id=>{
this.setState(({arrState})=>{
const idx = arrState.findIndex(el => el.id === id);
//arrState[idx].done = !arrState[idx].done;// так неззя! мутируем текущий стейт!
надо скопировать и сделать из старых элементов:
const oldItem = arrState[idx]
const newItem =[...oldItem, done: !oldItem.done];
const newArr = [
...arrState.slice(0,idx),
newItem,
... arrState.slice(idx + 1)
];
return {arrState: newArr}
})
}
*******************
*******************
*******************
setState((state)=>{
если мутирование на основе текущего стейта то в функции тк асинхронно
})
*******************
*******************
*******************
еще если надо тут же юзать обновленное состояние то можно добавить следующую функцию чтобы точно получить новый state
changeTitle: function changeTitle (event) {
this.setState({ title: event.target.value }, function() {
this.validateTitle();
});
},
validateTitle: function validateTitle () {
if (this.state.title.length === 0) {
this.setState({ titleError: "Title can't be blank" });
}
},
src: https://stackoverflow.com/questions/42038590/when-to-use-react-setstate-callback
*******************
*******************
src: course/react-redux-professionalnaya-razrabotka?lesson=43
Комментарии
Отправить комментарий