React 核心概念与实战技巧深度解析-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00647/article/details/148578742

React 核心概念与实战技巧深度解析

tasks 项目地址: https://gitcode.com/gh_mirrors/tas/tasks

一、React 基础概念

1.1 JSX 的本质与编译过程

JSX 是 React 的核心语法糖，它允许开发者在 JavaScript 中编写类似 HTML 的标记。这种语法最终会被编译为标准的 JavaScript 代码。

编译示例：

const element = <h1 className="title">Hello</h1>;

会被 Babel 编译为：

const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello'
);

关键点：

JSX 不是字符串也不是 HTML
每个 JSX 元素都是 React.createElement 的语法糖
属性名使用 camelCase 命名（如 className 而非 class）

1.2 组件基础：函数组件与类组件

React 提供了两种定义组件的方式：

函数组件（现代推荐）：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

类组件（传统方式）：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

对比：

函数组件更简洁，适合简单场景
类组件提供更多生命周期控制
现代 React 推荐使用函数组件+Hooks

1.3 Props 与 State 的核心区别

| 特性 | Props | State | |-----------|------------------------|------------------------| | 可变性 | 不可变（只读） | 可变 | | 数据来源 | 父组件传递 | 组件内部管理 | | 更新触发 | 父组件重新渲染 | setState 或 useState | | 使用场景 | 组件配置 | 组件内部状态 |

二、React Hooks 深度解析

2.1 useState：状态管理基础

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

注意事项：

不要在循环、条件或嵌套函数中调用 Hook
setState 是异步的，连续调用会被批量处理
函数式更新可解决依赖旧状态的问题

2.2 useEffect：副作用处理

useEffect(() => {
  // 组件挂载和依赖变化时执行
  const subscription = props.source.subscribe();
  
  return () => {
    // 清理函数（组件卸载或依赖变化前执行）
    subscription.unsubscribe();
  };
}, [props.source]); // 依赖数组

使用场景：

数据获取
订阅设置
手动 DOM 操作
定时器管理

2.3 useMemo 与 useCallback 性能优化

useMemo（记忆值）：

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useCallback（记忆函数）：

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

优化原则：

避免过早优化
只在性能瓶颈处使用
配合 React.memo 使用效果更佳

三、高级模式与性能优化

3.1 Context API 全局状态管理

创建上下文：

const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

使用上下文：

function Toolbar() {
  const theme = useContext(ThemeContext);
  // ...
}

最佳实践：

避免过度使用导致组件复用性降低
将 Provider 提升到合适层级
考虑性能影响（可能引起不必要渲染）

3.2 性能优化技巧

React.memo 组件记忆：

const MyComponent = React.memo(function MyComponent(props) {
  /* 仅当props改变时重新渲染 */
});

虚拟化长列表：

import { FixedSizeList } from 'react-window';

function MyList({ data }) {
  return (
    <FixedSizeList
      height={400}
      width={300}
      itemSize={50}
      itemCount={data.length}
    >
      {({ index, style }) => (
        <div style={style}>{data[index]}</div>
      )}
    </FixedSizeList>
  );
}

代码分割：

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

四、React 常见问题解决方案

4.1 条件渲染模式

三元表达式：

{isLoggedIn ? <UserGreeting /> : <GuestGreeting />}

逻辑与运算符：

{unreadMessages.length > 0 && 
  <h2>You have {unreadMessages.length} unread messages.</h2>
}

注意事项：

避免 0 && <Component /> 会渲染 0 的问题
复杂条件可提取为变量或函数

4.2 表单处理策略

受控组件：

function Form() {
  const [value, setValue] = useState('');
  
  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return <input value={value} onChange={handleChange} />;
}

非受控组件：

function Form() {
  const inputRef = useRef();
  
  const handleSubmit = (e) => {
    alert(inputRef.current.value);
    e.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

五、React 测试基础

5.1 测试组件渲染

import { render, screen } from '@testing-library/react';
import Button from './Button';

test('renders button with text', () => {
  render(<Button>Click me</Button>);
  const buttonElement = screen.getByText(/click me/i);
  expect(buttonElement).toBeInTheDocument();
});

5.2 测试用户交互

test('calls onClick when clicked', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>Click me</Button>);
  
  fireEvent.click(screen.getByText(/click me/i));
  expect(handleClick).toHaveBeenCalledTimes(1);
});

六、React 最新特性

6.1 useActionState 处理表单状态

function Form() {
  const [state, formAction, isPending] = useActionState(
    async (prevState, formData) => {
      // 处理表单提交
      return { message: 'Success!' };
    },
    { message: '' }
  );

  return (
    <form action={formAction}>
      <button disabled={isPending}>Submit</button>
      {state.message && <p>{state.message}</p>}
    </form>
  );
}

6.2 use 钩子处理异步数据

function Note({ id }) {
  const note = use(fetchNote(id));
  
  return (
    <div>
      <h1>{note.title}</h1>
      <p>{note.content}</p>
    </div>
  );
}