--- theme: fancy highlight: lioshi --- # 基本使用 `React`就是`JS`，外加一点模板语言`JSX` ## 创建React项目 * `vite`创建: `npm create vite@latest react-demo-vite --template react-ts` * `create-react-app`创建: `npx create-react-app test-demo --template typescript` ## JSX语法 * `js`的加强版，卸载`JS`里面，组件的UI结构 * 语法与`HTML`相似 * 已成为ES规范，可用于`Vue3` ### 标签 * 首字母大写表示组件，小写是`html`原生标签 * 每段`JSX`片段只能有一个根节点，即单根节点（`vue3`可以是多根节点） * `JSX`中空标签表示`Fragment`，对标`vue`的`template`，但是`JSX`中`Fragment`可以作为根节点，`vue`中`template`不能作为根节点 ### 属性 * `jsx`的属性就是`html`的属性，只有些微区别 * `class`要写为`className`，为了防止和`类(class)`关键字冲突 * `style`要使用`Object`，且必须是***驼峰***写法 * `label`的`for`要写为`htmlFor`，避免与`for循环`冲突 ### 事件 * 写法使用`onXxx`形式 * 必须传入一个函数（是`fn`不能是fn的***执行结果fn()***） * 注意使用`Typescript`类型, 如：`import type { MouseEvent } from 'react'` #### react事件和DOM事件的区别 * `react`中的`event`不是原生的`event`, `__proto__.construct` 指向 ***SyntheticEvent***，是一个`react`定义后的事件对象，译为***组合事件***，模拟`DOM事件`的所有能力 * DOM原生事件对象的`__proto__.construct`一般指向诸如***MouseEvent***之类的事件对象 * 如果要获取react事件对应的原生DOM事件，可以通过`event.nativeEvent`获取 * react16及之前事件绑定到`document`上，react17及以后事件绑定到`root`组件上，有利于多个`react`版本并存，例如微前端 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/368d5b130e2b4b03bef0522bd655f5b8~tplv-k3u1fbpfcp-watermark.image?) #### `class组件`事件为何`bind this` * 如果没有`bind this`，会报错误：`TypeError：Cannot read property 'setState' of undefined`,也就是说`this`不会正确地指向该`class组件` * 严格模式下`this`默认指向`undefined`，因此我们需要`bind this`让它指向组件 * 为何不推荐在`jsx`中执行`bind this`，因为这样做会多次执行`bind`事件（一个小的性能优化知识点） * 使用箭头函数定义的方法，无需`bind this`，因为箭头函数地`this`指向它的上层作用域的`this` ### 插值表达式 * 我们可以使用`{ XXX }`插入JS变量，函数，表达式 * 可以插入普通文本，属性 * 可以用于***注释*** ### JSX中使用条件判断 * 使用`&&`，适用隐藏显示单个元素 * 使用***三元表达式***，适用两个元素的来回切换 * 使用***函数***，适用多个元素的来回切换，`如swith case` ```js const show = true let no = 0 no = 2 // 首字母大小，返回一个JSX片段，可以看作是一个自定义组件或自定义标签 const WhoShow = () => { switch (no) { case 1: return

case 2: return

default: return

} }

{show &&

hello

}

{show ?

nothing

hello

}

``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8d416dd591ce44e3abc3d08ae822b800~tplv-k3u1fbpfcp-watermark.image?) ### JSX中使用循环 * 使用数组`map` * 每个item元素都需要一个***key***，同`vue` * ***key***同级别唯一 * 不要使用***index***作为`key` ```js const list = [ { username: 'zhangsan', name: '张三' }, { username: 'lisi', name: '李四' }, { username: 'wangmazi', name: '王麻子' }, ]

{name}

``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c47b0d4776344c93ad5a06398ce236ed~tplv-k3u1fbpfcp-watermark.image?) ## 组件 * 组件就是一个UI片段 * 拥有独立的逻辑和显示 * 组件可大可小，可嵌套 * 组件拆分，利于维护，和多人协作开发 * 可封装公共组件（或第三方组件）复用代码，提高开发效率 * `class组件`、`函数组件`两种定义方式 * `React16` 以后，推崇***函数组件+hooks***，从此，组件就是一个函数 ### 定义class组件 `render`函数定义我们要渲染到网页上的内容 16.6版本之前： ```js import React, { Component, ReactNode } from 'react' class ClassComponentDemo extends Component { constructor(props: unknown) { super(props) } render(): ReactNode { // 插值表达式 return ( <>

FunctionComponent

) } } export default ClassComponentDemo ``` 从 React 16.6 版本开始，可以不再为 `class 组件`显式定义 `constructor` 构造函数 ```js import React, { Component, ReactNode } from 'react' class ClassComponentDemo extends Component { render(): ReactNode { return

ClassComponent

} } export default ClassComponentDemo ``` ### 定义一个函数组件函数的返回值，视作`class组件`的`render`方法 ```js import React from 'react' import type { FC } from 'react' const FunctionComponentDemo: FC = () => { return

FunctionComponentDemo

} export default FunctionComponentDemo ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d1f28a767917489e91d67bdb07b7f76d~tplv-k3u1fbpfcp-watermark.image?) ### state * `state`是组件内部的状态信息（组件的***独家记忆***），不对外 * 普通变量变化，组件不更新，`state`变化，触发组件更新，重新执行`render`方法，渲染页面（`rerender`） * *****不可变***** 永远都不要去修改`state`的值，如果需要改变，而是应该完整替换，使内存地址发生变更 #### class组件的state 1. 使用`this.setState()`更新`state`,***禁止***直接更改`state`，传入全新`state`, 完全替换 2. `class组件`方法内的`this`需要特别注意！方式1：显示`bind(this)` 1. 在`construct`内`bind(this)` ```js import React, { Component, ReactNode } from 'react' type StateType = { count: number } class ClassComponentDemo extends Component { constructor(props: unknown) { super(props) this.state = { count: 0, } // bind(this) this.addCount = this.addCount.bind(this) } render(): ReactNode { // 插值表达式 return ( <>

{this.state.count}

) } addCount() { console.log(this) // 如果没有 bind（this）指向undefined 后续会报错找不到state this.setState({count: this.state.count + 1}) } } export default ClassComponentDemo ``` 2. 也可以在绑定事件时再`bind(this)`,但不推荐，为什么？ * 因为每次更新都会重新执行`render`方法，每次更新都会执行`bind(this)` * `construct`只有初始化时执行一次`bind(this)`，所以性能更好 ```js render(): ReactNode { return ( <>

{this.state.count}

) } ``` 方式2：定义方法的时候使用箭头函数, 箭头函数内的`this`为函数的上级作用域的`this` ```js addCount = () => { console.log(this) // 打印组件本身 this.setState({count: this.count + 1}) } ``` > 推荐: 使用***箭头函数***，简洁 #### 函数组件的state 1. 函数组件的`state`需要借助钩子`useState`的帮助 2. 使用`useState`返回的`set`方法修改`state`, ***禁止***直接更改`state`，传入全新`state`,完全替换 ```js import React, { useState, useEffect } from 'react' import type { FC } from 'react' const FunctionComponentDemo: FC = () => { const [count, setCount] = useState(0) useEffect(() => { console.log(count) // 获取最新的count }, [count]) const addCount = () => { setCount(count + 1) console.log(count) // 这里的count永远是setCount之前的count } // 插值表达式 return ( <>

{count}

) } export default FunctionComponentDemo ``` #### 使用immer释放不可变值的心理负担 * `state`是不可变数据 * 操作成本比较高，有很大的不稳定性，你可能会忘了解构，忘了变更地址 * 使用`immer`可避免这一问题安装：`npm install immer --save` ```js import React, { FC, useState } from 'react' import produce from 'immer' const Demo: FC = () => { const [userInfo, setUserInfo] = useState<{ name: string age: number a?: number }>({ name: 'ljx', age: 18 }) const changeAge = () => { // userInfo.age = 21 修改失败，这里是直接对state的值进行修改 // 传入一个新的值，修改成功 // userInfo.age = 21 // setUserInfo({ ...userInfo }) setUserInfo( produce(draft => { draft.age = 21 draft.a = 10 }) ) } const [list, setList] = useState(['x', 'y']) const changeList = () => { // list[2] = 'z' 修改失败，与上面同理 // const newList = [...list] // newList[1] = 'z' // setList(newList) setList( produce(draft => { draft[1] = 'z' }) ) } return (

state 不可变数据

{JSON.stringify(userInfo)}

{JSON.stringify(list)}

) } export default Demo ``` #### state使用注意点 1. 无论是哪种组件都不要直接修改`state`的值，`class组件`使用`this.set()`方法修改`state`,`Function组件`使用`useState（）`返回的`set`方法修改`state` ***为什么？*** 组件`state`被设计为不可直接修改的，这是为了保持`React`的***单向数据流***和***组件隔离***的原则。直接修改`state`会导致什么问题？ 1. **不触发更新**：如果直接修改状态的值，`React`无法检测到状态的变化，因此不会触发组件的重新渲染(`rerender`)。结果是组件的输出不会更新，导致显示的内容不符合预期。 2. **性能问题**：`React`通过比较前后状态的差异来判断是否需要重新渲染组件。当直接修改状态值时，`React`无法确定状态是否发生了变化，因此可能会导致频繁的重新渲染，降低性能。 3. **可追踪性问题**：`React`通过`setState()`方法记录状态的变化历史，这样可以追踪状态的修改，帮助进行调试和排查问题。直接修改状态会失去这种历史记录，使得错误的定位和修复更加困难。 2. `set`是异步的，我们要获取改变之后的`state`，`class组件`需要通过向`setState()`传入`callback`去获取，`callback`会在`rerender`之后触发,而`Function组件`需要借助`useEffect()`的帮助 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fc243ade323e4a2ba023010e58a21445~tplv-k3u1fbpfcp-watermark.image?) 3. `set`时如果传入的是一个值，不是函数，操作会被合并 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8c6e71bc5da2421992a8881e277b6336~tplv-k3u1fbpfcp-watermark.image?) 如图，每次执行`addCount`时，都执行5次`set`,分别点击一次add按钮，结果如下： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/15e974c659c44e148a0f01b393ce7068~tplv-k3u1fbpfcp-watermark.image?) 可以明显看到，`class组件`的回调函数被执行了5次，因为每个回调函数的内存地址都不一样 4. `set`时如果传入的是一个返回值的函数并且使用该函数提供的`prevState`操作不会被合并 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e8cfa290545647ccaf25cd49d96000dd~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/634853a2761d4f3392753f2f743b14e8~tplv-k3u1fbpfcp-watermark.image?) ***为什么？*** 使用函数，会将函数传入异步队列，利用`eventLoop`的机制顺序执行这些函数 5. 如果一个变量不用于`JSX`片段请不要使用`state`来管理它 #### react 18中的setState的变化 React <= ***17***时的 setState * React组件事件：异步更新 + 合并 state * DOM事件，setTimeout：同步更新，不合并state React 18 时的 setState * React组件事件：异步更新 + 合并state * DOM事件，`setTimeout`：异步更新 + 合并state * `Automatic Batching` 自动批处理总结 * react <=17: 只有***react组件***事件才批处理 * react18：所有事件都自动批处理 * react18：操作一致，更加简单，降低心智负担 ### props 完成父子通信 * 组件是可嵌套的，有层级关系 * 父组件可以给子组件传递数据 * 子组件接收数据，并显示数据父组件： ```js import React, { useState } from 'react' import type { FC } from 'react' import FunctionComponentDemo from './FunctionComponentDemo' import ClassComponentDemo from './ClassComponentDemo' import styles from './index.module.scss' import classnames from 'classnames' const BaseUseDemo: FC = () => { const [count, setCount] = useState(0) const [isRedBordedr, setIsRedBordedr] = useState(false) const [isYellowBackground, setIsYellowBackground] = useState(false) const [isBlueColor, setIsBlueColor] = useState(false) const dynamicClassName = classnames({ [styles['container']]: true, [styles['red-border']]: isRedBordedr, [styles['yellow-background']]: isYellowBackground, [styles['blue-color']]: isBlueColor, }) const toggleBorderStyle = () => { setIsRedBordedr(!isRedBordedr) setIsYellowBackground(!isYellowBackground) setIsBlueColor(!isBlueColor) } const countAdd = () => { setCount(count + 1) } // 1. 传递普通数据，不会rerender let message = '0' const sendMessage = () => { message = Math.random() * 998 + '' } // 传递state数据，可以触发rerender // const [message, setMessage] = useState('0') // const sendMessage = () => { // setMessage(Math.random() * 998 + '') // } // 2. 传递组件给子组件渲染 const comp = (

我是父组件排下来巡查的

) // 3. 传递普通函数给子组件执行 const [classCompMsg, setClassCompMsg] = useState('无msg') const [funcCompMsg, setFuncCompMsg] = useState('无msg') // 传递函数给子组件，接收子组件传递的函数 let addFuncCompCount: () => void const getFuncCompAddCount = (callback: () => void) => { addFuncCompCount = callback } let addClassCompCount: () => void const getClassCompAddCount = (callback: () => void) => { addClassCompCount = callback } return (

