重生之我在chatgpt中学习React 第二天-前端-E先生的博客

React 学习指南 - 第二天

1. React 组件的生命周期

在 React 中，组件有不同的生命周期阶段，开发者可以在这些阶段执行特定的操作。对于类组件，React 提供了一些生命周期方法，比如 componentDidMount、componentDidUpdate、componentWillUnmount 等。

但是，现代 React 更推荐使用函数组件和钩子（Hooks），其中常用的生命周期相关钩子包括：

useEffect：相当于类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount。它会在组件渲染后执行。

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

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

  // 相当于 componentDidMount 和 componentDidUpdate
  useEffect(() => {
    document.title = `You clicked ${count} times`;

    // 可选的清理函数，类似 componentWillUnmount
    return () => {
      console.log('Cleaning up');
    };
  }, [count]); // 当 count 变化时重新执行

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

在这个例子中：

useEffect 会在组件渲染后执行，并且在 count 发生变化时更新页面标题。
清理函数 return 语句中的代码会在组件卸载时执行。

2. 条件渲染

React 支持条件渲染，可以使用 JavaScript 中的常见条件语法（如 if 语句、三元运算符等）来决定渲染哪些内容。

例如：

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please sign up.</p>}
    </div>
  );
}

在这个例子中，Greeting 组件根据 isLoggedIn 属性的值来决定显示不同的内容。

3. 列表渲染

React 可以根据数据动态渲染列表。通过 map 方法将数组中的每个元素渲染为一个组件或元素。

function List() {
  const items = ['Apple', 'Banana', 'Cherry'];

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

在这个例子中，List 组件通过 map 遍历 items 数组，为每个项渲染一个 li 元素。注意每个列表项都有一个唯一的 key 属性，用来帮助 React 更高效地更新和重排元素。

4. 表单处理

React 提供了一个受控组件的机制，允许我们通过 state 来控制表单元素（如输入框）的值。

function Form() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('A name was submitted: ' + value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={value} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

这里，输入框的值是由 React 的 state 来控制的，用户输入时会更新 state，提交表单时会触发一个 alert 弹出框。