React基础学习-Day02

React基础学习-Day02

1.受控表单绑定

在 React 中，受控表单（controlled form）是一种通过 React 组件状态（state）来管理表单元素值的方式。使用受控表单，可以将表单元素的值与 React 组件的状态保持同步，从而实现对表单数据的完全控制和管理。

如何创建受控表单

1. 输入框（Input）

使用 <input> 元素作为例子，展示如何创建一个受控输入框：

import React, { useState } from 'react';

const ControlledFormExample = () => {
  // 定义一个状态变量来存储输入框的值
  const [inputValue, setInputValue] = useState('');

  // 处理输入框值变化的函数
  const handleInputChange = (event) => {
    setInputValue(event.target.value);  // 更新状态变量的值
  };

  // 提交表单时处理函数
  const handleSubmit = (event) => {
    event.preventDefault();  // 阻止表单默认提交行为
    alert(`Submitted value: ${inputValue}`);  // 弹出输入框的当前值
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Input:
        <input
          type="text"
          value={inputValue}  // 将输入框的值与状态变量绑定
          onChange={handleInputChange}  // 处理输入框值变化的函数
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

export default ControlledFormExample;

2. 复选框（Checkbox）

对于复选框，需要注意初始状态和处理函数的变化：

import React, { useState } from 'react';

const CheckboxExample = () => {
  // 定义一个状态变量来存储复选框的选中状态
  const [isChecked, setIsChecked] = useState(false);

  // 处理复选框状态变化的函数
  const handleCheckboxChange = (event) => {
    setIsChecked(event.target.checked);  // 更新状态变量的值
  };

  // 提交表单时处理函数
  const handleSubmit = (event) => {
    event.preventDefault();  // 阻止表单默认提交行为
    alert(`Checkbox checked: ${isChecked}`);  // 弹出复选框的当前选中状态
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Checkbox:
        <input
          type="checkbox"
          checked={isChecked}  // 将复选框的选中状态与状态变量绑定
          onChange={handleCheckboxChange}  // 处理复选框状态变化的函数
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

export default CheckboxExample;

3. 下拉菜单（Select）

对于 <select> 元素，需要注意选项列表的处理和初始选中值：

import React, { useState } from 'react';

const SelectExample = () => {
  // 定义一个状态变量来存储选择框的当前选中值
  const [selectedValue, setSelectedValue] = useState('option1');

  // 处理选择框选项变化的函数
  const handleSelectChange = (event) => {
    setSelectedValue(event.target.value);  // 更新状态变量的值
  };

  // 提交表单时处理函数
  const handleSubmit = (event) => {
    event.preventDefault();  // 阻止表单默认提交行为
    alert(`Selected value: ${selectedValue}`);  // 弹出选择框的当前选中值
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Select:
        <select value={selectedValue} onChange={handleSelectChange}>
          <option value="option1">Option 1</option>
          <option value="option2">Option 2</option>
          <option value="option3">Option 3</option>
        </select>
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

export default SelectExample;

特点和优势

• 完全控制: 受控表单使得所有表单元素的值都由 React 组件状态管理，可以通过状态更新函数精确控制和验证输入。
• 一致性和可预测性: 因为状态直接驱动表单元素的值，所以可以确保表单的行为一致和可预测。
• 验证和处理: 可以轻松实现输入验证、条件渲染和复杂的表单逻辑，例如禁用按钮直到所有必填字段都填写完毕。

通过使用受控表单，React 组件能够更加灵活和可控地处理用户输入，提高了应用的可维护性和用户体验。

2.React中如何获取DOM

在 React 中获取 DOM 元素通常是通过 Refs（引用）来实现的。Refs 提供了一种直接访问在 render 方法中创建的 DOM 节点或 React 元素的方式。这种访问方式是为了避免直接操作 DOM，符合 React 的声明式和组件化的设计理念。

使用 Refs 获取 DOM

1. 创建 Refs

在函数式组件中，可以使用 useRef 钩子来创建 Ref 对象：

import React, { useRef } from 'react';

const MyComponent = () => {
  // 创建一个 Ref 对象
  const myRef = useRef(null);

  // 在 useEffect 中操作 Ref
  useEffect(() => {
    console.log(myRef.current);  // 输出 Ref 对象的当前值（关联的 DOM 节点）
  }, []);

  return (
    <div ref={myRef}>
      {/* 这里是组件内容 */}
    </div>
  );
};

export default MyComponent;

2. 访问 DOM 节点

通过 ref.current 属性可以访问到 Ref 对象关联的 DOM 节点。需要注意的是，Ref 对象在组件的整个生命周期中保持不变，但 ref.current 的值会随着组件的渲染和卸载而变化。

3. 类组件中的 Refs

在类组件中，Refs 的创建和访问稍有不同：

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    // 创建一个 Ref 对象
    this.myRef = React.createRef();
  }

  componentDidMount() {
    console.log(this.myRef.current);  // 输出 Ref 对象的当前值（关联的 DOM 节点）
  }

  render() {
    return (
      <div ref={this.myRef}>
        {/* 这里是组件内容 */}
      </div>
    );
  }
}

export default MyComponent;

在类组件中，通过 React.createRef() 方法创建 Ref 对象，并在 componentDidMount 生命周期中访问 this.myRef.current 获取 DOM 节点。

使用场景

• 直接操作 DOM: 当需要在 React 中进行 DOM 操作时，例如测量元素尺寸、动画操作等，可以使用 Refs 来获取并操作 DOM 元素。
• 集成第三方库: 当需要与不支持 React 的第三方库（如 D3.js、Chart.js 等）集成时，Refs 提供了一种访问和控制 DOM 的方式。
• 焦点控制: 控制输入框、模态框等组件的焦点状态。

注意事项

• 避免滥用 Refs: 在大多数情况下，应该优先考虑使用 React 的数据驱动和状态管理方式，而不是直接操作 DOM。
• Refs 和函数式组件: 在函数式组件中，确保使用 useRef 钩子来创建 Ref 对象，而不是直接操作 DOM。

通过使用 Refs，在 React 中可以安全地获取和操作 DOM 元素，同时保持 React 的组件化和声明式编程模型的优势。

3.组件间通信

在 React 中，组件间通信是非常常见和重要的一部分，特别是在大型应用程序中，不同组件之间需要相互传递数据、状态或触发特定行为。以下是几种主要的 React 组件间通信方式：

1. Props 属性传递

Props（属性）是 React 中组件间通信最基础和常见的方式。通过将数据或函数作为属性传递给子组件，可以实现父组件向子组件的数据传递。

父组件传递数据给子组件：

// ParentComponent.jsx
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const data = 'Hello from parent';

  return (
    <div>
      <ChildComponent message={data} />
    </div>
  );
};

export default ParentComponent;

子组件接收并使用 Props 数据：

// ChildComponent.jsx
import React from 'react';

const ChildComponent = (props) => {
  return (
    <div>
      <p>{props.message}</p>
    </div>
  );
};

export default ChildComponent;

2. Callback 函数传递

通过将回调函数作为 Props 传递给子组件，子组件可以调用该函数并将数据或事件传递回父组件。

父组件定义回调函数并传递给子组件：

// ParentComponent.jsx
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [message, setMessage] = useState('');

  const handleCallback = (data) => {
    setMessage(data);
  };

  return (
    <div>
      <p>Message from child: {message}</p>
      <ChildComponent callback={handleCallback} />
    </div>
  );
};

export default ParentComponent;

子组件调用回调函数并传递数据：

// ChildComponent.jsx
import React from 'react';

const ChildComponent = (props) => {
  const sendDataToParent = () => {
    const data = 'Hello from child';
    props.callback(data);
  };

  return (
    <div>
      <button onClick={sendDataToParent}>Send Data</button>
    </div>
  );
};

export default ChildComponent;

3. Context API

Context API 提供了一种在组件树中传递数据的方法，避免了通过 Props 层层传递数据的繁琐过程。适合在多层级嵌套的组件中使用，允许跨越组件层级直接传递数据。

创建 Context 对象并提供数据：

// MyContext.js
import React from 'react';

const MyContext = React.createContext();

export const MyProvider = MyContext.Provider;
export const MyConsumer = MyContext.Consumer;

使用 Context 提供数据并在子组件中消费：

// ParentComponent.jsx
import React from 'react';
import { MyProvider } from './MyContext';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const data = 'Hello from context';

  return (
    <MyProvider value={data}>
      <ChildComponent />
    </MyProvider>
  );
};

export default ParentComponent;

在子组件中消费 Context 中的数据：

// ChildComponent.jsx
import React, { useContext } from 'react';
import { MyContext } from './MyContext';

const ChildComponent = () => {
  const data = useContext(MyContext);

  return (
    <div>
      <p>{data}</p>
    </div>
  );
};

export default ChildComponent;

4. Redux 或其他状态管理工具

对于大型应用程序中复杂的状态管理需求，可以使用 Redux 或其他状态管理工具（如 MobX）来集中管理应用程序的状态，并通过全局状态来实现组件间通信。这种方式适合需要多个组件共享状态或频繁更新状态的场景。

选择合适的通信方式

• Props 传递：简单、直观，适用于父子组件间的数据传递。
• Callback 函数：父组件可以向子组件传递函数来处理子组件中的事件，适合于子组件向父组件传递数据或事件。
• Context API：适用于跨组件层级传递数据，避免 Props 层层传递的麻烦。
• Redux 或其他状态管理工具：适用于需要全局状态管理或复杂的状态更新和同步需求的应用程序。

根据具体的场景和需求，选择适合的组件间通信方式是提高 React 应用开发效率和可维护性的关键。

4.useEffect

useEffect 是 React Hooks 中非常重要的一个钩子函数，用于在函数组件中执行副作用操作。副作用操作通常包括订阅数据、手动操作 DOM 和执行数据获取等。

基本用法

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

const MyComponent = () => {
  // 定义一个状态来存储数据
  const [data, setData] = useState(null);

  // useEffect 第一个参数是一个函数，第二个参数是一个数组
  useEffect(() => {
    // 在组件加载后和每次更新后执行

    // 这里可以进行数据获取、订阅操作、手动 DOM 更新等异步操作
    fetchData();

    // 清理函数，可选，用于清理副作用
    return () => {
      cleanupFunction();
    };
  }, []); // 空数组意味着只在组件加载后执行一次

  const fetchData = async () => {
    // 异步操作示例，获取数据
    const result = await fetch('https://api.example.com/data');
    const data = await result.json();
    setData(data);
  };

  const cleanupFunction = () => {
    // 清理函数，比如清除订阅或取消定时器
    // 在组件卸载时执行
  };

  return (
    <div>
      {data ? (
        <p>Data loaded: {JSON.stringify(data)}</p>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default MyComponent;

useEffect 的工作原理

• 第一个参数（effect）：一个函数，包含需要执行的副作用操作，可以是数据获取、订阅操作、DOM 操作等异步任务。
• 第二个参数（dependencies 数组）：可选参数，指定 effect 的依赖项。当依赖项发生变化时，effect 就会重新执行。如果不传递该参数，每次组件更新时都会执行 effect。

依赖项的作用

• 空数组 []：effect 仅在组件加载和卸载时执行，相当于 componentDidMount 和 componentWillUnmount 生命周期的结合体。
• 包含状态或属性的数组：effect 会在依赖项中的状态或属性发生变化时执行。比如 [count] 会在 count 状态更新时执行 effect。
• 不传递第二个参数：effect 在每次组件更新时都会执行，相当于 componentDidUpdate 生命周期。

清理副作用

在 effect 函数中可以返回一个清理函数，用于清理副作用，比如取消订阅、清除定时器等。这样可以避免内存泄漏和无效的异步操作。

useEffect(() => {
  const subscription = subscribeToData();
  
  return () => {
    subscription.unsubscribe(); // 清理订阅
  };
}, [dependency]);

总结

useEffect 是 React Hooks 提供的强大工具，用于处理函数组件中的副作用操作。通过指定依赖项数组，可以精确控制 effect 的执行时机，避免不必要的重复执行，提高组件性能和可维护性。

5.自定义Hook

自定义 Hook 是 React 中的一个强大功能，它允许你将组件逻辑提取到可复用的函数中。自定义 Hook 的命名通常以 use 开头。

创建一个自定义 Hook

我们将创建一个简单的自定义 Hook useCounter，它管理一个计数器的状态并提供增加和减少计数器的方法。

Step 1: 定义自定义 Hook

import { useState } from 'react';

const useCounter = (initialValue = 0) => {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return { count, increment, decrement };
};

export default useCounter;

Step 2: 使用自定义 Hook

你可以在任意函数组件中使用这个自定义 Hook：

import React from 'react';
import useCounter from './useCounter';

const CounterComponent = () => {
  const { count, increment, decrement } = useCounter(10);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default CounterComponent;

自定义 Hook 的优势

1. 逻辑复用：将重复使用的逻辑提取到自定义 Hook 中，使代码更加模块化和可复用。
2. 更清晰的组件结构：通过将复杂逻辑抽离到自定义 Hook 中，组件代码变得更简洁和易读。
3. 状态隔离：每次调用自定义 Hook 都会生成独立的状态，互不影响。

复杂的自定义 Hook 示例

创建一个自定义 Hook useFetch 来处理数据获取：

Step 1: 定义 useFetch Hook

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const data = await response.json();
        setData(data);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
};

export default useFetch;

Step 2: 使用 useFetch Hook

import React from 'react';
import useFetch from './useFetch';

const DataComponent = () => {
  const { data, loading, error } = useFetch('https://api.example.com/data');

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default DataComponent;

总结

自定义 Hook 允许你将组件逻辑提取到可复用的函数中，提高代码的可读性和维护性。通过自定义 Hook，可以更方便地复用逻辑、管理复杂的状态和副作用，从而简化组件代码。