如何用react写页面
创建React项目
使用create-react-app快速初始化项目，需提前安装Node.js环境。运行命令：
npx create-react-app my-app
cd my-app
npm start组件化开发
React的核心是组件。函数组件示例：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}类组件示例：
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}状态管理
在类组件中使用state：
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>+</button>
</div>
);
}
}函数组件使用Hooks：
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>+</button>
</div>
);
}生命周期与副作用
类组件生命周期方法：
componentDidMount() {
console.log('Component mounted');
}
componentDidUpdate() {
console.log('Component updated');
}
componentWillUnmount() {
console.log('Component will unmount');
}函数组件使用useEffect：
useEffect(() => {
console.log('Effect runs');
return () => console.log('Cleanup');
}, [dependency]);路由配置
安装React Router：
npm install react-router-dom基本路由示例：
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function App() {
return (
<Router>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Router>
);
}样式处理
内联样式：
<div style={{ color: 'red', fontSize: 20 }}>Text</div>CSS Modules：
import styles from './Button.module.css';
function Button() {
return <button className={styles.error}>Click</button>;
}数据获取
使用fetch或axios：
useEffect(() => {
fetch('https://api.example.com/data')
.then(res => res.json())
.then(data => setData(data));
}, []);性能优化
React.memo缓存组件：
const MemoizedComponent = React.memo(MyComponent);useCallback缓存函数：
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);状态提升
当多个组件需要共享状态时，将状态提升到最近的共同父组件：
function Parent() {
const [sharedState, setSharedState] = useState(null);
return (
<>
<ChildA state={sharedState} setState={setSharedState} />
<ChildB state={sharedState} setState={setSharedState} />
</>
);
}上下文API
跨组件层级传递数据：
const ThemeContext = React.createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
function Toolbar() {
return <ThemedButton />;
}
function ThemedButton() {
const theme = useContext(ThemeContext);
return <button theme={theme}>Button</button>;
}
