React学习记录---第三章-CSDN博客

本文链接：https://blog.csdn.net/weixin_44921693/article/details/140267644

前两章在这里：React学习记录 ---第一章-CSDN博客

React学习记录 ---第二章-CSDN博客

React应用---基于脚手架

从一个react应用=>浏览器识别运行经历了哪些？

JSX=>babel=>React.createElement(返回ReactElement:一个描述React虚拟DOM节点的对象，type/key/props/ref/children,这里diff比较key或者元素的type。

React.createElement（type,config,children)

用脚手架创建React项目

关于脚手架

脚手架：帮助程序员快速创建一个基于xx库的模板项目

react提供了一个用于创建react项目的脚手架：create-react-app，整体技术为：react+webpack+es6+eslint

特点：模块化、组件化、工程化

创建项目

①全局安装：npm i -g create-react-app

②切换到项目创建目录，创建项目：create-react-app my-project

③进入项目文件夹，启动项目：npm start

react脚手架项目结构

public中对我们最有用的是index.html，以下是index.html文件的介绍

<!DOCTYPE html>
<html lang="en">
  <head>
		<meta charset="utf-8" />
		<!-- %PUBLIC_URL%代表public文件夹的路径 -->
		<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
		<!-- 开启理想视口，用于做移动端网页的适配 -->
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<!-- 用于配置浏览器页签+地址栏的颜色(仅支持安卓手机浏览器) -->
    <meta name="theme-color" content="red" />
    <meta
      name="description"
      content="Web site created using create-react-app"
		/>
		<!-- 用于指定网页添加到手机主屏幕后的图标，自动识别，apple-touch-icon只支持苹果 -->
		<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
		<!-- 应用加壳时的配置文件 -->
		<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
		<!-- 若llq不支持js则展示标签中的内容 -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

这里解释一下应用加壳：不管我们用的react还是vue写，最后生成的都是.html文件，因为浏览器只认识.html，.css，.js，加壳就是在html外面加一层壳，比如你想做安卓，就是在html外面加一层安卓的壳就是安卓应用了，这些配置是在manifest.json中写的。

ReactDOM.render只执行一次就是执行App这个组件,这个里面会放很多子组件

index.js:入口文件

样式的模块化

使用less因为有很多嵌套可以避免样式冲突问题，但是使用css的话就可能产生样式冲突问题，这时就需要模块化的引入，例子如下,文件名字中间要加上module才能如下引入

import hello from './index.module.css'

<h2 className={hello.title}></h2>

组件化编码流程

1.拆分组件: 拆分界面,抽取组件，注意className、style的写法

2.实现静态组件: 使用组件实现静态页面效果

3. 实现动态组件

3.1 动态显示初始化数据

3.1.1 数据类型

3.1.2 数据名称

3.1.2 保存在哪个组件?

某个组件使用：放在自身的state中

某些组件使用：放在他们共同的父组件state中（状态提升）

3.2 交互(从绑定事件监听开始)

父子通信：父给子传，通过props；子给父传，通过props，要求父提前给子传一个函数

状态在哪里，操作状态的方法就在哪里！

脚手架配置代理

推荐的ajax库：axios，封装XmlHttpRequest对象的ajax，promise风格，可以用在浏览器端和node端。

跨域代理：在package.json中配置：“proxy":"http://localhost:5000"

批量配置跨域代理：

在src下创建代理配置文件：src/setupProxy.js

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

module.exports = function(app){
	app.use(
		proxy('/api1',{ //遇见/api1前缀的请求，就会触发该代理配置
			target:'http://localhost:5000', //请求转发给谁
			changeOrigin:true,//控制服务器收到的请求头中Host的值
			/*
         	changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
         	changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
         	changeOrigin默认值为false，但我们一般将changeOrigin值设为true
         */
         pathRewrite: {'^/api1': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
		}),
		proxy('/api2',{
			target:'http://localhost:5001',
			changeOrigin:true,
			pathRewrite:{'^/api2':''}
		}),
	)
}