🚀 以一个艺术画廊的比喻来解释 React 的挂载和渲染 🖼️ 🎨 🖌️ 🏞️

2 年 ago

科, 雅

1 minute

在学习React的过程中，理解”mount”和”render”非常重要。我们可以使用艺术画廊的类比来更直观地理解这些概念。

?️ 将画作挂在墙上 = 挂载：
当组件第一次将画作挂在画廊的墙上（DOM）时，这被称为“挂载”。这个特殊的时刻只会在组件的一生中发生一次。

? 从墙上取下画作 = 卸载：
当展览结束或出现某种原因需要将画作从墙上取下时，这个行为被称为“卸载”。一旦这个时刻到来，画作将再次从画廊的墙上取下。

如果需要刷新画廊（重新载入页面），所有正在展出的画作将先从墙壁上取下，艺术家将重新绘制作品，画廊工作人员再将其作为新的展览装饰在墙壁上。

关于DOM和虚拟DOM，请查看这里。

? useEffect的吸引力

useEffect是React Hooks的一种，用于设置在动作之后想要执行的副作用。副作用可以包括数据获取、订阅、DOM修改等操作，并与组件的生命周期相互关联。

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;

    return () => {
      console.log('Component will unmount');
    };
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

在这个例子中，每当计数改变时，useEffect产生的效果会触发?！

让我们看一个有关取消挂载的具体例子。

1. 通过路由进行艺术画廊房间的更改。

请想一想，假设您正在一家大型艺术馆中，决定从“风景画房间”移动到“肖像画房间”。当您移动后，原来的“风景画房间”中的画作?️就无法再看见了，取而代之的是新的“肖像画房间”中的画作?‍?进入您的视线。

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

这段React代码就像是在更换艺术画廊的房间一样。当从Home切换到About时，前一个页面的组件（代表画作?）将被卸载，新页面的组件将被挂载。

2. 通过条件渲染来移除绘画作品

请在艺术画廊中想象一下，有一个特别的展览被帘子?️遮盖起来，只为那些想要看特定画作的客人准备。当客人按下按钮?时，帘子会打开，展现出那幅特别的画作。再次按下按钮，画作又会被隐藏起来。

import React, { useState } from 'react';

function App() {
  const [showComponent, setShowComponent] = useState(true);

  return (
    <div>
      {showComponent && <MyComponent />}
      <button onClick={() => setShowComponent(!showComponent)}>
        Toggle Component
      </button>
    </div>
  );
}

function MyComponent() {
  return <h2>Hello World</h2>;
}

这段代码类似于上述特殊展示的功能。可以通过点击按钮来切换画作?（MyComponent）的显示和隐藏。当隐藏时，画作将从画廊的墙上取下（卸载）。

（摘要）? 山和渲染之间的关系

レンダリングのみ?: stateやpropsが変わると、コンポーネントは新しい絵を描きますが、再度壁に飾ることはしません。

両方??️: コンポーネントが初めて部屋に飾られるとき、絵を描いて壁に飾ります。

总的来说，艺术创作中包括制作绘画作品，但并不意味着每次都把绘画挂在墙上。???️