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:<inputtype="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:<inputtype="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 中操作 RefuseEffect(() => {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，可以更方便地复用逻辑、管理复杂的状态和副作用，从而简化组件代码。