ooo4 最近的时间轴更新 ooo4 最近的时间轴更新 |
ooo4形而上学，不行上班 V2EX 第 635754 号会员，加入于 2023-06-25 17:16:34 +08:00今日活跃度排名 6379 |
chengdu
菜鸟前端
| react 新手关于 react useEffect 的困惑，为什么 useEffect 里面的 cleanup 函数里面的 props 是旧的，如何从源码解释？
1 React • ooo4 • 1 天前 • 最后回复来自 realJamespond
|
47 |
| 明年想换个 react 的工作了，最近也在 debugger react 源码，但是并没有做过 react 的真实项目，简历可以写熟悉 react 吗，或者说只是这种能接到面试吗？ 前端开发 • ooo4 • 2 天前 • 最后回复来自 lijianan | 17 |
| 这个 x 为什么是 true？看不懂了 Vue.js • ooo4 • 195 天前 • 最后回复来自 DOLLOR | 5 |
| v 友们，帮忙看看我的简历，全都是已读不回，该怎么改？ 职场话题 • ooo4 • 193 天前 • 最后回复来自 qsnow6 | 85 |
| 想更加深入下 react，有什么推荐的 mini-react 仓库 前端开发 • ooo4 • 208 天前 |
| vscode 中的 zsh 多了个 "\"，有人知道怎么取消这个吗？ Visual Studio Code • ooo4 • 271 天前 • 最后回复来自 linzhe141 | 2 |
| tailwindcss 的 vscode 插件，必须要先输入空格后才有智能提示，直接写没有智能提示？ Visual Studio Code • ooo4 • 286 天前 • 最后回复来自 linzhe141 | 4 |
| 谷歌浏览器不知道怎么了，开发者工具里面的字体变了，如何还原成默认的？ 问与答 • ooo4 • 291 天前 • 最后回复来自 Track13 | 8 |
| vscode 设置了 clash 的代理，但是相关的 git 操作，还是报错 fatal: unable to access Visual Studio Code • ooo4 • 343 天前 • 最后回复来自 EspoirBao | 21 |
| github action 的 pnpm --filter 和本地执行不一致? Node.js • ooo4 • 345 天前 • 最后回复来自 kemchenj | 2 |
ooo4 最近回复了
2 天前 回复了 imba97 创建的主题 › 程序员 › 关于今天给前端返回数据的结构的争论 |
以前我也觉得后端返回的数据结构应该保持一致，直到后面被安排到其他项目组，里面的后端都是公司呆了 10 多年那种，接口写的十分的丑陋，什么拼音啊，额外字段用什么 xxx1 ，xxxx2 ，xxxx3 前端根本用不上，虽然代码很恶心，但管他的，说不定明年你就跑路了
2 天前 回复了 zhengfan2016 创建的主题 › Vue.js › 大佬们， vue3 新人求教，就没有办法对 ref 包装的 obj 进行解构吗 |
@zhengfan2016 因为 setup 函数不是副作用，所以不会重新执行，那么 toRefs 的数据在没有其他副作用的情况下，是不会改变的
如果保持你的代码，那么只能改渲染函数了，让他尽量的像 react
```
// Comp.js 不是 sfc
import { watchEffect, onMounted, toRefs, ref } from 'vue';
export default {
setup() {
let data = ref()
onMounted(() => {
setTimeout(() => {
data.value = { code: 0, data: [666, 777, 888] }
}, 1000)
})
return () => {
// 渲染函数 这是副作用，当响应式数据改变了，就会重新执行
const { data: list } = toRefs(data.value) || {}
watchEffect(() => {
console.log('list', list?.value)
})
// jsx
return 1
}
}
}
```
如果保持你的代码，那么只能改渲染函数了，让他尽量的像 react
```
// Comp.js 不是 sfc
import { watchEffect, onMounted, toRefs, ref } from 'vue';
export default {
setup() {
let data = ref()
onMounted(() => {
setTimeout(() => {
data.value = { code: 0, data: [666, 777, 888] }
}, 1000)
})
return () => {
// 渲染函数 这是副作用，当响应式数据改变了，就会重新执行
const { data: list } = toRefs(data.value) || {}
watchEffect(() => {
console.log('list', list?.value)
})
// jsx
return 1
}
}
}
```
3 天前 回复了 zhengfan2016 创建的主题 › Vue.js › 大佬们， vue3 新人求教，就没有办法对 ref 包装的 obj 进行解构吗 |
toRefs 的参数必须是一个对象才行,而且必须还要存在属性，因为它要把对应的属性值变成 ref 。
而现在使用的是 ref 包裹数据，那么也应该是`const {data:list} = toRefs(data.value)`才行，让 list 变成了响应式数据，
但是是通过`data.value = { code: 0, data: [666, 777, 888] }`改变数据，也只是改变了 data(ref)，list 并没有改变，所以 list 还是以前的数据，如果这样`Object.assign(data.value, { code: 0, data: [666, 777, 888] })`修改数据应该可以
看错了 [如果对 ref 包装的 obj 进行解构]
```
import { reactive, watchEffect, onMounted, toRefs, ref } from 'vue';
const data = ref({ code: null, data: [] })
onMounted(() => {
setTimeout(() => {
Object.assign(data.value, { code: 0, data: [666, 777, 888] })
}, 1000)
})
debugger
const { data: list } = toRefs(data.value)
watchEffect(() => {
console.log('list', list.value)
})
```
而现在使用的是 ref 包裹数据，那么也应该是`const {data:list} = toRefs(data.value)`才行，让 list 变成了响应式数据，
但是是通过`data.value = { code: 0, data: [666, 777, 888] }`改变数据，也只是改变了 data(ref)，list 并没有改变，所以 list 还是以前的数据，如果这样`Object.assign(data.value, { code: 0, data: [666, 777, 888] })`修改数据应该可以
看错了 [如果对 ref 包装的 obj 进行解构]
```
import { reactive, watchEffect, onMounted, toRefs, ref } from 'vue';
const data = ref({ code: null, data: [] })
onMounted(() => {
setTimeout(() => {
Object.assign(data.value, { code: 0, data: [666, 777, 888] })
}, 1000)
})
debugger
const { data: list } = toRefs(data.value)
watchEffect(() => {
console.log('list', list.value)
})
```
3 天前 回复了 zhengfan2016 创建的主题 › Vue.js › 大佬们， vue3 新人求教，就没有办法对 ref 包装的 obj 进行解构吗 |
@ooo4
不需要这么麻烦
```
import { reactive, watchEffect, onMounted, toRefs } from 'vue';
const data = reactive({ code: null, data: [] })
onMounted(() => {
setTimeout(() => {
Object.assign(data, { code: 0, data: [666, 777, 888] })
}, 1000)
})
const { data: list } = toRefs(data)
watchEffect(() => {
console.log('list', list.value.length)
})
```
不需要这么麻烦
```
import { reactive, watchEffect, onMounted, toRefs } from 'vue';
const data = reactive({ code: null, data: [] })
onMounted(() => {
setTimeout(() => {
Object.assign(data, { code: 0, data: [666, 777, 888] })
}, 1000)
})
const { data: list } = toRefs(data)
watchEffect(() => {
console.log('list', list.value.length)
})
```
3 天前 回复了 zhengfan2016 创建的主题 › Vue.js › 大佬们， vue3 新人求教，就没有办法对 ref 包装的 obj 进行解构吗 |
试试这个
const data = reactive({ code: null, data: [] })
onMounted(() => {
setTimeout(() => {
Object.assign(data, { code: 0, data: [666, 777, 888] })
}, 1000)
})
function useFoo(state) {
const res = {}
watchEffect(() => {
for (let key in state) {
res[key] = toRef(state, key)
}
})
return res
}
const { data: list } = useFoo(data)
watchEffect(() => {
console.log('data', data)
console.log('list', list)
})
const data = reactive({ code: null, data: [] })
onMounted(() => {
setTimeout(() => {
Object.assign(data, { code: 0, data: [666, 777, 888] })
}, 1000)
})
function useFoo(state) {
const res = {}
watchEffect(() => {
for (let key in state) {
res[key] = toRef(state, key)
}
})
return res
}
const { data: list } = useFoo(data)
watchEffect(() => {
console.log('data', data)
console.log('list', list)
})
3 天前 回复了 ooo4 创建的主题 › React › react 新手关于 react useEffect 的困惑，为什么 useEffect 里面的 cleanup 函数里面的 props 是旧的，如何从源码解释？ |
@zhengfan2016 因为我在调试 react 源码，不想通过合成事件去触发，徒增额外调试
4 天前 回复了 ooo4 创建的主题 › React › react 新手关于 react useEffect 的困惑，为什么 useEffect 里面的 cleanup 函数里面的 props 是旧的，如何从源码解释？ |
@shintendo 从 chrome 的 debugger 工具看，这个 props 确实是来源于闭包，thanks!!
7 天前 回复了 ooo4 创建的主题 › 前端开发 › 明年想换个 react 的工作了，最近也在 debugger react 源码，但是并没有做过 react 的真实项目，简历可以写熟悉 react 吗，或者说只是这种能接到面试吗？ |
@maclanelf134 那不至于，主要是嫌弃公司的垃圾项目，不想维护
7 天前 回复了 ooo4 创建的主题 › 前端开发 › 明年想换个 react 的工作了，最近也在 debugger react 源码，但是并没有做过 react 的真实项目，简历可以写熟悉 react 吗，或者说只是这种能接到面试吗？ |
@Liam1997 项目没写过，但 react 的官网看过几次，可以用一个很简单的 demo 打断点一步一步的调试，再看看那些大佬总结的笔记，调试过十几次自然就看的进去了，不过也就简单了解下核心流程
7 天前 回复了 ooo4 创建的主题 › 前端开发 › 明年想换个 react 的工作了，最近也在 debugger react 源码，但是并没有做过 react 的真实项目，简历可以写熟悉 react 吗，或者说只是这种能接到面试吗？ |
@tog vue 技术栈，但公司的 vue2 老项目太恶心了基本改不动，为什么突然想换了，因为想涨工资了
Select Language