实习工作使用的技术栈是React+React DVA+React Umi+React AntDesign+React AntDesignPro
一、React基础
1.1.初始react
npm i react react-dom：打开项目所在终端安装react
<body>
<div id="root"></div>
<!-- 1.引入js文件 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<script>
// 2.创建react元素
// 参数一：元素名称
// 参数二：元素属性
// 参数三：其他子节点(可以有多个)
const title=React.createElement('h1',null,'我是标签',React.createElement('span',{'name':'innerspan','id':'innerspan'}))
// 3.渲染react
// 参数一：要渲染的react元素
// 参数二：挂载点(渲染位置)
ReactDOM.render(title,document.getElementById('root'))
</script>
</body>
1.2.react脚手架
使用react脚手架初始化项目：npx create-react-app 自己项目名（my-app）
在项目根目录下运行命令（cd my-app）：npm start
npx 命令介绍：提升包内提供的命令行工具的使用体验，无须安装脚手架包，就可以直接使用包内提供的命令
// src/index.js
// 导入React
import React from 'react';
import ReactDOM from 'react-dom';
// 创建react元素
const title=React.createElement('h1',null,'好标签')
// 渲染react元素
ReactDOM.render(title,document.getElementById('root'))
<!-- public/index.html -->
<div id="root"></div>
1.3.jsx
使用jsx创建react元素，使用小括号()包裹标签，使用{}来调用js中的变量或者函数
// 导入React
import React from 'react';
import ReactDOM from 'react-dom';
// 使用jsx创建react元素，使用小括号()包裹标签，使用{}来调用js中的变量或者函数
const name = "Jack"
const namediv = (
<div>您好，我叫{name}</div>
)
// 渲染react元素
ReactDOM.render(namediv,document.getElementById('root'))
1.3.1.条件渲染
if-else、三元运算符、逻辑运算符（ && ，逻辑中断，适合要么显示，要么隐藏的）
// 条件渲染
const loading = false
// if-else
const loadData = () => {
if(loading){
// className='title' 使用加类名的方式进行样式处理
// 样式要单独写在一个css中
// 要在js文件中引入css文件
return <div className='title'>数据加载中...</div>
}
return <div className='title'>数据加载完毕</div>
}
// 三目运算
const loadData2 = () => {
return loading?(<div>加载中...</div>):(<div>加载完毕</div>)
}
// 逻辑运算符 &&
const loadData3 = () => {
return loading && (<div>加载中...</div>)
}
const dv = (
<div>{loadData3()}</div>
)
// 渲染react元素,应该子节点中只能渲染一个react元素
ReactDOM.render(dv,document.getElementById('root'))
1.3.2.列表渲染
// 1.创建数组
const songs = [
{id: 1,name:'哈'},
{id: 2,name:'哈哈'},
{id: 3,name:'哈哈哈'}
]
// 2.使用map()方法，渲染列表时应该添加上key属性，且要保证key值唯一
// map遍历谁，就给谁添加key属性
// 尽量避免使用索引号作为key
const list = (
<ul style={{color:'red',backgroundColor:'blue'}}>
{songs.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
)
// 3.渲染react元素
ReactDOM.render(list,document.getElementById('root2'))
1.3.3.样式处理
// 方法1（不推荐）：添加行内样式,外层大括号是调用，内层大括号是样式对象
<h1 style={{color:'red',backgroundColor:'blue'}}>
这是一个h1标签
</h1>
// 方法2（推荐）
// 在src下创建一个css/index.css文件，样式要单独写在一个css中
.title{
text-align: center;
}
// 在js文件中引入css文件
import './css/index.css';
// className='title' 使用加类名的方式进行样式处理
<div className='title'>数据加载中...</div>
二、React组件
2.1.创建React组件
2.1.1.使用函数创建组件
使用函数方式创建组件和使用箭头函数创建组件
组件名称必须是大写字母开头
渲染调用组件时，函数名为组件标签名
必须有 return 返回值，如果没有就return null
// 1、使用函数方式创建组件
function Hello(){ // 组件名称必须是大写字母开头
console.log(this) // 此处的this是undefined，因为babel编译开启了严格模式（开启严格模式后就不让指向window了）
return (
<div>这是我的第一个函数组件</div>
)
// return null
}
ReactDOM.render(<Hello />,document.getElementById('root')) // 渲染调用组件时，函数名为组件标签名
// 2、使用箭头函数创建组件
const Hello2 = () => <div>这是我的第一个箭头函数组件</div>
// 1.React解析组件标签，找到Hello3组件
// 2.发现组件使用的是函数定义的，随后调用该函数
ReactDOM.render(<Hello2/>,document.getElementById('root2'))
2.1.2.使用类创建组件
类组件：使用ES6的class创建组件
关于类的一些点
// 类组件
// 约定1：类名称必须大写字母开头
// 约定2：类组件应该继承React.Component父类，从而调用父类中提供的方法和属性
// 约定3：类组件必须提供render()方法
// 约定4：render()方法必须有return返回值,返回的内容作为类组件的结构，如果没有return null
class Hello3 extends React.Component {
// render放在Hello3的原型对象上，供实例使用
// render中的this指向Hello3的实例对象
render(){
return (
<div>这是我的第一个类组件</div>
)
// return null
}
}
// 1.React解析组件标签，找到Hello3组件
// 2.发现组件使用的是类定义的，随后new出该实例，并通过该实例调用到原型上的render发放
// 3.将render返回的虚拟DOM转化为真实DOM，并呈现到页面中
ReactDOM.render(<Hello3/>,document.getElementById('root2'))