Всем привет. Столкнулся с задачей, где на странице около 100 блоков (отдельные компоненты в цикле).
В каждом блоке есть инпуты, которые при onChange делают диспатч. Каждый раз, когда делаю dispatch заново рендерятся все эти 100 блоков, что жудко тормозит.
Я понимаю, что это все оптимизировать можно с помощью setState() , тогда будет ререндер текущего компонента. Но тогда мне придется собирать данные из каждого компонента, компоновать и отправлять на сервер. Тогда нафига Redux )
Попробую кратно показать код:
//Reducer
const initialState = {
quiz: {},
}
export default function reducer(state = initialState, action = {}) {
switch(action.type){
case 'UPDATE_QUIZ' : return state = {...state, quiz: action.payload};
}
return state;
}
// Компонент
render(){
return(
<Quiz>
{this.props.quiz.questions.map((question) => {
<Question key={question.hash}>
{question.answers.map((answer) => {
<Answer answer={answer} key={answer.hash}/>
}) }
</Question>
})}
)
}
// Answer Component
render(){
return(
<div> <input name='name' value={this.props.answer.name} onChange={(e)=>{
this.props.dispatch(updateAnswer())
}}> </div>
)
}
// Action updateAnwer()
function updateAnsert(){
// Тут я беру из редукс стора такие данные
let newQuiz = quiz.questions[qIndex].answers[aIndex].name = value
return {type: 'UPDATE_QUIZ, payload: newQuiz}
}
