React

react官网：https://reactjs.org/

1. 认识React

react:用于构建用户界面的JavaScript库

由Facebook开发，且开源

react特点：

1. 采用组件化模式，声明式编码，提高开发效率及组件复用率

2. 在React Nativev中可以使用React语法进行移动端开发

3. 使用虚拟DOM + 优秀的Diffing算法，尽量减少与真实DOM的交互

开发React必须依赖三个库

1. react：包含react所必须的核心代码

2. react-dom：react渲染在不同平台所需要的核心代码

• react-dom包含react web 和 react-native

• react-web:react-dom会将jsx最终渲染成真实的DOM，显示在浏览器中

• react-native:react-dom会将jsx最终渲染成原生的控件

1. babel：将jsx转换为React代码的工具

React依赖引入

注意：这里引入的版本是 react 18

使用

必须在script标签上加上type属性 type=“text/babel”

因为我们在react中写的是jsx语法，需要babel转换

    // React18const root =  ReactDOM.createRoot(document.querySelector("#root"))// 使用reder函数进行渲染// 注意里面没有双引号，直接写标签，写双引号就当作字符串来解析root.render(
hello world
)

React组件化

React组件化分为类组件和函数组件

类组件

就是一个class类

用法：

1. 用class创建一个类

2. 继承React.Component

3. 将这个组件通过render函数渲染到页面上

继承了React.Component，这个类就是一个组件

2.React 中 JSX语法

• JSX 是 JavaScript XML 的简写，表示 JavaScript 代码中写 XML（HTML）格式的代码

• 优势：声明式语法更加直观、与 HTML 结构相同，降低了学习成本、提升开发效率

• JSX 是 react 的核心内容

:::
JSX 是React 的核心内容

JSX 表示在JS代码中写HTML结构，是React声明式的体现

使用 JSX 配合嵌入的 JS 表达式、条件渲染、列表渲染，可以描述任意 UI 结构

推荐使用 className 的方式给JSX添加样式
:::

为什么React选择JSX

因为html和js逻辑密不可分，所以React没有将它们分离到不同的文件中，而是将它们组合到了一起，这个地方就是组件

注释内容

:::
{ /* 注释内容 */ }
:::

JSX内容

jsx插入子元素不同类型处理

1. 当变量是Number、String、Array 时，会直接显示

 constructor() {super()this.state = {arr:["a", "b", "c", "d", "e"],}}render() {return (
hello {this.state.arr}
)}

2. 当变量时null、undefined、Boolean类型时，显示的内容为空

   
   constructor() {super()this.state = {undfEl: undefined,}}render() {return (
   {this.state.undfEl}
   )}

3. 当变量是Object对象类型，会报错

     constructor() {super()this.state = {obj: {name: "小罗"}}}render() {return (
{/* 直接使用会报错 */}
{this.state.obj}
{/* 可以通过Object方法来获取里面的值 */}
{Object.values(this.state.obj)}
 
{Object.entries(this.state.obj)}
)}# 3.JSX属性和class、style绑定### JSX属性绑定constructor() {super()this.state = {names: "hello world",hrefUrla: 'http://www.baidu.com'}}render() {const { names , hrefUrla} = this.statereturn (
 names }>{names}
hrefUrla}>百度
)}

JSXclass绑定

方式一：直接写

方式二：字符串拼接

     constructor() {super()this.state = {isActive: true}}render() {const {isActive } = this.stateconst classNames = `abc cba ${isActive ? 'active' : " "}`return (
classNames}>
)}

方式三：数组

     constructor() {super()this.state = {isActive: true}}render() {const { isActive } = this.stateconst classLists = ['abc','dbc']if(isActive) {classLists.push("active")}return (
classLists.join(" ")}>
)}

JSXstyle绑定

