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

React 学习指南 - 第四天

1. React Hooks 深入理解

React Hooks 是 React 16.8 引入的一个强大特性，它让你在函数组件中也能拥有类组件的功能，如状态管理、生命周期管理等。今天我们将深入理解几个常用的 Hooks。

1.1 `useState`

useState 是最常用的 Hook，它允许我们在函数组件中添加状态。使用 useState 时，可以传递初始状态并返回一个包含状态值和更新函数的数组。

import React, { useState } from 'react';

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

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

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

useState(0)：初始状态为 0。
setCount 用于更新 count 的值。

1.2 `useEffect`

useEffect 允许我们在函数组件中执行副作用操作，如数据获取、DOM 操作、订阅等。它相当于类组件中的生命周期方法（componentDidMount、componentDidUpdate、componentWillUnmount）。

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

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => setSeconds((prev) => prev + 1), 1000);
    return () => clearInterval(timer); // 清理副作用
  }, []); // 空数组意味着只在组件挂载时执行

  return <p>{seconds} seconds have passed</p>;
}

useEffect 用来设置定时器，在组件卸载时清理定时器。
空数组 [] 作为依赖，表示该副作用只在组件挂载和卸载时执行。

1.3 `useContext`

useContext 允许我们在函数组件中访问 Context 的值，而不需要通过中间的组件传递 props。

import React, { useState, useContext, createContext } from 'react';

const ThemeContext = createContext();

function ThemedComponent() {
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme === 'dark' ? '#333' : '#fff' }}>Theme is {theme}</div>;
}

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={theme}>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </button>
      <ThemedComponent />
    </ThemeContext.Provider>
  );
}

useContext 可以直接访问由 ThemeContext.Provider 提供的 theme。

1.4 `useReducer`

useReducer 是一种比 useState 更强大的状态管理方法，特别适用于复杂的状态逻辑或多个状态值的情况。它通常用来替代 Redux，但它是内置的，不需要额外的库。

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

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

useReducer 接收一个 reducer 函数和初始状态。
dispatch 用来派发 action 更新状态。

2. React 高阶组件（HOC）

高阶组件（HOC）是 React 中一种常见的设计模式，它是一个接受组件作为参数并返回一个新组件的函数。HOC 主要用于代码复用、逻辑抽象和组件增强。

例如，下面的 withLoading 是一个简单的 HOC，用于包装一个组件，使其在加载数据时显示加载指示：

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

function withLoading(Component) {
  return function WithLoadingComponent(props) {
    if (props.isLoading) {
      return <p>Loading...</p>;
    }
    return <Component {...props} />;
  };
}

function DataComponent() {
  return <div>Data loaded successfully!</div>;
}

const DataComponentWithLoading = withLoading(DataComponent);

function App() {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => setIsLoading(false), 3000);
  }, []);

  return <DataComponentWithLoading isLoading={isLoading} />;
}

export default App;

withLoading 是一个接受组件并返回一个新组件的高阶组件。
在加载数据时显示 "Loading..."，加载完毕后展示 DataComponent。

3. React 性能优化（继续）

前面我们提到了一些性能优化的方法，今天我们继续深入讨论。

3.1 `React.PureComponent`

React.PureComponent 是一个类组件，它会自动实现 shouldComponentUpdate 方法，只有当 props 或 state 的值发生变化时才会重新渲染。

import React, { PureComponent } from 'react';

class PureCounter extends PureComponent {
  render() {
    console.log('Rendering...');
    return <p>Count: {this.props.count}</p>;
  }
}

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

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <PureCounter count={count} />
    </div>
  );
}

PureComponent 比普通的 Component 增加了浅比较的性能优化。

3.2 批量更新（Batching）

React 在同一事件中进行批量更新，避免了多次渲染。你可以手动触发批量更新，尤其是在异步操作中。

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  const handleUpdate = () => {
    setCount(count + 1);
    setText('Updated');
  };

  return (
    <div>
      <p>Count: {count}</p>
      <p>Text: {text}</p>
      <button onClick={handleUpdate}>Update</button>
    </div>
  );
}

在这里，setCount 和 setText 会在同一事件中批量更新，而不是触发两次渲染。

4. 小结

React Hooks 深入：今天你深入了解了 useState、useEffect、useContext、useReducer 等 React 钩子的使用，掌握了如何在函数组件中管理状态、处理副作用和实现复杂的状态逻辑。
高阶组件：你了解了高阶组件（HOC）的概念，并学会了如何通过它来增强组件的功能。
性能优化：通过 React.PureComponent 和批量更新，你可以更高效地控制 React 组件的渲染，提高性能。

随着对这些高级特性的理解，你能够更加灵活地构建和优化 React 应用。