react框架如何使用
安装React环境
使用Create React App快速搭建项目，确保已安装Node.js（建议版本≥14.0.0）。通过命令行运行以下指令创建新项目：
npx create-react-app my-app
cd my-app
npm start项目结构解析
src/：核心开发目录，包含入口文件index.js和组件文件App.jspublic/：静态资源存放处，如HTML模板和图片package.json：管理依赖和脚本命令
创建组件
函数组件示例：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}类组件示例：
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}状态管理
函数组件使用Hooks：
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
);
}生命周期控制
类组件中使用生命周期方法：
class Clock extends React.Component {
componentDidMount() {
this.timerID = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({ time: new Date() });
}
}事件处理
采用驼峰式命名绑定事件：
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('Link clicked');
}
return <a href="#" onClick={handleClick}>Click me</a>;
}样式处理
内联样式示例：
const divStyle = {
color: 'blue',
fontSize: '20px'
};
function StyledText() {
return <div style={divStyle}>Styled content</div>;
}路由配置
使用React Router实现导航：
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function App() {
return (
<Router>
<Link to="/">Home</Link>
<Route exact path="/" component={Home} />
</Router>
);
}性能优化
使用React.memo避免重复渲染：
const MemoComponent = React.memo(function MyComponent(props) {
return <div>{props.value}</div>;
});生产部署
生成优化后的构建文件：
npm run build部署时需配置服务器指向build/目录，并确保处理单页应用的路由回退。
