React 生命周期方法和条件渲染

生命周期方法和条件渲染

今天标志着我的 React 学习之旅又迈出了一步，这一切都与生命周期方法和条件渲染有关。了解 React 组件如何诞生、成长并最终离开 DOM 对我来说是一个重大改变。此外，还可以根据用户交互有条件地显示内容，突然间，构建动态、用户友好的应用程序感觉太棒了！

**React 函数组件中的生命周期方法**

生命周期分为 3 个步骤：

**1.初始步骤（安装阶段）**：

当组件第一次渲染时发生。

具有空依赖项数组 ([]) 的 useEffect 仅在此阶段运行。示例：

useEffect(() => {
  console.log("Component mounted");
}, []);

**2.更新步骤：**

当状态或道具改变时触发。

React 重新运行你的函数组件，重新计算状态并传递更新的 props。

使用具有特定依赖项的 useEffect 来处理更改：

useEffect(() => {
  console.log("State or props updated!");
}, [dependency1, dependency2]);

**3. 退出/卸载阶段：**

当组件从 DOM 中移除时发生。

可以在 useEffect 的返回函数中添加清理代码，释放内存。示例：

useEffect(() => {
  const handleResize = () => console.log("Resized!");
  window.addEventListener("resize", handleResize);

  return () => {
    window.removeEventListener("resize", handleResize);
    console.log("Component unmounted, cleanup done!");
  };
}, []);

条件渲染

此技术对于根据条件动态渲染组件或元素至关重要。

**三元运算符**

**UserGreetings 示例**：

return props.isLoggedIn ? (
  Welcome {props.username}
) : (
  Please log in to continue
);

**短路评估**

对于更简单的条件，你可以使用 && 仅在条件为真时呈现组件：

return props.isLoggedIn && Welcome, {props.username}
;

**内联条件样式**

您还可以动态地设置组件的样式：

const messageStyle = props.isLoggedIn
  ? { color: "green" }
  : { color: "red" };

return Welcome, {props.username}
;

CLIS.CC

React 生命周期方法和条件渲染

生命周期方法和条件渲染

条件渲染

Welcome {props.username}

Please log in to continue

Welcome, {props.username}

Welcome, {props.username}