视频里accumulateSinglePhaseListener死循环了

Question

后续视频也没有提醒和改正的过程，每次跟视频敲完代码，调试的时候，你那里成功了，我看着状况百出的程序焦头烂额。

Answer 1

杨艺韬 2023-09-14 23:06:15

具体到你提到的这个问题而言，代码是这样：

export function accumulateSinglePhaseListeners(
  targetFiber, reactName, nativeEventType, isCapturePhase
) {
  const captureName = reactName + 'Capture';
  const reactEventName = isCapturePhase ? captureName : reactName;
  const listeners = [];
  let instance = targetFiber;
  while (instance !== null) {
    const { stateNode, tag } = instance;
    if (tag === HostComponent && stateNode !== null) {
      const listener = getListener(instance, reactEventName);
      if (listener) {
        listeners.push(createDispatchListener(instance, listener, stateNode));
      }
    }
    instance = instance.return;
  }
  return listeners;
}

视频中少写了这一行代码：

instance = instance.return;

Answer 2

杨艺韬 2023-09-14 22:45:46

遇见问题可以先自己尝试根据自己的理解去解决完善相关逻辑，如果对前面的思路理解清楚了理论上就像日常开发一样很自然的调整代码，觉得难度大就把我上传的代码拉下来对比下手敲的内容，如果拉下来代码还是跑不起来，就去尝试翻一下原版源码比较一下两者思路的不同。课程中单个小节的代码由于还没写完不一定跑得起来，一般到了调试小结会有个汇总，解决一些已知问题，然后跑起来。另外即使视频中代码写的有bug，也不要觉得很意外，编写这种难度的代码难免会有漏洞，真遇见了bug可以就像上面提到的和我上传的代码或者原版源码进行比较一下。这门课程的学习肯定要付出不少心血的，加油。

• 提问者 worker1991 #1

  谢谢，我通过代码调试找到问题了。当时看这个视频的时候知道要往上层遍历fiber的，只是看到后面视频就把这里忘了。

• 杨艺韬 回复 提问者 worker1991 #2

  赞，学习的过程能手敲一遍这种精神非常难得