function 组件

class组件消息:{classCompMsg}

function组件消息:{funcCompMsg}

count: {count}

{/* */}

class 组件

) } export default BaseUseDemo ``` Class子组件： ```js import React, { Component, ReactNode } from 'react' type StateType = { count: number } type PropsType = { msg: string addParentCount: () => void setParentMsg: (msg: string) => void comp: JSX.Element transCallback: (callback: () => void) => void } class ClassComponentDemo extends Component { constructor(props: PropsType) { super(props) this.state = { count: 0, } console.log('111') // bind(this) this.addCount = this.addCount.bind(this) // 传递方法给父组件 props.transCallback(this.addCount) } render(): ReactNode { // 插值表达式 return ( <>

{this.state.count}

{/* 使用父组件传递的数据 */}

parentMsg:{this.props.msg}

{/* 调用父组件传递的方法 */} {/* 传递数据给父组件 */} {/* 渲染父组件传递的组件 */} <>渲染父组件传递的组件：{this.props.comp}

) } addCount() { console.info(this) // 如果没有 bind（this）指向undefined 后续会报错找不到state this.setState( prevState => ({ count: prevState.count + 1 }), () => { console.log(this.state.count) // 最新的state } ) console.info(this.state.count) // 这里的state永远是setState之前的state } componentDidUpdate( prevProps: Readonly, prevState: Readonly, snapshot?: any ): void { // 更新后传递方法给父组件 this.props.transCallback(this.addCount) } } export default ClassComponentDemo ``` 函数子组件： ```js import React, { useState, useEffect } from 'react' import type { FC } from 'react' type PropsType = { msg: string addParentCount: () => void setParentMsg: (msg: string) => void comp: JSX.Element transCallback: (callback: () => void) => void } const FunctionComponentDemo: FC = props => { const [count, setCount] = useState(0) useEffect(() => { console.log(count) // 获取最新的count }, [count]) const addCount = () => { setCount(prevCount => prevCount + 1) } // 传递方法给父组件 props.transCallback(addCount) // 插值表达式 return ( <>

{count}

{/* 使用父组件传递的数据 */}

parentMsg:{props.msg}

{/* 调用父组件传递的方法 */} {/* 传递数据给父组件 */} {/* 渲染父组件传递的组件 */} <>渲染父组件传递的组件：{props.comp}

) } export default FunctionComponentDemo ``` `props`的3种应用： 1. 传递数据 1-1. 传递普通数据，数据变化时，不会引起子组件`rerender` ![无标题视频——使用Clipchamp制作.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/526b6c5daff2474a910fe1dc769cb240~tplv-k3u1fbpfcp-watermark.image?) ```js // 1. 传递普通数据，不会rerender let message = '0' const sendMessage = () => { message = Math.random() * 998 + '' } ``` 1-2. 传递状态，状态变化时，引起子组件`rerender` ![无标题视频——使用Clipchamp制作.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/326cfe185f2c4fc7998c5b9e2b7c955f~tplv-k3u1fbpfcp-watermark.image?) ```js // 传递state数据，可以触发rerender const [message, setMessage] = useState('0') const sendMessage = () => { setMessage(Math.random() * 998 + '') } ``` 2. 传递组件给子组件，子组件渲染该组件 2-1. 自定义属性传递，组件内通过该属性获取而后渲染 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/68d4336ccf0f4754ba96c2a486cfcd61~tplv-k3u1fbpfcp-watermark.image?) ```js // 2. 传递组件给子组件渲染 const comp = (

我是父组件排下来巡查的

) // 子组件 <>渲染父组件传递的组件：{this.props.comp} ``` 2-2. 也可以直接插入，组件内部通过`props.children`获取而后渲染 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/41ebd7f209d74cde82d94ce42a328e64~tplv-k3u1fbpfcp-watermark.image?) ```js

123123

