У меня довольно большой массив объектов в состоянии родительского компонента. И когда я передаю их как реквизиты дочерним компонентам (которые не имеют состояния, только реквизиты), у меня возникает огромная задержка при наборе (в дочерних компонентах) при изменении ввода.

Я уже читал ответы на подобные вопросы. ReactJS задержка onChange при наборе текста и рекомендации по использованию shouldcomponentupdate responsejs: ShouldComponentUpdate для состояний .

Но, к сожалению, я все еще не понимал, как применить это в моем примере : https://codesandbox.io/s/react-example-8vlc2 . Родительский компонент — index.js. Так:

1) Должен ли я использовать componentdidupdate или mustcomponentupdate () в детских компонентах (StoryList.tsx и StoriesScreenItem / StoriesScreenList)?

2) Должен ли я добавить состояние в компоненте детей, чтобы использовать componentdidupdate или shouldcomponentupdate ()?

3) Почему задержка ввода происходит в моем примере?

4) Или какие-нибудь другие идеи, как я могу справиться с этой проблемой?

Любая помощь будет оценена!

Мое предложение было бы создать функциональный компонент для истории.

Это может выглядеть примерно так:

export const Story = props ={amp}gt; { const [story, setStory] = useState(props.story); const handleChange = e ={amp}gt; { const updatedStory = {...story}; updatedStory.caption = e.target.value; setStory(updatedStory); }; return ( {amp}lt;div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;div{amp}gt; {story.previewUri ? ( {amp}lt;div{amp}gt; {amp}lt;img style={{ objectFit: "cover", border: "4px solid #1ec1b6" }} width="110" height="168" src={story.previewUri || null} alt={"Фото сториc"} /{amp}gt; {amp}lt;/div{amp}gt; ) : ( {amp}lt;div style={{ border: "4px solid #1ec1b6", textAlign: "center", fontSize: "14px" }} {amp}gt; Link image {amp}lt;/div{amp}gt; )} {amp}lt;div{amp}gt; {amp}lt;span{amp}gt;Story{amp}lt;/span{amp}gt; {amp}lt;div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;span{amp}gt;Preview title{amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;input style={{ width: "100%" }} maxLength={99} value={story.caption} onChange={e ={amp}gt; handleChange(e)} /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;StoriesScreenList screens={story.stories} onChange={screens ={amp}gt; props.changeScreen(screens, props.index)} /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ); }; export default Story; 

Каждый из них будет иметь свое собственное состояние, поэтому вам не придется обновлять весь массив историй каждый раз, когда меняется одна история.

Что является подозрительным, это то, что создает задержку.

Надеюсь, это полезно.

Soenderby

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,