create-react-app结构

项目结构

React 项目一个 js 就是一个组件，并且每个组件都搭配一个.css 文件，用于设置组件的样式，但是这个 .css 文件不是必须的。

1. 项目的入口文件(类似于 vue 中的 main.js)

   入口文件一般加载根组件。

• index.js
• index.css

2. App.js：根组件
3. 创建路由组件或子组件，需要自己手动创建文件夹。

React 配置 jsx 语法联想

在 settings.json 文件中，添加一下代码：

"emmet.includeLanguages": {
  "javascript": "javascriptreact"
}

使用 PropTypes 进行类型检查

注意：只检查 prop 值的类型

渲染优化

1. 父组件 state 数据变化，子组件不变，如果子组件实现了 getDerivedStateFromProps，那么要注意是否应该更新 state；子组件是否应该执行 render()；

类名作用域

React 中不管你在哪一个 .css 中设置的样式，都是一个全局样式，对所有组件都生效，一般类名都会增加一个组件前缀，区分不同的标签。

使用 less 解决类名作用域冲突问题

1. 安装插件 Easy LESS：可以自动将 .less 文件转化成 .css 文件；

React 路由

安装：npm install react-router-dom

内置组件

1. BrowserRouter: 类似于 vue 中的 history 模式，是通过历史记录的方式实现路由的切换

// 导入路由类
import { BrowserRouter } from "react-router-dom";
// 用组件BrowserRouter将 <App/> 包裹起来，表示用这个路由来控制整个组件的切换
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

2. Route 路由

• 路由的书写顺序：重定向和 404 一定要写在底部
• 掌握路由的匹配顺序：自上而下，由外向内匹配(嵌套路由)
• 掌握路由的严格模式和非严格模式：
  • 严格模式：无法匹配二级路由，如果当前路由有二级路由，不要使用严格模式
• 路由传参：动态参数、查询字符串
• 路由组件和非路由组件：如何使用 history, match, location
  • withRouter 高阶组件用法

接口跨域

1. package.json 文件中配置 “proxy”: “http://localhost:4000”,
2. 下载代理包：http-proxy-middleware
3. 修改 webpack 的源代码