一、React整体认识
1、React是用于构建用户界面的js库。
2、React生态
React生态.png
3、JSX
（1）JSX不是模板引擎语言，而是javascript的语法扩展，使用XML标记的方式直接声明界面，处理UI逻辑。
（2）JSX规则：
※ 在JSX中嵌入表达式，用{}包裹
※ 定义组件用大写开头，小写tag为原生dom节点
※ JSX标签可以有特定属性和子元素
※ JSX只能有一个根元素。
为什么只能有一个根元素？babel转译时，createElement(‘标签’…)，这个标签填谁呢？
可以用Fragments包含并列的子元素，也可以编写表格组件，包裹子元素让html生效，类似vue的<template>。
<React.Fragment></React.Fragment>或<></>
二、环境搭建
脚手架工具：create-react-app
https://create-react-app.dev/docs/getting-started
三、props
当react元素作为自定义组件，将JSX接受的属性转换为单个对象传递给组件，这个对象被称为props。通俗来说，props就是父组件传递给子组件的参数对象(properties)，这是组件的固有属性。
不能再组件内部修改props。如果需要更新，就要通过父组件传入新的props，更新子组件
将数据从父组件传递给子组件。
constructor(props){
super(props)
}
constructor是类的构造函数，返回一个对象的实例。
如果没有显式的构造函数，会有默认的构造函数。
子类的构造函数必须先调用一次super函数。
四、创建组件的方式
1. 函数组件——无状态：
函数组件的props是直接通过参数的形式传递下来的。
函数组件也叫无状态组件，没有this关键字：this.props--->props，没有生命周期
优点：轻量
2. 类组件——有状态
五、列表渲染
Arr.map(function(item){
return ...
})
六、条件渲染
方法：三目运算符、函数、&&
<div className={`col${ count ? ' ' : '-es'}`}>1234678</div>
七、React使用css：
// 行内样式
style={{fontSize: 20; color: '#ccddee'}}
### 样式表
import './listItem.css'
CSS Module
特点：
1、不适用选择器，使用class名定义样式
2、不层叠clas，使用一个class定义样式
3、用过compose来组合
优点：
1、解决全局污染问题
import style from './aa.module.css'
<span className={style.title}>购房人他呢如果让她</span>
2、命名混乱问题
3、没有依赖管理
.common{
text-decoration: underline;
text-indent: 2em;
}
.title{
composes: common; // 引用common中的样式
}
公共样式提取：
// common.module.css文件
.common{
text-decoration: underline;
text-indent: 2em;
}
// listItem.module.css文件
.title{
composes: common from 'common.module.css'
}
八、Css管理进阶--工具
styled-component
Classnames
Classnames的两大使用方法：
1、bind
// listItem.module..css
.title{
font-size: 20px;
color: #701100
}
.list-title{
color: #004000;
font-weight: bold;
}
// listItem.jsx
import style from './listItem.module.css'
import classnames from 'classnames/bind'
const cls = classnames.bind(style)
<span className={cls('title', 'list-title')}>的公司的人和如何和</span>
2、判断classname是否需要渲染
// listItem.jsx
import style from './listItem.module.css'
import classnames from 'classnames/bind'
import cn from 'classnames'
let count = 0;
// render()中：
const _cn = cn({
'grid-es': !count
})
<div classname={`grid` + _cn}>{count}</div>
网友评论