反应：输入更改的延迟

Question

在父组件的状态下，我有一个相当大的对象数组。当我将它们作为道具传递给子组件（没有状态，只有道具）时，当输入发生变化时，我在输入（在子组件中）时会有很大的延迟。

我已经阅读了类似问题的答案ReactJS delay onChange while typing 以及使用 shouldcomponentupdate reactjs : ShouldComponentUpdate for states 的建议。

但是，不幸的是，我仍然不明白如何在我的示例中应用它：https://codesandbox.io/s/react-example-8vlc2。父组件是 index.js 。所以：

1) 我应该在子组件（StoryList.tsx 和 StoriesScreenItem/StoriesScreenList）中使用 componentdidupdate 还是 shouldcomponentupdate() ？

2) 我应该在子组件中添加状态以使用 componentdidupdate 还是 shouldcomponentupdate() ？

3) 为什么在我的示例中会出现输入延迟？

4) 或者任何其他想法我该如何解决这个问题？

任何帮助将不胜感激！

Answer 1

我的建议是为故事创建一个功能组件。

它可能看起来像这样：

export const Story = props => {
   const [story, setStory] = useState(props.story);
   const handleChange = e => {
       const updatedStory = {...story};
       updatedStory.caption = e.target.value;
       setStory(updatedStory);
   };
   return (
       <div>
           <div>
               <div>
                   {story.previewUri ? (
                       <div>
                           <img
                               style={{
                               objectFit: "cover",
                               border: "4px solid #1ec1b6"
                            }}
                            width="110"
                            height="168"
                            src={story.previewUri || null}
                            alt={"Фото сториc"}
                        />
                    </div>
                ) : (
                    <div
                        style={{
                            border: "4px solid #1ec1b6",
                            textAlign: "center",
                            fontSize: "14px"
                        }}
                    >
                        Link image
                    </div>
                )}

                <div>
                    <span>Story</span>

                    <div>
                        <div>
                            <span>Preview title</span>
                        </div>
                        <div>
                            <input
                                style={{ width: "100%" }}
                                maxLength={99}
                                value={story.caption}
                                onChange={e => handleChange(e)}
                            />
                        </div>
                    </div>
                </div>
            </div>

            <StoriesScreenList
                screens={story.stories}
                onChange={screens => props.changeScreen(screens, props.index)}
            />
           </div>
       </div>
    );
};
export default Story;

每个都有自己的状态，因此您不必在每次更改单个故事时都更新整个故事数组。

令人怀疑的是造成延迟的原因。

我希望这会有所帮助。