蜕变之始，useEffect 最后一种用法-51CTO.COM

在 React 官方文档中，对于 useEffect 有这样一句描述：Effects are an escape hatch from the React paradigm。

这句话怎么理解呢？我们要结合前面的哲学部分进行思考。React 开发指导思想是数据驱动 UI，因此在 React 程序中，我们总是会思考如何设计与 UI 保持一致的数据，把解决问题的重心放在数据逻辑上。

但是这样的思路并不能应对所有场景。在一些特殊的场景里，我们需要跳出数据驱动 UI 的解题思路，例如为了避免出现性能瓶颈，在高频率的事件监听中，我们会选择直接使用原生 DOM 节点来解决问题。

意思就是说，如果你想要跳出 React 的环境使用其他的方式开发，可以把 effect 作为一个对外接口。

官方文档也对此有进一步的解释：

They let you “step outside” of React and synchronize your components with some external system like a non-React widget, network, or the browser DOM

这样的 escape hatch 给 React 带来了极大的灵活性。在一个复杂的项目中，我们可以使用 React 解决一部分逻辑，然后使用别的更合适的方案解决另外的问题，这样的灵活性提高了 React 项目的上限。这也是 React 能参与到类似于 Figma 这样庞大、复杂、对性能要求极高的项目中去的原因。

Figma

一、如何运用

useEffect 第二个参数为一个数组，当我们传入的参数为一个空数组时，表示 effect 仅会在组件首次渲染完成时执行。

useEffect(effect, [])1.

只要我们确保当前组件在程序运行过程中相对稳定，不会随时被删除，那么我们就可以在 effect 中获取原生 DOM 节点，并添加绑定事件，回归到原生 DOM 开发思路中去，你甚至可以在这里继续使用 jQuery。

我们也可以在这里放心使用百度地图 javaScript sdk，从而完整的在 react 项目中嵌入百度地图。

function App() {
  // ...
  useEffect(() => {
    var mp = new BMapGL.Map('map'); 
    mp.centerAndZoom(new BMapGL.Point(121.491, 31.233), 11); 
  }, [])

  // ...
}1.
2.
3.
4.
5.
6.
7.
8.
9.

或者与 echarts 结合使用。

