Size: a a a
З
const App = createComponent({foo, bar}, (props, {foo, bar}) => {
})
useStore перестанет ощущаться как проблема)🚀🚀
Б
const App = createComponent({foo, bar}, (props, {foo, bar}) => {
})🚀🚀
🚀🚀
Б
const createAutoSubStore = (...args) => {
const store = createStore(...args);
return [store, autoSub(store)];
}
const [store1, store1Value] = createAutoSubStore(...);
const [store2, store2Value] = createAutoSubStore(...);
const [store3, store3Value] = createAutoSubStore(...);
const App = component(() => {
return <>
<div>{store1Value()}</div>
{someFlag
? <div>{store2Value()}</div>
: <div>{store3Value()}</div>
}
</>
})
Кстати помимо решения проблемы "double declaration problem", мы получаем еще дополнительную оптимизацию (в отличие от createComponent или useStore) - компонент будет подписан только на те сторы которые находятся в активном бранче условия - то есть если someFlag === true то компонент будет обновляться только когда меняется store2 и не будет реагировать на store1 потому что он от него временно не зависит (ну и наоборот когда someFlag === false)ip
ф
ip
ф
ip
ф
ip
ip
D
const createAutoSubStore = (...args) => {
const store = createStore(...args);
return [store, autoSub(store)];
}
const [store1, store1Value] = createAutoSubStore(...);
const [store2, store2Value] = createAutoSubStore(...);
const [store3, store3Value] = createAutoSubStore(...);
const App = component(() => {
return <>
<div>{store1Value()}</div>
{someFlag
? <div>{store2Value()}</div>
: <div>{store3Value()}</div>
}
</>
})
Кстати помимо решения проблемы "double declaration problem", мы получаем еще дополнительную оптимизацию (в отличие от createComponent или useStore) - компонент будет подписан только на те сторы которые находятся в активном бранче условия - то есть если someFlag === true то компонент будет обновляться только когда меняется store2 и не будет реагировать на store1 потому что он от него временно не зависит (ну и наоборот когда someFlag === false)ф
ф
ip
ф
ф
const App = () => {
const value1 = useStore(store1);
const value2 = useStore(store2);
const value3 = useStore(store3);
const value4 = useStore(store4);
const value5 = useStore(store5);
return (
<div>
<div>{value1}</div>
<div>{value2}</div>
<div>{value3}</div>
<div>{value4}</div>
<div>{value5}</div>
</div>
)
}
а я хочу писать как-то так (читать переменные сразу в шаблоне например вызывая через функцию без необходимости дублировать эти переменные через useStore)const App = () => {
return (
<div>
<div>{value1()}</div>
<div>{value2()}</div>
<div>{value3()}</div>
<div>{value4()}</div>
<div>{value5()}</div>
</div>
)
}
И можно было бы написать простой враппер const value1 = () => useStore(store1) - но проблема в том реакт выдаст ошибку (или будут баги) если вызывать useStore внутри условий - <div>{someFlag ? value1() : value2()}</div>