一、概述
基础知识、核心原理、项目实战
npm i create-react-app -g
create-react-app 项目名称
// 查看版本
create-react-app --version
开发效率
二、JSX
vscode如何支持jsx语法：将文件后缀名改成jsx即可
在ReactDOM.createRoot()的时候，不能直接把html/body作为根容器
1.number/string：值是啥渲染出来就是啥
2.boolean/null/undefined/Symbol/BigInt：渲染的内容是空
3.数组：把数组的每一项都分别拿出来渲染，并不是变为字符串渲染（中间没有逗号）
4.除数组外，其余对象一般都不支持（特殊情况：JSX虚拟dom对象、给元素设置style行内样式）
React.createElement(ele, props, ...children)
1.ele:标签名或组件名
2.props：属性集合（对象），如果没有设置任何属性则值为null
3.children：第三个及以后的参数都是当前元素的子节点
createElement方法执行创建出虚拟dom对象
render：把虚拟dom变为真实dom
for...in：既可以迭代私有的，也可以迭代公有的，只能迭代可枚举、非Symbol类型的属性
Object.getOwnPropertyNames()：获取对象非Symbol类型的私有属性（无关是否可枚举）
Object.getOwnPropertySymbols()：获取对象Symbol类型的私有属性
Reflect.ownKeys()：获取所有的私有属性
当type是一个函数时：
1.把函数执行
2.把虚拟dom中的props作为实参传递给函数
3.接收函数执行的返回结果（即当前组件的虚拟dom对象）
4.基于render把组件返回的虚拟dom变为真实dom
三、组件
1.props
关于对象的规则设置：
Object.freeze(obj)：冻结对象（被冻结的对象不能修改、新增、删除成员，不能给成员做劫持）
Object.isFrozen(obj)：检测是否被冻结，返回true或false
Object.seal(obj)：密封对象（被密封的对象可以修改，但不能新增、删除成员，不能给成员做劫持）
Object.isSealed(obj)：检测是否被密封
Object.preventExtensions(obj)：把对象设置为不可扩展（除了不能新增成员，其余的操作都可以）
Object.isExtensible(obj)：检测是否可扩展
// 设置默认值（函数组件）
MyComponent.defaultProps = {
count: 0
}
import PropTypes from 'prop-types'
// 设置其他规则（数据值格式、是否必传...）
MyComponent.propTypes = {
title: PropTypes.string.isRequired
}
2.class
class Person {
// new的时候执行的构造函数
// 需要接收传递进来的实参才需要设置constructor
constructor(x, y) {
// this：创建的实例
this.total = x + y
}
num = 1 // 等价于this.num = 1 给实例设置私有属性
// 私有的方法
getNum1 = function () { }
// 私有的方法
getNum2 = () => {
console.log(this) // this：当前创建的实例
}
// 公共的方法（原型上的）
getCount() { }
// 把构造函数当做一个普通对象，设置静态的私有属性方法
static sum = 100
// 把构造函数当做一个普通对象，设置静态的私有属性方法
static getSum() { }
}
// 设置公共的属性
Person.prototype.count = 1
// 基于extends实现继承
// 1.首先基于call继承：React.Component.call(this) // this：Person类的实例p
// 2.再基于原型继承：Person.prototype.__proto__ === React.Component.prototype
// 实例->Person.prototype->React.Component.prototype->Object.prototype
class Person extends React.Component {
constructor() {
// 只要设置了constructor，则内部第一句话一定要执行super()
// 如果没有设置constructor，则内部默认加了constructor() {super()}
super()
}
}
let p = new Person()
3.类组件
import PropTypes from 'prop-types'
class MyComponent extends React.Component {
// 属性规则校验
static defaultProps = {
count: 0
}
// 其他规则
static propTypes = {}
constructor() {
super()
}
}
// 在constructor处理完毕之后，react内部会把传递的props挂载到实例上，所以在其他的函数中只要保证this是实例，就可以基于this.props获取传递的属性
this.forceUpdate()：强制更新（会跳过shouldComponentUpdate函数的校验）
4.PureComponent
Object.is(NaN, NaN)是相等的
PureComponent会给类组件默认加一个shouldComponentUpdate，在函数中它会对新旧属性和状态做一个浅比较（只比较第一层），如果没有改变则返回false
5.ref
class MyComponent extends React.Component {
box3 = React.createRef()
componentDidMount() {
console.log(this.refs.box1)
console.log(this.box2)
console.log(this.box3.current)
}
render() {
return (
<div>
<div ref="box1">1</div>
{/* x是函数的形参，存储的是当前的dom元素 */}
<div ref={(x) => this.box2 = x}>2</div>
<div ref={this.box3}>3</div>
</div>
)
}
}
给标签设置ref：获取dom元素
给类组件设置ref：获取组件的实例
给函数组件设置ref直接报错，但是可以配合React.forwardRef实现ref的转发（获取函数组件（子组件）内部的某个元素）
const Child = React.forwardRef(function Child(props, ref) {
return (
<button ref={ref}>按钮</button>
)
})
class Parent extends React.Component {
componentDidMount() {
console.log(this.button) // 子组件内部的button按钮
}
render() {
return (
<Child ref={x => this.button = x} />
)
}
}
6.setState
this.setState(partialState, callback)
partialState：支持部分状态更改
callback：在状态更改、视图更新完毕后触发执行（只要执行了setState，callback一定会执行）
1.发生在componentDidUpdate函数之后，componentDidUpdate会在任何状态更改后都触发执行，而回调函数可以在指定状态更新后处理一些事情
2.基于shouldComponentUpdate阻止了状态/视图更新，componentDidUpdate不会执行，但callback回调函数依然会触发执行
在react18中，setState在任何地方执行都是异步的（实现状态的批处理（统一处理））
在当前相同的时间段内，遇到setState会立即放入到更新队列中
flushSync：可以刷新updater更新队列，即让修改状态的任务立即批处理一次（在flushSync操作结束之后会立即刷新更新队列）
import {flushSync} from 'react-dom'
flushSync(() => {
this.setState({})
})
或
flushSync()
// prevState：存储之前的状态值
this.setState(prevState => {
// return的对象就是我们想要修改的新状态值
return {}
})
7.合成事件
class MyComponent extends React.Component {
handleClick1() {
console.log(this) // undefined
}
// 只要方法经过bind处理了，那么最后一个实参就是传递的合成事件对象
handleClick2(x, y, e) {
console.log(this, x, y) // 实例、1、2
console.log(e)
}
handleClick3 = (e) => {
console.log(this) // 实例
console.log(e)
}
render() {
return (
<div>
<button onClick={this.handleClick1}>button1</button>
<button onClick={this.handleClick2.bind(this, 1, 2)}>button2</button>
<button onClick={this.handleClick3}>button3</button>
</div>
)
}
}
合成事件对象中的nativeEvent：可以获取浏览器内置的原生事件对象
window、document、html、body
事件传播机制
捕获阶段：从最外层向最里层逐一查找
目标阶段：事件源
冒泡阶段：从里到外
事件是浏览器赋予元素的默认行为
event.stopPropagation()：阻止事件的传播（包含捕获和冒泡）
event.stopImmediatePropagation：阻止事件的传播（当前元素绑定的其他方法，如果还未执行，也不会再执行了（同一级的方法））
event.target：事件源（点击的是谁，谁就是事件源）
事件委托的好处：提高JS代码运行的性能、给动态绑定的元素做事件绑定
限制：当前操作的事件必须支持冒泡传播机制，例如mouseenter、mouseleave等事件是没有冒泡传播机制的
<div onClick={() => {
console.log('合成 冒泡')
}} onClickCapture={() => {
console.log('合成 捕获')
}}></div>
react中合成事件的处理原理：不是给当前元素单独的事件绑定，是基于事件委托处理的
1.在react17以前，都是委托给document容器的，而且只做了冒泡阶段的委托
2.在react17及以后，都是委托给#root这个容器的，捕获和冒泡都做了委托
event.path // path：所有祖先元素（事件源->window）
注
@珠（zxt）[23]
