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 状态将有助于简化代码并避免潜在的错误。
以上就是React组件渲染完成如何安全地操作DOM？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
838
收藏