type PropsType = { msg: string addParentCount: () => void setParentMsg: (msg: string) => void comp: JSX.Element transCallback: (callback: () => void) => void children: JSX.Element } const FunctionComponentDemo: FC = props => { return(

{/* 渲染父组件传递的组件 */} <>渲染父组件传递的组件：{props.comp} <>{props.children}

) } ``` 3. 传递函数给子组件 3-1. 传递父组件的方法给子组件使用 ![无标题视频——使用Clipchamp制作.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/29e89f00272b488fa53df94f173e040c~tplv-k3u1fbpfcp-watermark.image?) ![无标题视频——使用Clipchamp制作.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2fe7f3bcde92458c886ba4124a71800b~tplv-k3u1fbpfcp-watermark.image?) ```js const [count, setCount] = useState(0) const countAdd = () => { setCount(count + 1) } // 3. 传递普通函数给子组件执行 const [classCompMsg, setClassCompMsg] = useState('无msg') const [funcCompMsg, setFuncCompMsg] = useState('无msg') ``` 3-2. 传递函数给子组件，子组件调用该函数，传递自身的方法给父组件使用, 同理，也能传数据给父组件 ![无标题视频——使用Clipchamp制作.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0757964530e34736b88520ae0802e676~tplv-k3u1fbpfcp-watermark.image?) ```js // 传递函数给子组件，接收子组件传递的函数 let addFuncCompCount: () => void const getFuncCompAddCount = (callback: () => void) => { addFuncCompCount = callback } let addClassCompCount: () => void const getClassCompAddCount = (callback: () => void) => { addClassCompCount = callback } ``` > class组件：首次执行时在`construct`内传递方法给父组件，更新时还需要在`componentDidUpdate`传递方法给父组件 > 建议：如果传递值非常多，可以使用解构的方式，使代码更简洁 ### 组件生命周期在`React`中，组件具有一组生命周期方法，它们在组件的不同阶段会被自动调用。下面分别论述`Class组件`及`Function组件`的生命周期方法和它们的执行顺序 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ea4b398cba0549ecb245ee324ed73069~tplv-k3u1fbpfcp-watermark.image?) #### class组件生命周期 1. **挂载阶段（Mounting Phase）**：组件被实例化并插入到DOM中。 - `constructor(props)` 在组件被创建时调用，用于初始化组件的状态（`state`）和绑定事件处理方法。 - `render()` 必需方法，在该方法中返回`JSX`片段。 - `componentDidMount()` 在组件首次渲染之后调用，可以执行一些副作用操作，如访问`DOM`、发送网络请求等。 2. **更新阶段（Updating Phase）**：组件的`props`或`state`发生变化，导致组件重新渲染或更新。 - `shouldComponentUpdate(nextProps, nextState)` 在组件更新之前调用，用于决定是否需要进行重渲染，默认情况下总是返回`true`。 - `render()` - `componentDidUpdate(prevProps, prevState, snapshot)` 在组件更新之后调用，可以执行一些副作用操作。 3. **卸载阶段（Unmounting Phase）**：组件从DOM中被移除。 - `componentWillUnmount()` 在组件被卸载和销毁之前调用，可以进行一些清理操作，如取消订阅、清除计时器等。 4. **错误处理阶段（Error Handling Phase）**：组件在渲染期间、生命周期方法中发生错误。 - `componentDidCatch(error, info)` 捕获在后代组件中生成的异常。未处理的异常将导致整个组件树卸载。 #### 函数组件'生命周期' 严格意义来说，函数组件本身就只是个`纯函数`没有生命周期，但我们可以借助`useEffect` ***useEffect:*** ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ea1a532db33a401898c4a1156c4ed687~tplv-k3u1fbpfcp-watermark.image?) 参数1-effect：`useEffect`钩子触发时的执行函数，该函数可以返回一个函数，如果返回函数，则该返回函数会在组件时调用（模拟`componentWillUnmount`）参数2-deps: 依赖项(非必传) 1. 当该参数为`[]`(空数组)时，模拟`componentDidMount`，在组件挂载完成时执行参数1 2. 当该参数为有依赖项的数组时，模拟`componentDidMount`，在组件挂载完成时及数组内的依赖项发生变化时（模拟特定于这些依赖项的`componentDidUpdate`）执行参数1 3. 当该参数未传为`undefined`、`null`时，模拟`componentDidMount`，模拟`componentDidUpdate`，组件挂载完成时及任何状态发生改变的时候都会执行参数1 那么哪些东西可以作为依赖项呢？ 1. 当前组件的`state` 2. `props`, 前提得是父组件传递过来的`state`, 具体例子可以看上面父组件通过`props`传递普通数据和状态的区别，普通数据不能作为依赖项，它不会引起`rerender` 3. 在组件中声明的会因为重新渲染而改变的变量都可以作为依赖项，可以视为具有了状态例子1：i变化的时候并不会执行`effect`函数，因为i改变，不会引起重新渲染，不能作为依赖项，不会产生副作用，所以不会执行 ```js let i = 0 useEffect(() => { console.log(i) }, [i]) setInterval(() => { i++ }, 1000) ``` 例子2：`url`的`query`可以作为`依赖项`, 因为`query`改变能够引起`rerender` ```js let query = window.location.search useEffect(() => { console.log('qeury:', query) }, [query]) setInterval(() => { query += '1' // query能否成为依赖项取决于下面这行代码能否启用！ // window.location.search = query }, 1000) ``` ![无标题视频——使用Clipchamp制作.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/82c84d004cca4e0489ff0efd29fe0140~tplv-k3u1fbpfcp-watermark.image?) > 重点：能够引起***重新渲染***的变量才能作为***依赖项***，`state`也是因为这个原因 tip：如果写的过程中，不清楚能否作为依赖项，那就去尝试改变这个变量是否能引起重新渲染，能够引起那就可以 ### 如何获取组件实例、DOM元素？ —— ref 在`React`中，通过使用 `ref` 来获取组件实例。 `ref` 是一个可以引用`React组件`、`DOM元素`或其他对象的特殊属性。 * `ref`用于操作`DOM`,而不触发`rerender`，避免性能的浪费 * 也可传入普通`JS`变量，但更新不会触发`rerender` * `class组件`使用`createRef()` * `函数组件`使用`useRef()`钩子 #### class组件 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2dc8973306614219b2c5ea010f0e37fe~tplv-k3u1fbpfcp-watermark.image?) ```js import React, { Component, createRef } from 'react' import type { ReactNode, RefObject } from 'react' class ClassComponentDemo extends Component { private btnRef: RefObject = createRef() render(): ReactNode { console.info('render') // 插值表达式 return ( <> ) } componentDidMount(): void { console.info('componentDidMount') console.dir(this.btnRef.current) } } export default ClassComponentDemo ``` >小技巧：可以使用`console.dir`代替`console.log`，`console.info`,打印`DOM`更友好 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7242f993fa9b44dabd93aab32e14ae48~tplv-k3u1fbpfcp-watermark.image?) #### 函数组件 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/61cf0cbedb744671aeeb4dbd651f7965~tplv-k3u1fbpfcp-watermark.image?) ```js import React, { useEffect, useRef, useState } from 'react' import type { FC } from 'react' import ClassComponentDemo from './ClassComponentDemo' const BaseUseDemo: FC = () => { const ClassComponentDemoRef = useRef(null) useEffect(() => { console.dir(ClassComponentDemoRef.current) }, [ClassComponentDemoRef]) return () } export default BaseUseDemo ``` #### 使用useRef解决闭包陷阱 * 当异步函数获取`state`时，可能不是当前最新的`state` * 可使用`useRef`来解决当只使用`useState`时： ![无标题视频——使用Clipchamp制作.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ce6dabbf764a4d8f9a037d82c1983465~tplv-k3u1fbpfcp-watermark.image?) 使用`useRef`后： ![无标题视频——使用Clipchamp制作.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c6bfb93a60d54d11924da2daeeb0d1a3~tplv-k3u1fbpfcp-watermark.image?) ```js import React, { useEffect, useState, useRef, FC } from 'react' const Demo: FC = () => { const [count, setCount] = useState(0) const countRef = useRef(0) useEffect(() => { countRef.current = count }, [count]) const add = () => { setCount(prev => prev + 1) } const alertFn = () => { setTimeout(() => { // alert(count) alert(countRef.current) }, 3000) } return ( <>

闭包陷阱

