拿到一个react项目如何看
理解项目结构
检查项目根目录下的文件和文件夹，重点关注src目录，通常包含核心代码。查看package.json了解项目依赖和脚本命令。注意配置文件如webpack.config.js或vite.config.js（若有）。
分析入口文件
定位src/index.js或src/main.js文件，这是React应用的启动入口。观察如何渲染根组件（通常通过ReactDOM.render或ReactDOM.createRoot），以及是否包含全局Provider（如Redux或React Router）。
审查组件层次
从根组件（通常是App.js）开始，梳理组件树结构。注意组件如何拆分，是否采用容器/展示组件模式。检查路由配置（如react-router-dom的使用）确定页面层级关系。
检查状态管理
查看是否使用状态管理库（如Redux、MobX或Context API）。对于Redux项目，检查store的配置、reducers和actions的分布。注意自定义Hook的使用情况。
验证数据流
追踪API调用方式（如fetch、axios或GraphQL客户端），查看请求封装和错误处理逻辑。注意数据如何从服务端流向组件，以及本地状态如何更新。
评估样式方案
确认CSS处理方式（如CSS Modules、Styled Components或TailwindCSS）。检查样式文件的组织结构和命名规范，注意是否存在全局样式覆盖。
测试与工具
查看测试目录（如__tests__或test），了解测试框架（Jest）和工具（React Testing Library）的使用情况。检查ESLint、Prettier等开发工具的配置。
运行项目调试
执行npm start或yarn dev启动开发服务器，通过浏览器开发者工具观察组件渲染和状态变化。结合源代码修改验证功能关联性，使用React DevTools检查组件层次和props传递。
文档查阅
寻找项目内的README.md或文档目录，了解开发规范、脚本说明和特殊配置。若存在Storybook或Styleguidist，通过交互文档查看组件示例。
构建分析
运行npm run build生成生产包，使用source-map-explorer或webpack-bundle-analyzer分析打包结果，识别性能优化点和大文件依赖。
