王玉军博客

Appearance

React 开发实战指南 ​

简介 ​

React 是一个用于构建用户界面的 JavaScript 库。本文将介绍 React 的核心概念、最佳实践和实际应用。

React 基础 ​

1. 组件基础 ​

函数组件 ​

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

类组件 ​

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

2. Hooks ​

useState ​

jsx
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

useEffect ​

jsx
function DataFetcher() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // 空依赖数组表示只在组件挂载时执行
  
  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
}

状态管理 ​

1. Context API ​

jsx
const ThemeContext = React.createContext('light');

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

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Themed Button</button>;
}

2. Redux ​

jsx
// store.js
import { createStore } from 'redux';

const reducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
};

const store = createStore(reducer);

// Component.js
function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>
        Increment
      </button>
    </div>
  );
}

性能优化 ​

1. 使用 React.memo ​

jsx
const MemoizedComponent = React.memo(function MyComponent(props) {
  return <div>{props.value}</div>;
});

2. 使用 useMemo 和 useCallback ​

jsx
function ExpensiveComponent({ data }) {
  const processedData = useMemo(() => {
    return expensiveOperation(data);
  }, [data]);
  
  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []);
  
  return (
    <div>
      <p>{processedData}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

路由管理 ​

React Router ​

jsx
import { BrowserRouter, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/users/:id" component={User} />
      </Switch>
    </BrowserRouter>
  );
}

测试 ​

Jest 和 React Testing Library ​

jsx
import { render, screen, fireEvent } from '@testing-library/react';

test('increments counter when button is clicked', () => {
  render(<Counter />);
  
  const button = screen.getByText('Increment');
  fireEvent.click(button);
  
  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

最佳实践 ​

  1. 组件设计

    • 保持组件小而专注
    • 使用组合而不是继承
    • 遵循单一职责原则

  2. 状态管理

    • 合理使用 Context 和 Redux
    • 避免过度使用全局状态
    • 使用不可变数据

  3. 性能优化

    • 使用 React.memo 避免不必要的重渲染
    • 合理使用 useMemo 和 useCallback
    • 实现虚拟列表处理大量数据

总结 ​

React 提供了强大的工具和生态系统来构建现代化的用户界面。通过遵循最佳实践和持续学习，你可以构建出高性能、可维护的 React 应用。

参考资源 ​