2025-04-11

react基础

# 1. use-immer 类似 useState

# 2. 谷歌插件 Redux DevTools

npm install -g create-react-app
create-react-app demo01

# 3. react 脚手架不 eject 修改配置文件如@地址别名 alias 的方法

找到根目录 config-overrides.js
没有 config-overrides.js 就要创建并安装 yarn add react-app-rewired customize-cra 两个包具体看这https://ant.design/docs/react/use-with-create-react-app-cn 方法如下:

const { override, addWebpackAlias } = require('customize-cra')
const path = require('path')

module.exports = override(
  addWebpackAlias({
    '@': path.join(__dirname, './src')
  })
)

package.json 配置 react-app-rewired

"scripts": {
    "start": "set PORT= 7003 && react-app-rewired start",
    "build": "react-scripts build",
  }

# 4. 自定义端口号

package.json 的 start 配置 set PORT= 6001 &&

"scripts": {
    "start": "set PORT= 6001 &&  react-scripts start",
    "build": "react-app-rewired build",
},

# 5. 自动 css3 前缀兼容低版本浏览器

安装所需要依赖

npm i postcss-loader  autoprefixer

package.json 设置

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 11"
],

3.根目录新建 postcss.config.js 配置如下

module.exports = {
  plugins: [require('autoprefixer')]
}

# 6. 基于 Rem 的适配方案

yarn add postcss-pxtorem amfe-flexible
根目录配置 postcss.config.js

module.exports = ({ file }) => {
  // 组件库设计尺寸是375，所以如果匹配组件库，则将布局尺寸设计成375
  const designWidth = file.dirname.includes('node_modules/ppfish-mobile')
    ? 375
    : 750

  return {
    plugins: {
      autoprefixer: {},
      'postcss-pxtorem': {
        rootValue: designWidth / 10,
        propList: ['*']
      }
    }
  }
}

index.js 入口文件

import 'amfe-flexible'

# 7. 多环境反向代理

1. npm i http-proxy-middleware@2.0.0
2021.7.18日测试，大于这个版本代理无法成功

src 目录下新建一个 setupPropxy.js 文件

const proxy = require('http-proxy-middleware')

module.exports = function (app) {
  app.use(
    proxy.createProxyMiddleware('/api', {
      // 'qwl'  需要转发的请求
      target: 'http://localhost:8866', //接口服务器地址
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }),

    proxy.createProxyMiddleware('/test', {
      target: 'http://localhost:8866',
      changeOrigin: true,
      pathRewrite: {
        '^/test': ''
      }
    })
  )
}

# 8. 按需引入

yarn add babel-plugin-import @craco/craco

# 9. if-comp

import IfComp from 'if-comp'

const InnerIfComp = () => (
  <IfComp
    expression={router.pathname === '/'} //条件
    trueComp={<h3>render true component</h3>} //渲染真值内容
    falseComp={<h3>render false component</h3>} //渲染假值内容
  />
)

# 10. 输出 html（dangerouslySetInnerHTML）

function createMarkup() {
  let tempValue = '你好'
  let html = `<input value="${tempValue}" ></input>`
  return { __html: html }
}

function Example9() {
  return (
    <>
      <div dangerouslySetInnerHTML={createMarkup()} />
    </>
  )
}

# 11. 可编辑 div

<div
  contentEditable="true"
  suppressContentEditableWarning="true"
  id="test"
></div>

上次更新: 2025-12-04