公告
公告-窝的迁移
杂七杂八的东西，之前从我开始转前端开始一直写在了博客园（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").lengthvar ol = 0while (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条件中 |
卸载时
执行时机 组件从页面消失
| 钩子函数 | 触发时机 | 作用 |
|---|---|---|
| componmentWillUnmount | 组件卸载从页面中消失 | 执行清理工作比如清理定时器 |
公告
公告-窝的迁移
杂七杂八的东西，之前从我开始转前端开始一直写在了博客园（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").lengthvar ol = 0while (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条件中 |
卸载时
执行时机 组件从页面消失
| 钩子函数 | 触发时机 | 作用 |
|---|---|---|
| componmentWillUnmount | 组件卸载从页面中消失 | 执行清理工作比如清理定时器 |