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还是应该componentupdate（）？

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;

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

怀疑是造成延迟的原因。

我希望这会有所帮助。

反应：延迟输入更改

1 个答案: