🐑置顶2022-09-14 来自北京你好，我是《现代React Web开发实战》的编辑辰洋，这是👇项目的源代码链接，供你学习与参考： https://gitee.com/evisong/geektime-column-oh-my-kanban/releases/tag/v0.8.0
学习前端-react2022-09-11 来自内蒙古附和！之前常见在vue2中经常会去理解父子组件的生命周期函数执行顺序。如created（父） - created（子）- mounted（子）- created（父）。对于react created 代表render前，mounted 代表render后。所以react 生命周期的执行顺序为。 class 组件： constructor（父） - render (父) - constructor（子） - render(子) - componentdidmounted（子）- ComponentDidMounted（父）。 hooks 组件：生命周期不显。作者回复: 你好，Geek_8aba0d，非常棒的答案。 父子组件均为类组件时，生命周期方法的执行顺序正如你所描述的。至于函数组件+Hooks，如果你感兴趣，可以加入一些useEffect（虽然第10节课才会讲）打console.log来观察一下。 Fiber协调引擎里有一些有趣的细节，我争取在最近的课程加餐中安排进来。
共 3 条评论4- 学习前端-react2022-09-11 来自内蒙古你好，"进入提交阶段，React 会先执行 Effect 的清理函数，然后再次执行 Effect。" 没理解这里为啥要effect 的清理函数，然后执行Effect，很反直觉。是为了执行后产生符合预期的值吗？
作者回复: 你好，Geek_8aba0d，你的感觉跟很多人是一样的，包括刚接触Hooks时的我。 useEffect的详细内容在后面第10节课会讲，到放在这节课有点超纲，不过在这里我可以先剧透一下。 这里之所以大家会认为反直觉，很大程度上是因为大家把componentDidMount 和 componentWillUnmount 这一对类组件的生命周期方法当作了参照物。如果这样看的话，仿佛是在说同一个组件的 componentWillUnmount 发生在了 componentDidMount 之前，不合逻辑，理应出错的。 我建议这里先暂时不要考虑类组件，直接用副作用这个概念来理解。useEffect为函数组件声明了副作用，在不加入第二个参数（依赖值数组）的前提下，每次组件渲染都会执行，即每次渲染都会产生新的副作用（包含新的闭包），并留到这次的提交阶段执行，当执行的返回值是一个函数的时候，这个函数就是这次副作用的清理函数。 如第N次渲染，就会在提交阶段执行第N次副作用，返回第N次副作用的清理函数；下次第N+1次渲染，会在提交阶段先执行第N次副作用的清理函数，然后才是执行第N+1次副作用，返回第N+1次的清理函数；以此类推。
3 
CondorHero2022-11-06 来自北京antd 写法说明，来自官网 How to spell Ant Design correctly?# ✅ Ant Design: Capitalized with space, for the design language. ✅ antd: all lowercase, for the React UI library. ✅ ant.design：For ant.design website url. Here are some typical wrong examples: ❌ AntD ❌ antD ❌ Antd ❌ ant design ❌ AntDesign ❌ antdesign ❌ Antdesign作者回复: 你好，CondorHero，收到，看来文稿里应该用全小写的“antd”，谢谢指正。我和专栏编辑先记录一下，下次一起更新文稿。
1
012022-09-19 来自北京父组件和子组件的生命周期是交叉进行的， useLayoutEffect 和 useEffect 其实不太一样， useEffect其实是异步的作者回复: 你好，01，你说得对。在Fiber协调引擎中，真正主导的生命周期其实就是渲染阶段和提交阶段，所有组件完成渲染阶段才能进入提交阶段，完成提交阶段才进入下一轮渲染阶段。从这个角度看，传统的挂载、更新、卸载三个组件生命周期，在父子组件间确实是交叉进行的。 不过如果把视角放回单个组件上，挂载、更新、卸载三个生命周期可以对应到不少Fiber在组件层面的内部实现，还是有掌握的必要的。 正如你所说，在提交阶段，useLayoutEffect的副作用回调和清除函数是同步执行的，而useEffect的的副作用回调和清除函数是异步执行的。我已经更新了文稿中的配图，虽然依旧省略了一些细节，但比之前的版本更准确地表达了useEffect执行的时机。
船长2022-09-08 来自内蒙古思考题：有点朦胧的感觉，感觉是像递归那样，父组件遇到子组件，先执行子组件，等子组件执行完了再去执行父组件作者回复: 你好，船长，你的理解从概念上是对的。父子组件生命周期方法或Hooks的执行遵守这个顺序。Fiber协调引擎里有一些有趣的细节，我争取在最近的课程加餐中安排进来。
共 2 条评论
林十二XII2023-03-20 来自北京https://react.dev/learn/render-and-commit 结合react新版文档, 可以更容易理解函数组件的生命周期1- 林十二XII2023-03-20 来自北京https://react.dev/learn/render-and-commit
潮汐2023-02-17 来自广东组件函数的返回值通常会使用 JSX 语法，React 在渲染阶段根据返回值创建 FiberNode 树。在提交阶段，React 更新真实 DOM 之前会依次执行前面定义的 Effect。 请问老师，这句话最后说在React更新真是DOM之前依次执行前面定义的Effect，不是应该在更新DOM之后吗（按照图中所示）
斩尽满院桃花2023-01-28 来自河南老师，有点不太理解文稿中“其中useLayoutEffect 的 Effect 是在更新真实 DOM 之后同步执行的，与类组件的 componentDidMount、componentDidUpdate 更相似一些；而 useEffect 的 Effect 是异步执行的，一般晚于 useLayoutEffect 。”这句话里提到的useLayoutEffect是在真实dom之后同步执行，useEffect是异步的是什么意思