{count} ) } export default Demo ``` ***思考***：为什么会产生这样的问题？ * 使用`useState`这个函数时，会生成`getter`，`setter`，返回一个函数，与一个状态，而这个函数与状态都是被保存在useState这个***闭包函数***里，不受外界干扰，`alert(count)`时的count来源于当时执行rerender时调用的函数组件本身，而这个组件函数里面又调用了`useState`获取到了当时的count。 * 所以当我们点击 `alert`时`useState`吐出的count是多少，`alert(count)`几秒后弹出的也是多少，count指向点击时保存它的那个***useState***函数作用域内。 * 使用`useRef`能够获取到最新的值是因为useRef并不是一个***闭包函数***，无论组件函数被重新rerender重新执行多少次，都没有生成新的作用域，始终都指向同一个作用域。 ### 表单 `React`中处理表单有两种两种不同方式***受控组件***和***非受控组件*** * ***受控组件***：在受控组件中，组件的状态（例如输入框的值）由 `React组件`的`state`管理。当用户输入数据时，`React组件`会更新`state`，并通过属性将新的值传递给输入框。这样，`state`始终由 `React`控制。 * ***非受控组件***：在非受控组件中，组件的状态并不由`React组件`管理。相反，`DOM`元素本身维护其自己的状态。通常，我们会使用 `ref` 来获取`DOM`元素的值。再次重申：`label`的`for`要写为***htmlFor*** ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4de9cd62e2974df69722128d359dfba8~tplv-k3u1fbpfcp-watermark.image?) #### 受控组件 ***受控组件***将表单元素交由`react`进行状态控制，通过`value`绑定状态，当发生交互事件时，更新状态，因此它是`value` + 事件处理，与`vue`的自定义`v-model`原理相似 class组件 ```js import React, { Component } from 'react' import type { ReactNode, ChangeEventHandler } from 'react' import { produce } from 'immer' type StateType = { inputVal: string textareaVal: string selecteadList: Array gender: string lang: string } class ClassComponentDemo extends Component { constructor(props: unknown) { super(props) this.state = { inputVal: '', textareaVal: '', selecteadList: [], gender: 'male', lang: '', } } render(): ReactNode { return ( ) } private inputValChange: ChangeEventHandler = e => { console.log(e.target.value) this.setState( produce(draft => { draft.inputVal = e.target.value }) ) } private textareaValChange: ChangeEventHandler = e => { console.log(e.target.value) this.setState( produce(draft => { draft.textareaVal = e.target.value }) ) } private multipleChoiceChange: ChangeEventHandler = e => { console.log(e.target.value) this.setState( produce(draft => { if (!this.state.selecteadList.includes(e.target.value)) { draft.selecteadList.push(e.target.value) } else { draft.selecteadList = this.state.selecteadList.filter(c => c !== e.target.value) } }), () => { console.log(this.state.selecteadList) } ) } private singleChoiceChange: ChangeEventHandler = e => { console.log(e.target.value) this.setState( produce(draft => { draft.gender = e.target.value }) ) } private selectorChange: ChangeEventHandler = e => { console.log(e.target.value) this.setState( produce(draft => { draft.lang = e.target.value }) ) } } export default ClassComponentDemo ``` 函数组件： ```js import React, { useState } from 'react' import type { FC, ChangeEventHandler } from 'react' import { produce } from 'immer' type StateType = { inputVal: string textareaVal: string selecteadList: Array gender: string lang: string } const FunctionComponentDemo: FC = () => { const [state, setState] = useState({ inputVal: '', textareaVal: '', selecteadList: [], gender: 'male', lang: '', }) const inputValChange: ChangeEventHandler = e => { console.log(e.target.value) setState( produce(draft => { draft.inputVal = e.target.value }) ) } const textareaValChange: ChangeEventHandler = e => { console.log(e.target.value) setState( produce(draft => { draft.textareaVal = e.target.value }) ) } const multipleChoiceChange: ChangeEventHandler = e => { console.log(e.target.value) setState( produce(draft => { if (!state.selecteadList.includes(e.target.value)) { draft.selecteadList.push(e.target.value) } else { draft.selecteadList = state.selecteadList.filter(c => c !== e.target.value) } }) ) } const singleChoiceChange: ChangeEventHandler = e => { console.log(e.target.value) setState( produce(draft => { draft.gender = e.target.value }) ) } const selectorChange: ChangeEventHandler = e => { console.log(e.target.value) setState( produce(draft => { draft.lang = e.target.value }) ) } // 插值表达式 return ( ) } export default FunctionComponentDemo ``` #### 非受控组件 ***非受控组件*** 讲究的是不由`react`进行状态控制，原生的`DOM`已经自己记录下了表单元素的状态，我们通过传统的操作`DOM`去解决问题就好，不涉及事件，不涉及`value`，仅需要默认赋值，因此使用`defaultValue`、`defaultChecked` * 输入元素使用`defaultValue`进行默认赋值 * 选择元素使用`defaultChecked`进行默认勾选 class组件： ```js import React, { Component, createRef } from 'react' import type { ReactNode, RefObject } from 'react' class ClassComponentDemo extends Component { private inputRef: RefObject = createRef() private textareaRef: RefObject = createRef() private mutilpleRef: RefObject = createRef() private radioRef: RefObject = createRef() private selectRef: RefObject = createRef() render(): ReactNode { return ( ) } private handleSubmit = () => { const submitObj: Record = {} if (this.mutilpleRef.current) { submitObj.selecteadList = Array.from(this.mutilpleRef.current.children) .filter((el: any) => { if (el.tagName !== 'INPUT') return false if (el.checked) return true return false }) .map((el: any) => el.value) } if (this.radioRef.current) { const choice: any = Array.from(this.radioRef.current.children).find((el: any) => { if (el.tagName === 'INPUT' && el.checked === true) return el }) if (choice) submitObj.gender = choice.value } submitObj.inputVal = this.inputRef.current?.value submitObj.textareaVal = this.textareaRef.current?.value submitObj.lang = this.selectRef.current?.value console.dir(submitObj) } } export default ClassComponentDemo ``` 函数组件： ```js import React, { useRef } from 'react' import type { FC, RefObject } from 'react' const FunctionComponentDemo: FC = () => { const inputRef: RefObject = useRef(null) const textareaRef: RefObject = useRef(null) const mutilpleRef: RefObject = useRef(null) const radioRef: RefObject = useRef(null) const selectRef: RefObject = useRef(null) const handleSubmit = () => { const submitObj: Record = {} if (mutilpleRef.current) { submitObj.selecteadList = Array.from(mutilpleRef.current.children) .filter((el: any) => { if (el.tagName !== 'INPUT') return false if (el.checked) return true return false }) .map((el: any) => el.value) } if (radioRef.current) { const choice: any = Array.from(radioRef.current.children).find((el: any) => { if (el.tagName === 'INPUT' && el.checked === true) return el }) if (choice) submitObj.gender = choice.value } submitObj.inputVal = inputRef.current?.value submitObj.textareaVal = textareaRef.current?.value submitObj.lang = selectRef.current?.value console.dir(submitObj) } // 插值表达式 return ( ) } export default FunctionComponentDemo ``` #### 小结分别使用***受控组件***和***非受控组件***以`class组件`、`function组件`的方式实现了同一个表单，相互对比下，可以看出来***非受控组件***的代码更简洁，代码量几乎只有***受控组件***的60%左右，实现上也显得不是那么的`react` ***非受控组件***可以解决一些***受控组件***无法解决的场景，比如：一些必须手动操作`DOM`场景，文件选择，所以真实开发中是会出现混合使用的情况的 * 工作中优先使用***受控组件***，更符合`react`设计原则 * 必须操作`DOM`时再使用***非受控组件*** ## 样式方案 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e89556af9e7642ca83df69f39b8f78bb~tplv-k3u1fbpfcp-watermark.image?) ### 元素内联 * 和HTML元素的style类似 * 但必须是JS对象的写法，不能是字符串 * 样式名要用驼峰式写法，如`fontSize` * 尽量不要用内联style，代码多，性能差，扩展性不好举例： ```js

``` ### 普通引入方案 index.tsx: ```jsx import React from 'react' import type { FC } from 'react' import FunctionComponentDemo from './FunctionComponentDemo' import ClassComponentDemo from './ClassComponentDemo' import './index.scss' const BaseUseDemo: FC = () => { return (

function 组件

class 组件

) } export default BaseUseDemo ``` index.scss ```scss .container { display: flex; box-sizing: border-box; border: 1px solid #eee; height: 100%; .item { width: 50%; padding: 8px; box-sizing: border-box; border: 1px solid #eee; } } .red-border { border-color: red; } ``` #### 萌新常见错误下面这种写法看似正确，实则无法改变样式，为什么？因为虽然改变了`dynamicClassName`这个变量，但它本身并不具备响应式，不会产生任何副作用，`react`不知道需要重新渲染，所以不生效： ```js import React from 'react' import type { FC } from 'react' import FunctionComponentDemo from './FunctionComponentDemo' import ClassComponentDemo from './ClassComponentDemo' import './index.scss' const BaseUseDemo: FC = () => { let dynamicClassName = 'container' const toggleBorderStyle = () => { if (dynamicClassName === 'container') { dynamicClassName = 'container red-border' } else { dynamicClassName = 'container' } } return (

function 组件

class 组件

) } export default BaseUseDemo ``` 我们需要借助响应式状态改变，触发`rerender`： ```js import React, { useState } from 'react' import type { FC } from 'react' import FunctionComponentDemo from './FunctionComponentDemo' import ClassComponentDemo from './ClassComponentDemo' import './index.scss' const BaseUseDemo: FC = () => { const [dynamicClassName, setDaynamicClassName] = useState('container') const toggleBorderStyle = () => { if (dynamicClassName === 'container') { setDaynamicClassName('container red-border') } else { setDaynamicClassName('container') } } return (

function 组件

class 组件

) } export default BaseUseDemo ``` > 缺点: 现在只是涉及到2个class进行组合，还可以很好y应对动态拼接，如果需要对多个class进行同时控制呢？ #### 实现多class组合的2个lib 1. [classnames](https://www.npmjs.com/package/classnames) 安装：`npm install classnames` ![无标题视频——使用Clipchamp制作.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/86136249aea6433a8a84e1769f7279fd~tplv-k3u1fbpfcp-watermark.image?) 函数组件使用： ```js import React, { useState } from 'react' import type { FC } from 'react' import FunctionComponentDemo from './FunctionComponentDemo' import ClassComponentDemo from './ClassComponentDemo' import './index.scss' import classnames from 'classnames' const BaseUseDemo: FC = () => { const [isRedBordedr, setIsRedBordedr] = useState(false) const [isYellowBackground, setIsYellowBackground] = useState(false) const [isBlueColor, setIsBlueColor] = useState(false) const dynamicClassName = classnames('container', { 'red-border': isRedBordedr, 'yellow-background': isYellowBackground, 'blue-color': isBlueColor, }) const toggleBorderStyle = () => { setIsRedBordedr(!isRedBordedr) setIsYellowBackground(!isYellowBackground) setIsBlueColor(!isBlueColor) } return (

function 组件

class 组件

) } export default BaseUseDemo ``` class组件使用： ```js import React, { Component } from 'react' import classnames from 'classnames' import { produce } from 'immer' import styles from './index.scss' type PropsType = unknown type StateType = { dynamicClassName: string } class FormUseDemo extends Component { private isRedBordedr = false private isYellowBackground = false private isBlueColor = false constructor(props: unknown) { super(props) this.state = { dynamicClassName: classnames({ [styles['container']]: true, [styles['red-border']]: this.isRedBordedr, [styles['yellow-background']]: this.isYellowBackground, [styles['blue-color']]: this.isBlueColor, }), } } render(): React.ReactNode { return (

function 组件 —— 受控表单

父组件

class 组件 —— 受控表单

) } private toggleBorderStyle = () => { this.isRedBordedr = !this.isRedBordedr this.isYellowBackground = !this.isYellowBackground this.isBlueColor = !this.isBlueColor this.setState( produce(draft => { draft.dynamicClassName = classnames({ [styles['container']]: true, [styles['red-border']]: this.isRedBordedr, [styles['yellow-background']]: this.isYellowBackground, [styles['blue-color']]: this.isBlueColor, }) }) ) } } export default FormUseDemo ``` 2. [clsx](https://www.npmjs.com/package/clsx) 安装：`npm install clsx` 使用方式与`classnames`非常接近 ### 使用CSS-Module方案普通引入样式的问题 * `React`使用组件化开发 * 多个组件，就需要多个样式文件 * 多个样式文件很容易造成`className`重复，不好管理所以我们需要`CSS-Module` `CSS-Module`规则 * 每个`CSS`文件都当作单独的模块，命名`xxx.module.css` * 为每个`className`增加后缀名，不让它们重复，发挥一种类似于`vue`的`scoped`的作用 * `Create-React-App`原生支持`CSS-Module` 不同的引入方式，现在我们的css直接被处理成了一个模块，引入的是一个`Object`，因此使用时是取该对象的属性值： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4af7da2c39d24852a35f8fc049b620ce~tplv-k3u1fbpfcp-watermark.image?) 普通引入样式文件生成的DOM： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4b35f255e283498796fb0a30d8af61d4~tplv-k3u1fbpfcp-watermark.image?) 使用`CSS-Module`方案生成的DOM： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9ae3d73c9868450c9b2d2a776b1d1802~tplv-k3u1fbpfcp-watermark.image?) 使用： ```js // import styles from './index.scss' // 仅需修改为XXX.module.scss即可 import styles from './index.module.scss' ``` ### CSS in JS方案 - 一种解决方案，有好几个工具 - 在`JS`中写`CSS`，带来极大的灵活性 - 它和内联`style`完全不一样，也不会有内联`style`的问题 #### styled-components工具安装：`npm install --save styled-components` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e8fc3d9e466249b1927c9abc8e871ca4~tplv-k3u1fbpfcp-watermark.image?) ```js import React, { FC } from 'react' import styled, { css } from 'styled-components' type ButtonPropsType = { primary?: boolean } const Layout = styled.div` display: flex; height: 100%; width: 100%; flex-direction: column; justify-content: center; align-items: center; ` // 注意：首字母大写，因为我们写的是一个组件 const Button = styled.button` background: transparent; border-radius: 3px; border: 2px solid palevioletred; color: palevioletred; margin: 0 1em; padding: 0.25em 1em; ${(props: ButtonPropsType) => props.primary && css` background: palevioletred; color: white; `} ` const Container = styled.div` margin-top: 50px; position: relative; width: 220px; height: 300px; display: flex; justify-content: center; align-items: center; transition: 0.5s; z-index: 1; ::before { content: ' '; position: absolute; top: 0; left: 50px; width: 50%; height: 100%; text-decoration: none; background: #fff; border-radius: 8px; transform: skewX(15deg); transition: 0.5s; } ::after { content: ''; position: absolute; top: 0; left: 50; width: 50%; height: 100%; background: #fff; border-radius: 8px; transform: skewX(15deg); transition: 0.5s; filter: blur(30px); } &:hover:before, &:hover::after { transform: skewX(0deg) scaleX(1.3); } &:before, &:after { background: linear-gradient(315deg, #ffbc00, #ff0058); } span { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; pointer-events: none; } span::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); opacity: 0; transition: 0.1s; animation: animate 2s ease-in-out infinite; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); } span::before { top: -40px; left: 40px; width: 50px; height: 50px; opacity: 1; } span::after { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; border-radius: 8px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); opacity: 0; transition: 0.5s; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); animation-delay: -1s; } span:after { bottom: -40px; right: 40px; width: 50px; height: 50px; opacity: 1; } ` const Content = styled.div` position: relative; width: 190px; height: 254px; padding: 20px 40px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); border-radius: 8px; z-index: 1; transform: 0.5s; color: #fff; display: flex; justify-content: center; align-items: center; h2 { font-size: 20px; color: #fff; margin-bottom: 10px; } ` const Demo: FC = () => { return (

