React 本身只提供了基础 UI 层开发范式，其他特性的支持需要借助相关社区方案实现。本文将介绍 React 应用体系中样式方案与状态方案的主流选择，帮助开发者根据项目需求做出合适的选择。

1. React 样式方案

1.1. 内联样式 (Inline Styles)

通过 style 属性直接在组件中定义样式。

const divStyle = {
  color: 'blue',
  backgroundColor: 'lightgray'
};

function StyledComponent() {
  return <div style={divStyle}>Hello, world!</div>;
}

1.2. CSS 模块 (CSS Modules)

CSS 模块允许为 CSS 类名添加局部作用域，避免样式冲突。文件名通常以 .module.css 结尾。

/* styles.module.css */
.container {
  color: red;
}

页面中使用：

import styles from './styles.module.css';

function StyledComponent() {
  return <div className={styles.container}>Hello, world!</div>;
}

1.3. Styled Components

使用 styled-components 库可以在 JavaScript 中编写实际的 CSS，提供了组件级别的样式管理。

安装：

npm install styled-components

示例：

import styled from 'styled-components';

const Container = styled.div`
  color: blue;
  background-color: lightgray;
`;

function StyledComponent() {
  return <Container>Hello, world!</Container>;
}

1.4. Emotion

Emotion 是一个强大的 CSS-in-JS 库，提供了灵活的样式管理方案。

安装：

npm install @emotion/react @emotion/styled

示例：

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const style = css`
  color: blue;
  background-color: lightgray;
`;

function StyledComponent() {
  return <div css={style}>Hello, world!</div>;
}

1.5. Tailwind CSS

Tailwind CSS 是一个实用工具优先的 CSS 框架，可以在 React 项目中使用。

安装：

npm install tailwindcss
npx tailwindcss init

示例：

function StyledComponent() {
  return <div className="text-blue-500 bg-gray-200">Hello, world!</div>;
}

2. React 状态方案

2.1. useState 和 useReducer

useState 和 useReducer 是 React 内置的 Hook，用于管理组件级别的状态。

useState 示例：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useReducer 示例：

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' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

2.2. Context API

React 的 Context API 允许在组件树中传递数据，而无需手动逐层传递 props。

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

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function ThemeComponent() {
  const { theme, setTheme } = useContext(ThemeContext);
  return (
    <div>
      <p>Current theme: {theme}</p>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </button>
    </div>
  );
}

function App() {
  return (
    <ThemeProvider>
      <ThemeComponent />
    </ThemeProvider>
  );
}

export default App;

2.3. Redux

Redux 是一个流行的状态管理库，适用于复杂的应用程序。Redux 使用单一的全局状态树来管理应用的状态。

安装：

npm install redux react-redux

配置：

import { createStore } from 'redux';
import { Provider, useDispatch, useSelector } from 'react-redux';

const initialState = { count: 0 };

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

const store = createStore(reducer);

function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

export default App;

2.4. MobX

MobX 是另一个流行的状态管理库，注重使状态管理更加直观和简单。

安装：

npm install mobx mobx-react-lite

示例：

import React from 'react';
import { makeAutoObservable } from 'mobx';
import { observer } from 'mobx-react-lite';

class CounterStore {
  count = 0;
  
  constructor() {
    makeAutoObservable(this);
  }
  
  increment() {
    this.count++;
  }
  
  decrement() {
    this.count--;
  }
}

const counterStore = new CounterStore();

const Counter = observer(() => {
  return (
    <div>
      <p>Count: {counterStore.count}</p>
      <button onClick={() => counterStore.increment()}>+</button>
      <button onClick={() => counterStore.decrement()}>-</button>
    </div>
  );
});

function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}

export default App;

以上介绍了 React 中常见的样式方案和状态管理方案，开发者可以根据项目规模、团队偏好和具体需求选择合适的方案组合。