公告-窝的迁移-优快云博客

本文链接：https://blog.youkuaiyun.com/Ruichaichai/article/details/123479158

这篇博客探讨了在React应用中如何使用`componentDidUpdate`生命周期方法来操作DOM，特别是在更新排班表格时，当某一天设置为休息后单元格变色的实现。作者分享了代码示例，展示了如何在DOM元素上添加和移除特定样式以达到预期效果。此外，还简要回顾了React组件的生命周期及其主要用途。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

公告-窝的迁移

杂七杂八的东西，之前从我开始转前端开始一直写在了博客园（R），因为一些原因，断更了很久，现在打算把细化的各种分类写在这边，原来的还会更，但是不会细分。坚持记录…

也见证一下心无旁骛的一段时间，为接下来的日子，可以搬出去，养只猫，哈哈哈哈嗝儿~

（好吧，我是水了一条，啦啦啦啦啦~）
在这里插入图片描述

行吧(ﾉ_ _)ﾉ

发文助手不让我水(▼ヘ▼#)

重要的公告已经说完了，那接下来谈谈之前碰到的React中操作Dom元素吧

componentDidUpdate()

基于react和antds组件有这样一个需求每个月的排班表格中每一天的格子都可以点进去修改如果当天的排班被设置成休息保存成功后这个格子会变成红色

效果如下
在这里插入图片描述

利用react生命钩子来对DOM进行操作


```javascript
const columsDay = {
          title: n,
          className: (week === '六' || week === '日') ? 'weekendtable' : '',
          key: 'date' + n,
          width: 170,
          children: [
            {
              title: week,
              dataIndex: n < 10 ? 'date0' + n : 'date' + n,
              width: 170,
              key: 'childdate' + n,
              className: (week === '六' || week === '日') ? 'weekendtable' : 'weeks',
              render: (text, record, index) => {
                return (
                  <div style={{ width: '100%', height: '100%' }}
                    className={text.TPROG === 'OFF' ? '**offtable**' : null}
                    onClick={() => {
                      this.toRescind(text, date);
                    }}>
                    <div>{text.TPROG}</div>
                    <div>{text.TTEXT}</div>
                  </div>
                );
              },
            },
          ],
        }


```javascript
// 操作dom改变班次休息单元格背景色
  componentDidUpdate() {
    if (document.getElementsByClassName("offtable")) {
      const offlength = document.getElementsByClassName("offtable").length
      var ol = 0
      while (ol <= offlength) {
        document.getElementsByClassName("offtable")[ol] ? document.getElementsByClassName("offtable")[ol].parentNode.style.background = "#FFF9F9" : '';
        ol++
      }
    }
  }

React生命周期

执行时机：组件创建时(页面加载时)

constructor

render

componmentDidMount

钩子函数	触发时机	作用
constructor	创建组件时最先执行	初始化state，为事件处理程序绑定this
render	每次组件渲染都会触发	渲染UI（注意：不能调用setState）
componmentDidMount	组件挂载（完成DOM渲染）后	发送网络请求，DOM操作

更新时

render (New props 接收到新的参数)(调用setState())(forceUpdate()强制刷新)

componmentDidUpdate

钩子函数	触发时机	作用
render	每次组件渲染都会触发	渲染UI（与挂在阶段是同一render）
componentDidUpdate	组件更新（完成DOM渲染）后	发送网络请求，DOM操作，注意：如果要setState()必须放在一个if条件中