hover ！

) } export default Demo ``` #### Styled-jsx 工具 `ts`环境下，使用起来很麻烦，略过 #### Emotion 工具 `ts`环境下，使用起来很麻烦，略过 ### 3种方案小结 1. 普通引入CSS：无法有效解决css命名冲突的问题，这就是层叠样式，与框架无关 2. CSS-Module: `CSS-Module`是一种利用构建工具（如`webpack`）在编译阶段将CSS样式文件模块化的方法。它使用了类似于局部作用域的方式，确保每个组件的样式在运行时是唯一且隔离的。在使用`CSS-Module`时，每个CSS文件被视为独立的模块，样式文件中定义的类名被自动重命名为一个独特的类名，并使用该类名来应用样式。这样可以避免全局样式冲突，并提高代码的可维护性。 3. CSS in JS: `CSS in JS`是一种将CSS样式直接写在`JavaScript`代码中的方法。它允许在`JavaScript`代码中直接定义样式对象，并通过将这些样式对象绑定到组件的`props`或`类名`来应用样式。`CSS in JS`在运行时动态生成和应用样式，使得样式的定义和组件的逻辑更加紧密，并能够更灵活地根据组件的状态或属性来动态调整样式。区别： - 语法：`CSS-Module`使用普通的CSS语法，而`CSS in JS`使用`JavaScript`对象的语法。 - 构建：`CSS-Module`需要依靠构建工具（如`webpack`）在编译阶段将CSS样式文件进行处理，而`CSS in JS`是在运行时动态生成和应用样式。 - 唯一性：`CSS-Module`通过自动重命名类名确保样式的唯一性，而`CSS in JS`则通过样式对象的引用来确保样式的唯一性。 - 运行环境：`CSS-Module`可以运行在任何支持`CSS`的环境中，而`CSS in JS`则依赖于`JavaScript`运行环境。 # 高级特性 ## Portals * 组件默认会按照既定层次嵌套渲染 * 如何让组件渲染到父组件以外？使用场景：创建诸如模态框、弹出菜单、通知提示等需要在`DOM`层次结构之外渲染的UI组件非常有用。 ![无标题视频——使用Clipchamp制作.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/360e9e0bb18445a7810b04009e30e4d2~tplv-k3u1fbpfcp-watermark.image?) 渲染到`root`上并保证原有功能: ```js import React, { Component } from 'react' import ReactDOM from 'react-dom' import type { ReactNode } from 'react' import classnames from 'classnames' import { produce } from 'immer' import styles from './index.module.scss' import ClassControlledComponentDemo from './ClassControlledComponentDemo' import FunctionControlledComponentDemo from './FunctionControlledComponentDemo' import ClassUnControlledComponentDemo from './ClassUnControlledComponentDemo' import FunctionUnControlledCOmponentDemo from './FunctionUnControlledComponentDemo' type StateType = { dynamicClassName: string } class FormUseDemo extends Component { private isRedBordedr = false private isYellowBackground = false private isBlueColor = false private tempComponent = () => { return ReactDOM.createPortal(

父组件

, document.getElementById('root') as HTMLDivElement ) } constructor(props: unknown) { super(props) this.state = { dynamicClassName: classnames({ [styles['container']]: true, [styles['red-border']]: this.isRedBordedr, [styles['yellow-background']]: this.isYellowBackground, [styles['blue-color']]: this.isBlueColor, }), } } render(): ReactNode { return (

function 组件 —— 受控表单

function 组件 —— 非受控表单

{/* 这一部分抽成了一个组件，挂载到了root上 */}

class 组件 —— 受控表单

class 组件 —— 非受控表单

, document.getElementById('root') as Element ) } return (

{props.children}

) } export default LanguageProvide ``` `LanguageProvide`的下游组件可以消费`LanguageProvide`提供的数据： ```js import React from 'react' import type { FC } from 'react' import styles from './index.module.scss' import OneLevelComponent from './OneLevelComponent' import LanguageProvide from './LanguageProvide' const BaseUseDemo: FC = () => { return (

) } export default BaseUseDemo ``` class组件仅可以通过`Consumer`组件消费： ```js import React, { Component } from 'react' import { LanguageContext } from './LanguageProvide' import styles from './index.module.scss' class FourLevelComponent extends Component { render(): React.ReactNode { return ( {lang =>

{lang.four}

} ) } } export default FourLevelComponent ``` 函数组件可以使用`Consumer`组件消费： ```js import React from 'react' import type { FC } from 'react' import { LanguageContext } from './LanguageProvide' import styles from './index.module.scss' import FourLevelComponent from './FourLevelComponent' const ThreeLevelComponent: FC = () => { return ( {lang => (

{lang.three}

)} ) } export default ThreeLevelComponent ``` 函数组件也可以使用`useContext`钩子消费： ```js import React, { useContext } from 'react' import type { FC } from 'react' import styles from './index.module.scss' import TwoLevelComponent from './TwoLevelComponent' import { LanguageContext } from './LanguageProvide' const OneLevelComponent: FC = () => { const lang = useContext(LanguageContext) return (

{lang.one}

) } export default OneLevelComponent ``` ## 异步组件 1. **按需加载（Code-Splitting）**：当应用程序变得庞大时，将所有组件都打包在一起可能导致初始加载时间过长。使用`异步组件`，可以在需要时按需加载组件，减小初始加载的文件大小，提升应用程序初次渲染的速度。 2. **减少打包体积**：通过将某些组件延迟加载，可以将与这些组件相关的代码从初始打包中剥离。这样，用户访问应用程序时只加载必要的代码，避免不必要的资源浪费，减小了打包生成的文件体积。 3. **优化用户体验**：通过在需要时异步加载组件，可以提高页面的响应速度。当用户与应用程序交互时，`异步组件`可以在后台加载，确保视觉上的延迟最小化，提升用户体验。 4. **降低页面的加载时间**：通过将页面划分为多个`异步组件`，可以并行下载组件的代码和资源，从而降低整体页面加载时间。这尤其有助于在低带宽或高延迟环境中提供更好的用户体验。 ![无标题视频——使用Clipchamp制作.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/051a5ed1a40e48a1a32d0898571d7ca0~tplv-k3u1fbpfcp-watermark.image?) class组件： ```js import React, { lazy, Suspense } from 'react' import styles from './index.module.scss' class LazyDemo extends React.Component { render() { const AsyncComponent = lazy(() => import('../../form/index')) return (

}> ) } } export default LazyDemo ``` 函数组件： ```js import React, { lazy, Suspense } from 'react' import type { FC } from 'react' import styles from './index.module.scss' const LazyDemo: FC = () => { const AsyncComponent = lazy(() => import('../../form/index')) return (

}> ) } export default LazyDemo ``` ## 代码复用 ### HOC `HOC（Higher-Order Component）`是`React`中的一种高阶组件的模式，它实际上是一个函数，接受一个组件作为参数，并返回一个增强过的新组件。 `HOC`可以在不修改`原始组件`的情况下，通过封装和增强组件的功能来实现代码的重用。它通过将通用的逻辑和功能提取到一个高阶组件中，然后将这些逻辑和功能通过`props`传递给被包装的组件。 `HOC`主要用于以下几个方面： 1. 代码复用：通过将通用的逻辑和功能提取到高阶组件中，可以在多个组件之间共享和重用代码。 2. 渲染劫持：`HOC`可以修改被包装组件的渲染行为，例如添加额外的`DOM元素`、修改`props`或`state`等。 3. 条件渲染：`HOC`可以根据一定的条件来渲染不同的组件。例如，根据用户的登录状态来渲染不同的导航栏。当无权限访问时，显示提示语： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/35719e1d3b2c4cd9b14a562a26713e4d~tplv-k3u1fbpfcp-watermark.image?) 当有权限访问时，正常渲染组件： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0c9a04b967c940398f1ee9daee3fdee8~tplv-k3u1fbpfcp-watermark.image?) class组件： ```js import React, { Component } from 'react' const withAuthorization = (WrappedComponent: any, requiredRole: string): any => { class roleCheck extends Component { // 假设当前的用户有以下角色 private roleList = ['role1', 'role2', 'role3'] // 角色校验是否通过 private isPass = this.roleList.includes(requiredRole) render() { return <>{this.isPass ? :

暂无权限访问

} } } return roleCheck } export default withAuthorization ``` 函数组件： ```js import React from 'react' import type { FC } from 'react' const withAuthorization = (WrappedComponent: any, requiredRole: string) => { const RoleCheck: FC = (props: any) => { const roleList = ['role1', 'role2', 'role3'] // 角色校验是否通过 const isPass = roleList.includes(requiredRole) return <>{isPass ? :

暂无权限访问

} } return RoleCheck } export default withAuthorization ``` 使用： ```js import MouseTracker from './view/advancedUse/render-props/index' import withAuthorization from './view/advancedUse/HOC/index' // 传入需要添加权限校验的组件，必须拥有的角色 const HOC = withAuthorization(MouseTracker, 'role4') // 渲染 ``` 通过使用`HOC`，我们可以在不修改原始组件的情况下，为其添加额外的功能，实现代码的重用和组件的增强。 ### Render Props `Render Props`是一种在`React`中共享代码逻辑的技术。 `Render Props`通过使用一个值为***函数***的`prop`，将一个组件需要的代码逻辑封装到函数中，并将这个函数作为`prop`传递给子组件。 * 父组件负责定义和传递函数作为`prop`，规定如何进行渲染。（发布任务） * 子组件则负责调用这个函数并使用其返回的值, 完成父组件渲染所需要的功能逻辑。（完成任务） ![无标题视频——使用Clipchamp制作.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9944aabbc52747d49ff6f1ec4e006534~tplv-k3u1fbpfcp-watermark.image?) 父组件： ```js import React from 'react' import Mouse from './Mouse' class MouseTracker extends React.Component { render() { return (

