React组件渲染完成如何安全地操作DOM？

react 中页面渲染完成的生命周期

react 组件生命周期提供了几个方法回调，允许开发者在组件不同阶段执行特定的任务。页面渲染完成的生命周期是 componentdidmount()。

页面渲染前后查询 dom

在 componentdidmount() 内查询 dom 元素可能导致问题，因为此时并非所有元素都已渲染到 dom 中。代码示例中，尝试查询的元素还未渲染，因此出现 cannot read properties of NULL 错误。

解决方案

解决此问题的常见方法是使用 useeffect 钩子，它允许在组件的生命周期中执行副作用，包括在组件装载和更新时更新 dom。useeffect 钩子接受两个参数：一个回调函数和一个依赖项数组。

以下是使用 useeffect 来延迟对 dom 元素的查询的重写代码：

useEffect(() => {   if (props.scrollToIdx) {     const scrollToIdx = props.scrollToIdx;     setTimeout(() => {       const container = document.querySelector("#container");       const div: HTMLDivElement | null = document.querySelector(         "#item-" + scrollToIdx.toString()       );       // ... 操作     }, 100); // 延迟 100 毫秒等待元素渲染   } }, [props.scrollToIdx]);

避免重复状态

在组件中使用 usestate 钩子时，请注意避免不必要地保存数据。在当前示例中，data 状态是多余的，因为它可以通过 props.data 访问。删除 data 状态将有助于简化代码并避免潜在的错误。