react知识库

一、基础知识

1.1.前端开发组件化/模块化

1.有利于团队协作开发
2.便于组件复用：开发效率，后期维护，减少冗余代码

1.2.划分组件

1.业务组件（普通业务组件，通用业务组件）
2.功能组件（通用功能组件 [ ui组件库 ] ）

1.3.工程化

1.基于webpack ( vite / rollup / turbopack )
①.实现组件的合并、压缩、打包
②.代码编译、兼容、校验

1.4.主流前端框架

react：MVC数据驱动视图（Model数据层(动态处理，无论样式还是内容) -(数据状态更新，控制视图重新渲染)- View视图层(jsx语法构建) -(用户进行一系列人机交互)- Controller控制层(根据业务需求操作) - (基于一些逻辑修改数据) - Model数据层）
vue：MVVM双向数据绑定（数据驱动视图渲染，视图驱动数据更改input）（model数据层+view视图层+viewmodal数据视图监听层）
angular：MVC

主流思想：不直接操作dom，改为数据驱动视图思想
操作dom思想弊端：1.消耗性能（引起dom的重排(回流)/重绘） 2.操作麻烦
数据驱动思想优点：1.不直接操作dom，框架底层构建了一套 虚拟dom - 真实dom 的渲染体系，有效背面了dom的重排(回流)/重绘） 2.修改数据，框架会按照相关数据让页面重新渲染 3.开发效率更高，性能更好

1.5.脚手架 create-react-app

安装：npm i create-react-app -g
版本：create-react-app --version
创建项目：create-react-app 项目名称 (命名规范:数字、小写字母、_)

默认安装
react（react框架的核心）
react-dom（构建webapp：视图渲染的核心）
react-native（构建h5：视图渲染的核心）
react-scripts：脚手架为了让项目目录看起来干净一些，把webpack打包的规则及相关插件/loader等都隐藏到了node_modules目录下，react-scripts就是脚手架中自己对打包命令的一种封装，基于它打包，会调用node_modules中的webpack等进行处理

1.4.1.node_modules

项目中需要安装的依赖
babel-preset-react-app：对@babel/preset-env语法包的重写，目的是把ES6转为ES5，重写的目的，让语法包可以识别react的语法，实现代码转换

1.4.2.src

后续所有编写的代码几乎都在src下，打包时一般只对这个目录的代码进行处理，src/index.js 入口文件

1.4.2.1.setupProxy.js

新建setupProxy.js：处理跨域
yarn add http-proxy-middleware

const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
  app.use(
    createProxyMiddleware('/jian', {
      target: 'https://www.jianshu.com/asimov', // 目标地址
      changeOrigin: true, // 允许跨域：代理时,Host的源默认会保留(即Host是浏览器发过来的host),如果将changeOrigin设置为true,则host会变成target的值
      ws: false, // 如果要代理 websockets，配置这个参数
      secure: true, //如果代理是https开头的要设置为true, 反之false
      pathRewrite: { '^/jian': '' } // 将前缀替换掉
    })
  )
  app.use(
    createProxyMiddleware('/zhi', {
      target: 'https://news-at.zhihu.com/api/4',
      changeOrigin: true,
      ws: true,
      pathRewrite: { '^/zhi': '' }
    })
  )
}

1.4.3.package.json

1.browserslist 浏览器兼容：基本browserslist规范，设置浏览器兼容情况
postcss-loader+autoprefixer会给css3设置相关前缀
babel-loader会把es6编译为es5
多ES6内置API兼容处理
import ‘react-app-polyfill/ie9’ ie11 stable…
2.eject 释放webpack：yarn eject
3.babel：对babel-loader的额外配置

1.4.4.public

放页面模板
PUBLIC_URL：代表public目录

1.4.5.config

1.4.5.1.webpack.config.js

1.修改预编译语言
脚手架默认配置的是sass预编译语言，如果使用less需要自己处理
yarn add less less-loader@8
yarn remove sass-loader
将webpack.config.js关于sass的换成less即可
2.目录别名
alias:{ ‘@’:paths.appSrc }：将src目录的别名设置为@

1.4.6.scripts

1.4.6.1.start.js

1.修改端口号和域名
DEFAULT_PORT：3000
HOST：‘127.0.0.1’

二、语法

2.1.jsx

jsx：把js和html标签混合在一起
vscode支持jsx语法：把文件名设置为.jsx，书写html就可以进行格式化和快捷提示了，webpack打包对于jsx文件会按照js方式进行处理
js表达式：{}，一定要是有结果的，可以放入变量，数学运算，值，判断（三元运算符），循环（map）

获取根节点：const root = ReactDOM.createRoot(document.getElementById(‘root’))
createRoot时不能把html/body作为根容器，需要指定一个额外的盒子，例如root
渲染：root.render(<>

根节点

)
每个构建的视图只能有一个根节点
React.Fragment ，react提供的一个空文档标记标签，即保证了只有一个根节点，又不新增一个HTML层级结构