移动鼠标

(

鼠标位置: {x}, {y}

)} />

) } } export default MouseTracker ``` 子组件： ```js import React from 'react' import type { MouseEvent } from 'react' type PropsType = { position: (x: number, y: number) => JSX.Element } class Mouse extends React.Component { state = { x: 0, y: 0 } handleMouseMove = (event: MouseEvent) => { this.setState({ x: event.clientX, y: event.clientY }) } render() { return (

{this.props.position(this.state.x, this.state.y)}

) } } export default Mouse ``` ### 自定义Hook * 必须用***useXxx***格式来命名 * 只能在两个地方调用`Hook`：组件内，或其他`Hook`内 * 必须保证每次的调用顺序一致，不能放在`if`、`for`的内部 * 必须放在组件顶层 * 不能再`hook`前面加`return` ```js import { useEffect } from 'react' export default () => { useEffect(() => { document.title = 'React学习' }, []) } ``` ```js import { useCallback, useEffect, useState } from 'react' // 获取鼠标位置 const useMouse = () => { const [x, setX] = useState(0) const [y, setY] = useState(0) const mouseMoveHandler = useCallback((event: MouseEvent) => { setX(event.clientX) setY(event.clientY) }, []) // 引用该hook的组件，执行的useEffect useEffect(() => { // 监听鼠标事件 window.addEventListener('mousemove', mouseMoveHandler) // 组件销毁时，解绑DOM事件 return () => { window.removeEventListener('mousemove', mouseMoveHandler) } }, []) return { x, y } } export default useMouse ``` ```js import { useState, useEffect } from 'react' const getInfo = (): Promise => { return new Promise(resolve => { setTimeout(() => { resolve(Date.now().toString()) }, 1500) }) } const useGetInfo = () => { const [loading, setLoading] = useState(true) const [info, setInfo] = useState('') useEffect(() => { setLoading(true) getInfo() .then(res => { setInfo(res) setLoading(false) }) .catch(() => { setLoading(false) }) }, []) return { info, loading, } } export default useGetInfo ``` # 性能优化 `Vue`是自动挡，`React`是手动挡，除了路由懒加载外我们还需要注意很多渲染和计算的优化点 ## SCU与React.memo 为什么需要`SCU`与`React.memo`? ![无标题视频——使用Clipchamp制作.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ee5c776c52bc419f8dd682b648467a22~tplv-k3u1fbpfcp-watermark.image?) 当父组件`state`改变时，子组件`state`无变化，子组件却发生了渲染，这是无意义的，我们可以优化掉这种没有必要的渲染，因此就有了`SCU`和`React.memo` `React`的更新机制是什么样的？当父组件发生更新，`class组件`会执行自身的`render`,`函数组件`会重新执行该函数，所以会有很多次渲染 ### class组件渲染优化 `SCU`是指`class组件`的生命周期`shouldComponentUpdate`,这是一个接收两个参数`nextProps` 和 `nextState`返回`boolean`的生命周期函数，默认返回`true`，也就是，默认允许更新组件，从而引发了渲染，我们可以通过比对新老`props`、`state`，决定是否更新，避免无意义的渲染 ```js import React from 'react'; class MyComponent extends React.Component { shouldComponentUpdate(nextProps, nextState) { // 比较 props 和 state 是否发生变化 if ( nextProps.name !== this.props.name || nextState.count !== this.state.count ) { return true; // 需要重新渲染 } return false; // 不需要重新渲染 } render() { return

{this.props.name}