function App() {
  const main = useRef(null)

  useEffect(() => {
    var myChart = echarts.init(main.current);

    // 指定图表的配置项和数据
    var option = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }, [])

  return (
    <div id="main" ref={main}></div>
  )
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.

其他的例子还有很多，我们这里使用一个案例来进一步感受 React 与原生 DOM 开发结合的方式。

二、需求

在长页面滚动的过程中，我们常常会在页面的顶部或者旁边，放一个标识组件来告诉用户页面已经滚动到什么位置了。

在滚动的过程中，当前选中状态会自动变化到对应的位置。接下来我们思考一下这样的功能应该如何实现。

本案例具体要实现的效果如图：

三、实现

实现原理比较简单，我们只需要判断每个元素什么时候应该出现在屏幕中即可。对于原生 DOM 而言，我们可以使用 getBoundingClientRect 来获取元素对象在可视区域中的位置信息。

本案例中的判断规则非常简单粗暴，因此当同屏出现两个目标元素时会存在规则冲突，实践中的规则设计会更细致一些，判断逻辑也会更复杂。

React 提供了 useRef 来获取真实 DOM 对象。

const n1 = useRef<HTMLDivElement>(null)

... 

<div ref={n1}></div>1.
2.
3.
4.
5.

本案例中的主要内容为我们前面章节中搜索的 demo，因此每个 demo 都是使用 Block 组件来包裹布局。

<Block className={s.container} title={td.title} desc={td.desc}>
  <div className={r.flex}>
    <input
      className={s.input}
      placeholder="请输入您要搜索的内容"
      onChange={(e) => setParam(e.target.value)}
    />
  </div>
  <List
    list={list}
    loading={loading}
    error={error}
    renderItem={(item) => (
      <div key={item} className={s.item}>{item}</div>
    )}
  />
</Block>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

但是因为 Block 并没有针对 ref 进行支持，因此我们可以在外面额外套一个 div 作为目标元素。

import Normal from './search/Normal'

... 

<div ref={n1}>
  <Normal />
</div>1.
2.
3.
4.
5.
6.
7.

在页面滚动的过程中，目标元素相对于可视区域的位置会随时发生变化。因此我们可以在 effect 中添加 document 的滚动事件监听。

useEffect(() => {
  document.addEventListener('scroll', () => {
    ...
  })
}, [])1.
2.
3.
4.
5.

设计一个 state 状态用来对应选中状态。

const [current, setCurrent] = useState(0)

...

<div className={current == 0 ? `${s.item} ${s.active}` : s.item}>案例一</div>1.
2.
3.
4.
5.

这样，我们只需要在滚动过程中，不停的判断每个目标元素和视口的相对位置，当符合条件的目标元素出现在视口时，就设置 current 为对应的值，功能就实现了。

useEffect(() => {
  document.addEventListener('scroll', () => {
    const n1y = n1.current?.getBoundingClientRect().y
    const n2y = n2.current?.getBoundingClientRect().y
    const n3y = n3.current?.getBoundingClientRect().y
    const n4y = n4.current?.getBoundingClientRect().y
    const n5y = n5.current?.getBoundingClientRect().y

    if (n1y > 0 && n1y < window.innerHeight) {
      setCurrent(0)
    }
    if (n2y > 0 && n2y < window.innerHeight) {
      setCurrent(1)
    }
    if (n3y > 0 && n3y < window.innerHeight) {
      setCurrent(2)
    }
    if (n4y > 0 && n4y < window.innerHeight) {
      setCurrent(3)
    }
    if (n5y > 0 && n5y < window.innerHeight) {
      setCurrent(4)
    }
  })
}, [])1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

当我们使用 ref 获取真实 DOM 时，ref 可能会为 null，但是由于 effect 在组件渲染完成之后执行，此时必定能获取到真实 DOM，因此我们使用 ?. 跳过了为 null 的判断。

const n1y = 
n1.current?.getBoundingClientRect().y1.
2.

完整代码如下：

import { useEffect, useRef, useState } from 'react'
import Normal from './search/Normal'
import Normal2 from './search/Normal2'
import Normal3 from './search/Normal3'
import Normal4 from './search/Normal4'
import Normal5 from './search/Normal5'

import s from './style.module.scss'

export default function EffectDemo() {
  const [current, setCurrent] = useState(0)
  const n1 = useRef<HTMLDivElement>(null)
  const n2 = useRef<HTMLDivElement>(null)
  const n3 = useRef<HTMLDivElement>(null)
  const n4 = useRef<HTMLDivElement>(null)
  const n5 = useRef<HTMLDivElement>(null)

  useEffect(() => {
    document.addEventListener('scroll', () => {
      const n1y = n1.current?.getBoundingClientRect().y as number
      const n2y = n2.current?.getBoundingClientRect().y as number
      const n3y = n3.current?.getBoundingClientRect().y as number
      const n4y = n4.current?.getBoundingClientRect().y as number
      const n5y = n5.current?.getBoundingClientRect().y as number

      if (n1y > 0 && n1y < window.innerHeight) {
        setCurrent(0)
      }
      if (n2y > 0 && n2y < window.innerHeight) {
        setCurrent(1)
      }
      if (n3y > 0 && n3y < window.innerHeight) {
        setCurrent(2)
      }
      if (n4y > 0 && n4y < window.innerHeight) {
        setCurrent(3)
      }
      if (n5y > 0 && n5y < window.innerHeight) {
        setCurrent(4)
      }
    })
  }, [])

  return (
    <div>
      <div className={s.nav}>
        <div className={current == 0 ? `${s.item} ${s.active}` : s.item}>案例一</div>
        <div className={current == 1 ? `${s.item} ${s.active}` : s.item}>案例二</div>
        <div className={current == 2 ? `${s.item} ${s.active}` : s.item}>案例三</div>
        <div className={current == 3 ? `${s.item} ${s.active}` : s.item}>案例四</div>
        <div className={current == 4 ? `${s.item} ${s.active}` : s.item}>案例五</div>
      </div>
      <div ref={n1}>
        <Normal />
      </div>
      <div ref={n2}>
        <Normal2 />
      </div>
      
      <div ref={n3}>
        <Normal3 />
      </div>

      <div ref={n4}>
        <Normal4 />
      </div>
      
      <div ref={n5}>
        <Normal5 />
      </div>
      
    </div>
  )
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.

四、总结

大量的初级框架开发者被困在「试图让框架解决所有问题」的思想牢笼里，认为学会了框架似乎就完事了。然而事实上，灵活运用 React 的 escape hatch 特性是成为 React 高手的标志之一，他在指引学习者不要把学习目标局限在 React 中，这是我们蜕变的开始。

不要试图让 React 解决所有问题，让他做擅长的事情。

接下来我们思考两个问题，一个问题是，在上面的案例中，我并没有移除事件绑定，这样的行为是否会造成内存泄露？第二个问题，我们期望封装一个图片组件，该组件需要支持懒加载的优化特性：只有当图片内容进入到可视区域时，图片才开始加载，这样的图片组件应该如何封装？