我的 React 之旅：第 26 天

生命周期方法和条件渲染

今天标志着我的 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!");
  };
}, []);

条件渲染

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

三元运算符
用户问候语示例:

return props.isLoggedIn ? (
  <h2 className='welcome-message'>Welcome {props.username}</h2>
) : (
  <h2 className='login-prompt'>Please log in to continue</h2>
);

短路评估
对于更简单的条件，您可以仅在条件为真时使用 && 来渲染组件：

return props.isLoggedIn && <h2>Welcome, {props.username}</h2>;

内联条件样式
您还可以动态设置组件的样式：

const messageStyle = props.isLoggedIn
  ？ { 颜色：“绿色” }
  ：{颜色：“红色”}；

返回<h2>



</h2><p><em>一切都在一天比一天好</em></p>


          

            
        

以上是我的 React 之旅：第 26 天的详细内容。更多信息请关注PHP中文网其他相关文章！