1. 对象写法

   class App extends React.Component {constructor() {super()this.state = {}}render() {const styleBgc = {color:'red',backgroundColor:'skyblue'}return (
   {color:'red',backgroundColor:'skyblue'}}>hello world
     {/* 等同于下面这个 */}
   styleBgc}>hello world
     
   )}```

4.事件绑定-this的三种绑定方式

      constructor() {super()this.state = {}}render() {return (
{/* bind */}this.btns.bind(this)}>按钮1{/* 事件为箭头函数 */}this.btns2}>按钮2{/* 直接传入一个箭头函数，箭头函数返回事件 */}() => this.btns3()}>按钮3
)}btns() {console.log(this)}btns2 = () => {console.log(this)}btns3() {console.log(this)}

5.React组件化开发

react的组件相对于Vue更加的灵活和多样，按照不同的方式可以分为很多类组件

1. 根据组件的定义方式，可以分为：函数组件(Fuctional Component) 和类组件(Class Component)

2. 根据组件内部是否有状态需要维护，可以分为：无状态组件（Srareless Component）和有状态组件(Stateful Component)

3. 根据组件的不同职责，可以分为：展开型组件(Presentational Component) 和容器型组件（Container Component）

• 函数组件、无状态组件、展示型组件主要关注UI的展示

• 类组件、有状态组件、容器型组件主要关注数据逻辑

类组件

类组件定义要求：

1. 组件的名称要大写字符开头(函数组件也是)

2. 类组件要继承React.Component

3. 类组件必须要实现render函数

定义一个类组件：

• constructor是可选的，通常在constructor中初始化一些数据

• this.state中维护的就是组件内部的数据

• render()方法是class组件中唯一必须实现的方法

render函数的返回值

1. React元素

2. 数组或fragments

3. Portals

4. 字符串或数值类型

5. 布尔类型或null

函数组件

函数组件是使用function来进行定义的函数，函数组件返回和类组件中render返回一样的内容

    function App() {return (
你好小罗
)}export default App

函数组件的特点(除hooks外)：

1. 没有生命周期，也会被更新并挂载，但是没有生命周期函数

2. this关键字不能指向组件实例(因为没有组件实例)

3. 没有内部状态(state)

6.React组件生命周期

React生命周期指的是类组件生命周期，因为函数组件没有生命周期

生命周期：

是一个抽象概念，在生命周期整个过程中，分成了很多个阶段，每个组件都有属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这个就是一个组件所谓的生命周期

生命周期钩子：生命周期事件，生命周期函数，会对组件内部实现某些函数进行回调

1.componentDidMount()

代表DOM挂载成功

1. 首先执行构造方法constructor()

2. 再次执行render函数

3. 当上面两个执行完成后执行componentDidMount生命周期钩子

2. componentDidUpdate()

代表组件更新回调的函数

1. 当组件数据被修改时，首先会重新执行render()函数

2. 然后再执行componentDidUpdate()生命周期钩子

3.componentWillUnmount()

代表组件被销毁回调的函数

7.不常用的生命周期

1.shouldComponentUpdate()

进行判断是否进行更新渲染render()函数，返回flase不更新，返回true正常更新

2.getSnapshotBeforeUpdate

在React更新DOM之前回调的一个函数，也就是render函数执行完了

8.React组件通信

父传子

父组件通过 属性=值 的形式来传递给子组件数据

子组件通过 props 参数获取父组件传递过来的数据

PropTypes类型检查

https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html

1. 子组件引入 propTypes

   import propTypes from “prop-types”

2. 再通过类.propTypes = {} 进行限制

默认值：defaultProps

子传父

和父传子是一样的，只不过传递的是属性 是一个函数，其实就是在父组件中修改，只不过需要子组件调用执行

1. 父组件定义函数

2. 子组件通过 this.props调用 父组件传递的函数

9.React插槽使用

首先React中没有插槽概念

插槽概念：允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。

实现插槽

React实现插槽非常灵活，有两种方案实现：

• 组件的children子元素

• props属性传递React元素

组件的children实现插槽

步骤：

1. 在组件里面写好元素，会传入到组件的this.props.children里面

2. 当组件里面有多个元素 children是一个数组

3. 当组件里面只有一个元素 children是一个元素

10.React非父子通信

11.setState的使用

setState来告知React数据已经发生变化

setState方法是从Component中继承过来的

setState传入对象

传入的对象会和 this.state 对象合并，本质使用了 Object.assign()

setState传入函数

函数写法可以获取到上一次的state 和父组件传递过来的props

函数里面返回的也是一个对象

SetState是异步更新

先打印 哈哈哈 再修改 message

setState第二个参数

setState 是一个回调函数，可以用于获取更新好的state的数据

12.React性能优化SCU

当我们修改this.setState的数据时，render函数就会重新执行，我们可以通过shouldComponentUpdate生命周期来判断是否重新渲染，返回false 就是不渲染，但是每次都手动添加比较麻烦，所以我们可以使用PureComponent

PureComponent

就是将类 class 继承 PureComponent 即可

memo

函数组件中使用 memo 来进行控制是否渲染

使用：

1. 导入 memo

2. 将函数用 memo包裹

   import { memo } from “react”
   const Foo = memo(function () {
   console.log(“Foo render”)
   return (
   

   
   

   Foo

   
   
   )
   })
   export default Foo

13.获取DOM方式refs

createRef()

ref可以获取组件实例，可以调用其他组件里面的方法，只能对类组件有用，函数组件没有实例，可以通过forwardRef()来获取函数式组件里面的DOM

forwardRef()

使用：

1. 函数式组件里面导入 forwardRef() 对函数进行一个包裹，

2. 在 通过 ref 进行绑定

14.受控和非受控组件

15.React的高阶组件

16.portals和fragment

17.StirctMode严格模式