React 样式方案与状态方案初探
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 中常见的样式方案和状态管理方案，开发者可以根据项目规模、团队偏好和具体需求选择合适的方案组合。