; } } ``` 初次之外，`class组件`还可以选择通过继承`PureComponent`避免无效渲染，它会浅比较当前和下一个`props`以及`state`的变化，如果没有变化，则阻止不必要的重新渲染, 并不是所有的组件都适合使用`PureComponent`，特别是在组件内部有复杂的数据结构或属性的组件。 ```js class Component extends React.PureComponent ``` ### 函数组件渲染优化 `函数组件`是没有生命周期的，但我们可以通过`React.memo`来进行优化，`React.memo`的默认比较行为是对每个 `prop`进行浅比较, 只有`prop`第一层级有内存地址变动才会发生更新，第二参数非必传，如有需要，传入一个比较函数，可以自定义如何比较新老`props`从而决定是否'记住'组件，不重新渲染，返回`true`不渲染，返回`false`渲染，这与`SCU`刚好相反在比较函数中，你可以根据具体情况自定义比较逻辑： 1. 深比较（Deep Comparison）：使用某个库（如` Lodash` 的 `isEqual`）或自己实现递归比较，比较所有的 `props`。这样会比较完整，但也可能带来一定的性能开销。 ```js import React from 'react'; import _isEqual from 'lodash/isEqual'; function areEqual(prevProps, nextProps) { return _isEqual(prevProps, nextProps); } const MyComponent = React.memo(Component, areEqual); ``` 2. 浅比较（Shallow Comparison）：只比较一级 `props` 的值，可以使用浅相等操作符（===）进行比较。这种方式快速而简单，但可能会漏掉一些细微的变化。 ```js import React from 'react'; function areEqual(prevProps, nextProps) { return ( prevProps.name === nextProps.name && prevProps.age === nextProps.age // 其他需要比较的 props ); } const MyComponent = React.memo(Component, areEqual); ``` 3. 特定字段比较：只比较某些特定的 `props` 字段。这适用于只关心部分 `props` 字段变化的情况。 ```js import React from 'react'; function areEqual(prevProps, nextProps) { return prevProps.name === nextProps.name; // 只比较 name 字段 } const MyComponent = React.memo(Component, areEqual); ``` 使用第二个参数的比较函数可以根据具体需求，灵活地决定组件是否需要重新渲染，从而提高性能。 ## 使用useCallback和useMemo减少无效定义、无效计算由于`函数组件`触发`rerender`时，会重新执行该函数的原因，进而多了许多没有必要的计算以及内部函数的重复定义 `useCallback`用于优化函数的性能。它可以用来缓存函数的引用，并在***依赖项***不发生变化的情况下，避免函数的重复创建。 ```js import React, { useCallback } from 'react'; function MyComponent() { const handleClick = useCallback(() => { // 处理点击事件的逻辑 }, []); // 依赖项为空数组，这意味着回调函数不依赖任何值 return ( ); } ``` `useMemo`用于优化组件的计算性能。它可以在组件渲染过程中缓存计算结果，避免重复计算，当依赖项不发生变化时，`useMemo`会返回前一次计算的结果。而当***依赖项***发生变化时，`useMemo`会调用计算函数，计算新的结果并返回 1. 针对耗时的计算：如果组件需要进行一些***耗时***的计算操作，且这些计算结果在***依赖项***不发生变化时保持不变，可以使用`useMemo`来缓存这些计算结果。 2. 避免不必要的渲染：如果在父组件进行重渲染时，某些子组件的渲染是不必要的，可以使用`useMemo`来缓存子组件的内容，只有在依赖项发生变化时才更新子组件。 3. 避免重复请求数据：在组件中进行数据请求时，可以使用`useMemo`来缓存请求结果，只有当依赖项发生变化时才重新请求数据。 ```js import React, { useMemo } from 'react'; const Component = ({ data }) => { const average = useMemo(() => { let sum = 0; for (let i = 0; i < data.length; i++) { sum += data[i]; } return sum / data.length; }, [data]); return (

Average: {average}

); }; ``` 与`useMemo`类似的还有`useState`传入函数 * `useState`传入普通变量，每次组件更新都会执行 * `useState`传入函数，只在组件渲染时执行一次，适合数据结构复杂、计算成本高，但依赖项不经常变更的场景 `class组件`可使用类似于`lodash`中的`memoize`函数将不变的属性或计算结果缓存起来，避免重复计算 ## 使用immer或者immutable ***不可变值*** 每一次进行赋值都需要深拷贝，性能很差，使用这两个库，可以基于‘共享数据’进行赋值，不是深拷贝，速度好 ## 优化注意事项 * 不要提前优化 * 不要为了优化而优化 * 在需要优化的时候再进行优化 # 状态管理什么是状态管理？ * 页面足够复杂：组件很多，嵌套层级很深 * 通过`props`层层传递不合适 * 需要状态管理，即集中、统一管理页面数据什么是状态提升？ * 页面拆分组件，组件嵌套 * 数据存储在父组件 * 通过`props`传递给子组件 ## useReducer * `useState`的代替方案,阉割版的`redux` * 数据结构简单时用`useState`，复杂时用`useReducer` * 简化版的`redux` * `函数组件`可以使用`useReducer` * `class组件`无法使用`useReducer`，但是可以模拟实现 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/12beed7888b24806a2e7ebe3190bdec8~tplv-k3u1fbpfcp-watermark.image?) ### 简单使用 ![无标题视频——使用Clipchamp制作.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1b3c3e75f0c34580ae5458f9dce8d737~tplv-k3u1fbpfcp-watermark.image?) ``` js import React, { useReducer } from 'react' import type { FC } from 'react' type StateType = { count: number } type ActionType = { type: string } const initialState: StateType = { count: 100 } /** * @description: 根据传入的 action 返回新的 state （不可变数据） * @param {StateType} state * @param {ActionType} action */ const reducer = (state: StateType, action: ActionType) => { switch (action.type) { case 'increment': return { count: state.count + 1 } case 'decrement': return { count: state.count - 1 } default: throw new Error('请务必传入action type') } } const CountReducer: FC = () => { const [state, dispatch] = useReducer(reducer, initialState) return ( <> count: {state.count} ) } export default CountReducer ``` ### 结合Context跨组件使用reducer ![无标题视频——使用Clipchamp制作.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/41b73a3bbe224bb6aebdd3bda58f37b5~tplv-k3u1fbpfcp-watermark.image?) 现在我们将`state`单独管理，方便接入各层级组件，按以下目录结构定义： ```js - store - reducer 减速器，控制状态改动 - state 状态，也就是数据 - interface ts类型管理 - index store入口，整合资源提供外界访问 ``` store/index.ts： ```js export * from './interface' export * from './reducer' export * from './state' ``` store/interface.ts: ```js import type { Dispatch } from 'react' export type Item = { name: string age: number gender: string } export type StateType = { list: Array } export type ActionType = { type: 'ADD' | 'DELETE' | 'CHANGE' payload: Partial<{ data: Item index: number }> } export type ListContextType = { state: StateType dispatch: Dispatch } ``` store/state.ts: ```js import { StateType } from './interface' export const initialState: StateType = { list: [{ name: 'ljx', age: 28, gender: 'male' }], } ``` 使用`函数组件`或者`class组件`结合上下文，供下游访问 - `函数组件`方式：可以使用`useReducer`钩子快捷沟通`store`： ```js import React, { useReducer, createContext } from 'react' import type { FC } from 'react' import { initialState, reducer } from './store/index' import type { ListContextType } from './store/index' import List from './List' // 创建context，供多组件访问 export const ListContext = createContext({ state: initialState, dispatch: () => { /* 空 */ }, }) const ReducerDemo: FC = () => { const [state, dispatch] = useReducer(reducer, initialState) return ( ) } export default ReducerDemo ``` - `class组件`方式：无法使用钩子，但是我们可以自定义，借此可以理解`useReducer`的原理 ```js import React, { createContext, Component } from 'react' import type { Dispatch } from 'react' import { initialState, reducer } from './store/index' import type { ListContextType, StateType, ActionType } from './store/index' import List from './List' // 创建context，供多组件访问 export const ListContext = createContext({ state: initialState, dispatch: () => { /* 空 */ }, }) class ReducerDemo extends Component { state: StateType = initialState render(): React.ReactNode { return ( ) } dispatch: Dispatch = (action: ActionType) => { const newState = reducer(this.state, action) this.setState(newState) } } export default ReducerDemo ``` 内部访问 - `List组件`用作显示 ```js import React, { useContext } from 'react' import type { FC } from 'react' import { ListContext } from './index' const List: FC = () => { const { state } = useContext(ListContext) return (

{state.list.map(({ name, gender, age }) => (

姓名：{name} 年龄：{age} 性别：{gender}

))}

) } export default List ``` - `ToolBar组件`用作更改操作 ```js import React, { Component } from 'react' import { nanoid } from 'nanoid' import { ListContext } from './index' import type { ListContextType } from './store/index' class ToolBar extends Component { dispatch?: ListContextType['dispatch'] reducerState?: ListContextType['state'] render(): React.ReactNode { return ( {context => { this.dispatch = context.dispatch this.reducerState = context.state return (

) }} ) } handleAdd = () => { if (!this.reducerState || !this.dispatch) return const data = { name: 'dys' + nanoid(2), age: Math.trunc(100 * Math.random()), gender: 'male', } this.dispatch({ type: 'ADD', payload: { data }, }) } handleChange = () => { if (!this.reducerState || !this.dispatch) return const data = { name: 'hzc' + nanoid(2), age: Math.trunc(100 * Math.random()), gender: 'male', } this.dispatch({ type: 'CHANGE', payload: { data, index: Math.trunc(this.reducerState.list.length * Math.random()) }, }) } handleDelete = () => { if (!this.reducerState || !this.dispatch) return this.dispatch({ type: 'DELETE', payload: { index: Math.trunc(this.reducerState.list.length * Math.random()) }, }) } } export default ToolBar ``` ### 小结 * `state`或`store`数据 * `dispatch`派发`action`，谁要更新`state`，谁进行派发 * `action`动作，指令，指明调用何种`reducer` * `reducer`如何处理`state`，而后返回一个新的`state`代替原有的`state`，注意***不可变数据*** * 类似于`redux`的流程和API * 结合`Context`解决跨组件问题 * `useReducer`与`useState`一样，返回的值是响应式的，可以触发`rerender` * `class组件`模拟实现是将`store`中存储的状态转换为了`class组件`自身的`state`后才具备触发`rerender`能力得到 ## Redux * React 最流行的状态管理工具 * `Redux`和`useReducer`概念一致 * `dispatch`派发`action`，谁要更新`state`，谁进行派发 * `reducer`对`state`进行处理 ### Context + useReducer 代替 Redux？ * 简单场景可以，节省代码体积，更简单 * 复杂场景仍然建议使用`Redux` ### Redux单向数据流 ![4e3442347cb547d1a67f1befa8c7e480.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/88ffddaa5d9247e29efa9e80366b7f56~tplv-k3u1fbpfcp-watermark.image?) ### 实践 chrome安装`redux Devtools`方便跟踪和调试安装：`npm install @reduxjs/toolkit react-redux --save` 原理同上面`useReducer`结合`context`跨组件,区别在于，`redux`这进行了模块化，状态管理更大化 ![无标题视频——使用Clipchamp制作.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/97dc64f2345f471988dc3978aae92d46~tplv-k3u1fbpfcp-watermark.image?) 1. 配置`store`，将不同模块的`state`、`reducer`,进行整合，统一出口，供外界访问 ```js import { configureStore } from '@reduxjs/toolkit' import countReducer from './count' import todoListReducer from './todoList' import type { TodoItemType } from './todoList' export type StateType = { count: number todoList: Array } // 配置store export default configureStore({ reducer: { count: countReducer, todoList: todoListReducer, }, }) ``` 2. 创建切片（模块），输出`reducer`，`action` ```js import { createSlice } from '@reduxjs/toolkit' import type { PayloadAction } from '@reduxjs/toolkit' import { nanoid } from 'nanoid' export type TodoItemType = { id: string title: string completed: boolean // 是否完成 } const INIT_STATE: Array = [ { id: nanoid(5), title: '吃螺蛳粉', completed: true, }, { id: nanoid(5), title: '煲电话粥', completed: true, }, { id: nanoid(5), title: '学习react', completed: false, }, ] const todoListSlice = createSlice({ name: 'todoList', initialState: INIT_STATE, reducers: { addTodo(state, action: PayloadAction) { return state.concat(action.payload) }, removeTodo(state, action: PayloadAction) { return state.filter(item => item.id !== action.payload.id) }, toggleCompleted(state, action: PayloadAction) { return state.map(item => { if (item.id !== action.payload.id) return item const newItem = { ...item, } newItem.completed = !newItem.completed return newItem }) }, }, }) export const { addTodo, removeTodo, toggleCompleted } = todoListSlice.actions export default todoListSlice.reducer ``` 3. 使用``包裹顶层组件，提供`store`供下游使用 ```js import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' import reportWebVitals from './reportWebVitals' import { Provider } from 'react-redux' import store from './store' const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement) root.render( ) reportWebVitals() ``` 4. 通过`useSelector`获取指定模块的state，通过`useDispatch`修改派发action ```js import React from 'react' import type { FC } from 'react' import { nanoid } from 'nanoid' import { useSelector, useDispatch } from 'react-redux' import { addTodo, removeTodo, toggleCompleted } from '../store/todoList' import type { StateType } from '../store/index' import type { TodoItemType } from '../store/todoList' const TodoList: FC = () => { const todoList = useSelector>(state => state.todoList) const dispath = useDispatch() const del = (todo: TodoItemType) => { dispath(removeTodo(todo)) } const toggle = (todo: TodoItemType) => { dispath(toggleCompleted(todo)) } const add = () => { const newtodo: TodoItemType = { id: nanoid(5), title: `${Date.now()}`, completed: false, } dispath(addTodo(newtodo)) } return (

