{"componentChunkName":"component---src-templates-blog-post-js","path":"/react-trap/","result":{"data":{"site":{"siteMetadata":{"title":"😏","author":"thoamsy"}},"markdownRemark":{"id":"d12f42c1-ac7e-5e5c-9c30-fe4f45d5e7a6","html":"

收集一些不为人所知的，React 的细节问题。帮助自己理顺 React 内部深层的逻辑。

\n

Synthetic Event 和 DOM Event 同时出现的问题

\n

首先解释下，为什么 React 会有 Synthetic Event 这个概念。主要两个原因

\n
    \n
  1. 13 年的时候，浏览器发展比如今天，不同的浏览器在同一个概念上，可能会有不同的 API，另外那个时候还需要兼容 IE8。
    2. \n
  2. 针对大量创建 Event Object 的场景，有一个优化。这就诞生了 Event Pooling 这个概念。换句话说，在 React 中不需要之前的事件委托
    3. \n
\n

而 React 为了实现 Synthetic Event，是通过将所有的 onXXX 事件注册在 document 上来实现的。所以这就在某些十分特殊的场景下，会产生一些问题。看下面代码，或者 sandbox

\n
import React, { useCallback, useEffect } from 'react';\n\nconst App = () => {\n  const handleClickOnDocument = e => {\n    console.log('handling event on document');\n  };\n  const handleClickOnWindow = () => {\n    console.log('handling event on window');\n  };\n  useEffect(() => {\n    document.addEventListener('click', handleClickOnDocument);\n    window.addEventListener('click', handleClickOnWindow);\n    return () => {\n      document.removeEventListener('click', handleClickOnDocument);\n      window.removeEventListener('click', handleClickOnWindow);\n    };\n  }, []);\n  return (\n    <div onClick={() => console.log('handling event on div')}>\n      <button\n        onClick={e => {\n          e.stopPropagation();\n        }}\n      >\n        Click Me\n      </button>\n    </div>\n  );\n};\n\nexport default App;
\n

如果点击那个 button 会发生什么？在传统的 DOM 代码中，很明显什么都不会输出。但是在 React 中，我们会得到

\n
handling event on the document
\n

一起来分析下原因

\n

原因

\n

首先，在 button 被点击后，stopPropagation 起作用，使父组件 div 的 onClick Synthetic Event 不会被调用。另外，原生的 DOM 事件也会被触发。因为 stopPropagation 不同于 stopImmediatePropagation，所以 document 上的事件还是被调用。又因为 window 是 document 的父级，所以就不会继续运行。

\n

原因已经很明显了，但是我们可以更进一步。如果在 div 上有一个 native DOM 事件，那么在点击 button 后，到底是 button 的 Synthetic 事件先运行还是 button 的 native 事件？

\n
import React, { useCallback, useEffect, useRef } from 'react';\nconst App = () => {\n  const handleClickOnDocument = e => {\n    console.log('handling event on document');\n  };\n  const handleClickOnWindow = () => {\n    console.log('handling event on window');\n  };\n  const handleClickDiv = () => {    console.log('handling event on div with ref');  };  const div = useRef();  useEffect(() => {\n    document.addEventListener('click', handleClickOnDocument);\n    window.addEventListener('click', handleClickOnWindow);\n    div.current.addEventListener('click', handleClickDiv);    return () => {\n      document.removeEventListener('click', handleClickOnDocument);\n      window.removeEventListener('click', handleClickOnWindow);\n      div.current.removeEventListener('click', handleClickDiv);    };\n  }, []);\n  return (\n    <div ref={div} onClick={() => console.log('handling event on div')}>      <button\n        onClick={e => {\n          console.log('button');          e.stopPropagation();\n        }}\n      >\n        Click Me\n      </button>\n    </div>\n  );\n};\n\nexport default App;
\n

直觉上觉得是会打印出

\n
button\nhandle event on div with ref\nhandling event on the document
\n

但根据上面的说法， Synthetic Event 会绑定在 document 上，那么根据冒泡的顺序，div 的 native 事件会先运行。可以得出下面结论

\n
handling event on div with ref\nbutton\nhandling event on document
\n

结论

\n

因为 Synthetic Event 会将事件绑定在 document 上，从而导致在和 native dom 事件有一定逻辑关联的时候，出现一些不符合直觉的问题。这种场景下，一定需要小心。

\n

相关链接

\n\n
\n

Context 的更新，会更新 ✨ Provider ➡️ Consumer 之间所有的组件么

\n

这个问题提出来的依据主要是，setState 在 React 中是会一定会带来更新的，除非设置了 memo 或者 shouldComponentUpdate 这些优化措施。换句话说，一般情况下，每次 Context 中 value 的更新，必定伴随着一个 setState 的过程。而这个过程必定导致含有 <Context.Provider> 的组件往下更新，也就让我们无法观察到这个过程的更进一步的细节。

\n

如果想要探究这个问题的话，需要三个组件，分别被称为 App, Foo, Bar。

\n

App 是父组件，它的 render 中就返回了包含 Provider 的代码。

\n

Foo 组件是这个 Context 的消费者，它通过 Provider 拿到对应的展示内容。

\n

Bar 则是两个组件中的中间层，它的作用就是承接 Foo 和 App。同时它的 shouldComponentUpdate 会设置为 false。

\n

借助 Hooks，有下面的实验 🧪 代码。

\n
import React, { useContext, memo, useState, useCallback } from 'react';\n\nconst FooContext = React.createContext(1);\n\nconst Foo = () => {\n  const foo = useContext(FooContext);\n  console.count('foo');\n\n  return <p>i am {foo}</p>;\n};\nconst Bar = memo(() => {  console.count('bar');\n  return <Foo />;\n});\n\nconst App = () => {\n  const [value, setValue] = useState(1);\n  const addValue = useCallback(() => setValue(value + 1));\n\n  return (\n    <>\n      <h1>This is a context test</h1>\n      <button onClick={addValue}>click me!!!</button>\n      <FooContext.Provider value={value}>\n        <Bar />\n      </FooContext.Provider>\n    </>\n  );\n};
\n

界面很 简单\n\n \n \n \n \n \n \n \n \n \n通过点击 click me 那个 button，就能看到 /i am / 的变化。同时注意 Foo 和 Bar 中都有一个 console.count 用来观察这个组件是否重新渲染。\n得到的结果就是，foo 会随着每次点击都打印，而 bar 不会。如果将 memo 移除的话，每次 bar 也会被打印出来了。

\n

最后结论就是：Provider 的更新不会带动 Consumer 之间的组件更新。

\n

顺便一提

\n

当然，其实这个问题通过推断就能得到结果的。因为新的 Context 带来的一个重要特性就是即使 shouldComponentUpdate 返回 false，子组件也会被更新。

\n

如果我们把上面的 Foo 和 Bar 合成一个

\n
const Bar = memo(() => {\n  console.count('bar');\n  const foo = useContext(FooContext);  return <p>i am {foo}</p>;});
\n

也是一样的效果。

","frontmatter":{"title":"一些 React 中的刁钻问题","spoiler":"收集一些不为人所知的，React 的细节问题。帮助自己理顺 React 内部深层的逻辑","image":null,"date":"2019/01/02"}}},"pageContext":{"slug":"/react-trap/","previous":{"fields":{"slug":"/react-lazy/"},"frontmatter":{"title":"React Lazy 的实现原理","image":null,"spoiler":"简单讨论一下 React.lazy 内部实现"}},"next":{"fields":{"slug":"/react-as-a-runtime/"},"frontmatter":{"title":"React as a UI Runtime","image":null,"spoiler":"An in-depth description of the React programming model."}}}}}