TodoList demo

{title}

) } export default TodoList ``` ### 小结 * ``包裹顶层 * `store`管理`state`与`reducer` * `reducer` 更迭`state` * `action` 指明调用何种`reducer` * `dispatch` 需要修改状态时，派发`action` * 配合`immer` # React原理数据驱动视图的核心 * `h`函数 * `VNode`数据结构 * `patch`函数 ## VDOM 什么是虚拟DOM? 虚拟DOM (VDOM)是真实DOM的内存表示。UI的表示保存在内存中，并与“真正的”DOM同步。这是一个发生在被调用的渲染函数和在屏幕上显示元素之间的步骤。整个过程被称为‘协调’ 虚拟DOM的工作原理 Virtual DOM的工作分为三个简单步骤。 1. 只要任何底层数据发生变化，整个UI就会以Virtual DOM表示形式重新渲染。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/36a1a81d801a4aa4b43c1bfcb0a6c97e~tplv-k3u1fbpfcp-watermark.image?) 2. 然后计算以前的DOM表示和新的DOM表示之间的差异。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/56f0c8357bf44c20bb9ca292bf224ae9~tplv-k3u1fbpfcp-watermark.image?) 3. 计算完成后，真正的DOM将仅使用实际更改的内容进行更新 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/07b0f696050f42ad80f3efa223a0d9c8~tplv-k3u1fbpfcp-watermark.image?) ## diff * 只比较同一层级，不跨级比较 * `tag`不相同，则直接删掉重建，不再深度比较 * `tag`和`key`，两者都相同，则认为是相同节点，不再深度比较 * Vue2.X（Snabbdom），Vue3，React三者实现`vdom`细节都不同，核心概念和实现思路都一样 ## JSX的本质是什么 * `JSX`等同于`Vue`模板 * `Vue`模板不是`html` * `JSX`也不是`JS` `JSX`的本质 * `JSX`即`React.createElement`，即`h`函数，返回`VNode`,`react 17`使用`jsx`转换器代替`React.createElement`同样是返回`VNode`,所以现在它的本质就是一个转换器。 * 第一个参数，可能是组件，也可能是`html tag` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e6ef77389aa149e2b15f7f14c0dde044~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1b20a27f21704ab19f6377623070e739~tplv-k3u1fbpfcp-watermark.image?) [jsx在线编译](https://www.babeljs.cn/repl#?browsers=defaults%2C%20not%20ie%2011%2C%20not%20ie_mob%2011&build=&builtIns=false&corejs=3.21&spec=false&loose=false&code_lz=MYewdgzgLgBAJgUwsATgSwA5TeCMC8MaUCAthAHSkCGGAFHcWQJQEB8MdAUDDADxsevfnChsA3k1IUw1UggC-fAPSjBwkXAlSKAN2oAbAK6KVcLUJWDmzANxA&debug=false&forceAllTransforms=false&modules=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env%2Creact%2Cstage-2&prettier=false&targets=&version=7.22.10&externalPlugins=&assumptions=%7B%7D) ## 合成事件机制合成事件 * `event`不是原生的，是`SyntheticEvent`合成事件对象 * 可以通过`event.nativeEvent`获取原生事件对象 * 和`Vue`事件不同，和`DOM`事件也不同 * `react 16`及以前，所有事件挂载到`document`上，`react 17`后绑定到`root`组件，有利于多个`React`版本并存，例如微前端 react16及之前： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f8718c51d27a4a83a456044b4cdf6cd3~tplv-k3u1fbpfcp-watermark.image?) 为何需要事件机制？ * 更好的兼容性和跨平台 * 统一挂载到`root`组件，减少内存消耗，避免频繁解邦 * 方便事件的统一管理（如：`transaction`事务机制） ## setState 和 batchUpdate（批量更新）核心要点 * `setState`主流程 * `batchUpdate`（批量更新机制） * `transaction`（事物机制） ### setState原理 * `react 18`之前，有时异步，有时同步（`setTimeout`，`DOM`事件） * `react 18`之后，都是异步 * 有时合并（对象形式），有时不合并（函数形式） ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/59dcaa87f8ba4316b626fc49f9e519b9~tplv-k3u1fbpfcp-watermark.image?) 程序执行`setState`时发生了什么？ 1. 将`newState`存入`pending`微任务队列中 2. 判断当前是否处于`batchUpdate`阶段 3. 如果当前处于`batchUpdate`阶段，存放在`dirtyComponents`中，等待下一次更新时进行处理 4. 如果当前没有处于`batchUpdate`阶段，遍历所有待处理的`dirtyComponents`，执行`updateComponent`更新`pending`队列，`state`,`props` `setState`是异步任务还是同步任务？ * `setState`无所谓异步还是同步 * 看是否能命中`batchUpdate`机制 * 判断`isBatchingUpdates` 哪些能命中`batchUpdate`机制？ * 生命周期（和它调用的函数） * `React`中注册的事件（和它调用的函数） * `React`可以“管理”的入口哪些无法命中`batchUpdate`机制？ * `setTimeout`,`setInterval`等（和它调用的函数） * 自定义的`DOM事件`（和它调用的函数） * `react`“管不到”的入口 ### `transaction`事务机制 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/71c45a25f8984a68858289c8c3f604ed~tplv-k3u1fbpfcp-watermark.image?) ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5b835cd2345942c687dd815d4c359d28~tplv-k3u1fbpfcp-watermark.image?) 1. 无论执行什么方法，先执行`initialize`,然后再执行该方法，最后执行`close` 2. `initialize`对应`isBatchingUpdate = true` 3. `close`对应`isBatchingUpdate = false` ## `react-fiber`如何优化性能？更新的两个阶段 * `reconciliation`协调阶段——执行`diff`算法，纯`JS`计算 * `commit`提交阶段——将`diff`结果渲染到`DOM` 为什么分为两个阶段？ * `JS`是***单线程***，且和***DOM***渲染共用一个线程 * 当组件足够复杂，组建更新时计算和渲染都压力很大 * 同时再有`DOM`操作需求（动画，鼠标拖拽等），将卡顿解决方案`react-fiber` * 将`reconciliation`阶段进行任务拆分(`commit`无法拆分) * `DOM`需要渲染时暂停，空闲时恢复 * 原本`fiber`机制的本质是利用`window.requestIdleCallback`，现在已经更改为了另一套基于`requestAnimationFrame`的`polyfill` # 面试题 ## 实际工作中，做过哪些React优化？ * 使用`css`模拟`v-show` * 组件层级多时，使用`Fragment`减少层级 * 不在`jsx`中定义函数，因为`jsx`会被频繁执行 * 使用`class组件`时，在`constructor`中`bind this`或者使用箭头函数，避免`bind this` * `scu`、`PureComponent`、`React.memo`、`useCallback`、`useMemo`、`useState`传入函数 * 异步组件、路由懒加载 * 使用`immer` ## 你使用React遇到过哪些坑？ `setState`因为版本的不同，导致执行时机不同，`React18`以前在`setTimeout`、`DOM`事件中（非`React`上下文中时候），可以在更新完成后接着就获取到值，表现为同步执行，其他时候都是异步执行，`React18`全都是异步执行 ## React如何统一监听组件报错？ * `ErrorBoundary`组件 * 监听所有下级组件报错 * 可降级展示UI * 只监听组件渲染时报错 * 不监听`DOM事件` * `Window.onerror`监听`DOM`事件报错、异步报错 * `window.onunhandledrejection`监听`Promise`未`catch`的报错 ## 输出什么？初始值都为0 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d45e0b0dde364ac48a06dad570d4c009~tplv-k3u1fbpfcp-watermark.image?) 18版本：生产环境0 0 0 0 开发环境0 0 0 0 1 1 1 1 18之前： 0 0 2 3 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a5de01618c694653896de799d781fe3f~tplv-k3u1fbpfcp-watermark.image?) 18版本： 0 0 0 0 20 20 20 20 18版本以前： 0 0 21 22 17版本： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cb552c5b5c434406aacb1f4328686dde~tplv-k3u1fbpfcp-watermark.image?) ## setState是宏任务还是微任务？ * `setState`是 ***同步*** 任务，`state`，都是同步更新，只不过让`React`做成了异步得到样子 * 因为要考虑性能，多次`state`修改。只进行一次`DOM`渲染 * 在微任务`Promise.then`开始之前，`state`已经计算完了 * 日常说的`异步`是不严谨的，但沟通成本低 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/36feb97c7a4f49bdb4a018f0624f5f2a~tplv-k3u1fbpfcp-watermark.image?) > 小技巧：如果一个作用域内有一个`setState`,你可以理解为它永远放在作用域最后一行执行，如果是传入函数的就把它按顺序放在作用域最后顺序执行 ## class组件和function组件有什么区别？如何选择？ * `Function组件`相比`Class组件`具有更好的性能，因为它没有额外的实例化和内存开销。`Function组件`也更易于测试和理解 * 官方更推荐使用`Function组件`和`Hooks`的方式来开发新的组件如果你喜欢，帮助到你了，点赞是对我最大帮助，如果你觉得这篇文章以后还能帮助到你，请收藏下它，如果文中有不对的，或者漏了的知识点，请私信我，感激不尽