react从入门到进阶笔记React是什么？ React：用于构建用户界面的 JavaScript 库； React的官

React是什么？

React：用于构建用户界面的 JavaScript 库；
React的官网文档：https://zh-hans.reactjs.org/

React的特点

声明式编程：

声明式编程是目前整个大前端开发的模式：Vue、React、Flutter、SwiftUI；
它允许我们只需要维护自己的状态，当状态改变时，React可以根据最新的状态去渲染我们的UI界面；

声明式编程.png

组件化开发：

组件化开发页面目前前端的流行趋势，我们会将复杂的界面拆分成一个个小的组件；
如何合理的进行组件的划分和设计也是一个重点；

组件化开发.png

多平台适配：

2013年，React发布之初主要是开发Web页面；
2015年，Facebook推出了ReactNative，用于开发移动端跨平台；（虽然目前Flutter非常火爆，但是还是有很多公司在使用 ReactNative）；
2017年，Facebook推出ReactVR，用于开发虚拟现实Web应用程序；（VR也会是一个火爆的应用场景）；

多平台适配.png

React的开发依赖

开发React必须依赖三个库：

react：包含react所必须的核心代码
react-dom：react渲染在不同平台所需要的核心代码
babel：将jsx转换成React代码的工具
为什么要进行拆分呢？原因就是react-native。
react包中包含了react web和react-native所共同拥有的核心代码。
react-dom针对web和native所完成的事情不同：
- web端：react-dom会将jsx最终渲染成真实的DOM，显示在浏览器中
- native端：react-dom会将jsx最终渲染成原生的控件（比如Android中的Button，iOS中的UIButton）。

Babel和React的关系

babel是什么呢？
Babel ，又名 Babel.js。是目前前端使用非常广泛的编译器、转移器。比如当下很多浏览器并不支持ES6的语法，但是确实ES6的语法非常的简洁和方便，我们开发时希望使用它。那么编写源码时我们就可以使用ES6来编写，之后通过Babel工具，将ES6转成大多数浏览器都支持的ES5的语法。
React和Babel的关系：
默认情况下开发React其实可以不使用babel。但是前提是我们自己使用 React.createElement 来编写源代码，它编写的代码非常的繁琐和可读性差。那么我们就可以直接编写jsx（JavaScript XML）的语法，并且让babel帮助我们转换成React.createElement。

React的依赖引入

方式一：直接CDN引入

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

方式二：下载后，添加本地依赖
方式三：通过npm管理（后续脚手架再使用）

Hello React

第一步：在界面上通过React显示一个Hello React
注意：这里我们编写React的script代码中，必须添加 type="text/babel"，作用是可以让babel解析jsx的语法

ReactDOM. createRoot函数：用于创建一个React根，之后渲染的内容会包含在这个根中
- 参数：将渲染的内容，挂载到哪一个HTML元素上
root.render函数: 参数：要渲染的根组件
可以通过{}语法来引入外部的变量或者表达式

组件化开发

整个逻辑其实可以看做一个整体，那么我们就可以将其封装成一个组件：
- 我们说过root.render 参数是一个HTML元素或者一个组件；
- 所以我们可以先将之前的业务逻辑封装到一个组件中，然后传入到 ReactDOM.render 函数中的第一个参数；
在React中，如何封装一个组件呢？这里我们暂时使用类的方式封装组件：
- 1.定义一个类（类名大写，组件的名称是必须大写的，小写会被认为是HTML元素），继承自React.Component
- 2.实现当前组件的render函数 ,render当中返回的jsx内容，就是之后React会帮助我们渲染的内容

// 1.定义根组件
 class App extends React.Component {
   render() {
     return (<h2>Hello React</h2>)
   }
 }

 // 2.渲染内容
 const root = ReactDOM.createRoot(document.querySelector('#root'))
 root.render(<App />)

组件化 - 数据依赖

组件化问题一：数据在哪里定义？

在组件中的数据，我们可以分成两类：
- 参与界面更新的数据：当数据变量时，需要更新组件渲染的内容；
- 不参与界面更新的数据：当数据变量时，不需要更新将组建渲染的内容；
参与界面更新的数据我们也可以称之为是参与数据流，这个数据是定义在当前对象的state中
- 我们可以通过在构造函数中 this.state = {定义的数据}, 当我们的数据发生变化时，我们可以调用 this.setState 来更新数据，并且通知React进行update操作；
- 在进行update操作时，就会重新调用render函数，并且使用最新的数据，来渲染界面
```
class App extends React.Component {
  constructor() {
    super()
    this.state = {
      message: 'Hello React'
    }
  }
}
```

组件化 – 事件绑定

组件化问题二：事件绑定中的this
在类中直接定义一个函数，并且将这个函数绑定到元素的onClick事件上，当前这个函数的this指向的是谁呢？

默认情况下是undefined
因为在正常的DOM操作中，监听点击，监听函数中的this其实是节点对象（比如说是button对象）；
这次因为React并不是直接渲染成真实的DOM，我们所编写的button只是一个语法糖，它的本质React的Element对象；
那么在这里发生监听的时候，react在执行函数时并没有绑定this，默认情况下就是一个undefined； 我们在绑定的函数中，可能想要使用当前对象，比如执行 this.setState 函数，就必须拿到当前对象的this
我们就需要在传入函数时，给这个函数直接绑定this 类似于下面的写法：

<button onClick={this.changeText.bind(this)}>改变文本</button>

电影列表展示

计数器案例

VSCode代码片段

我们在前面练习React的过程中，有些代码片段是需要经常写的，我们在VSCode中我们可以生成一个代码片段，方便我们快速生成。
VSCode中的代码片段有固定的格式，所以我们一般会借助于一个在线工具来完成。
具体的步骤如下：
- 第一步，复制自己需要生成代码片段的代码；
- 第二步，在该网站中生成代码片段；
- 第三步，在VSCode中配置代码片段；

代码片段.png

认识JSX

这段element变量的声明右侧赋值的标签语法是什么呢？

它不是一段字符串（因为没有使用引号包裹）；
它看起来是一段HTML元素，但是我们能在js中直接给一个变量赋值html吗？
其实是不可以的，如果我们将 type="text/babel" 去除掉，那么就会出现语法错误；
它到底是什么呢？其实它是一段jsx的语法；

JSX是什么？

JSX是一种JavaScript的语法扩展（eXtension），也在很多地方称之为JavaScript XML，因为看起就是一段XML语法；
它用于描述我们的UI界面，并且其完成可以和JavaScript融合在一起使用；
它不同于Vue中的模块语法，你不需要专门学习模块语法中的一些指令（比如v-for、v-if、v-else、v-bind）；

为什么React选择了JSX

React认为渲染逻辑本质上与其他UI逻辑存在内在耦合

比如UI需要绑定事件（button、a原生等等）、UI中需要展示数据状态、在某些状态发生改变时，又需要改变UI；
他们之间是密不可分，所以React没有将标记分离到不同的文件中，而是将它们组合到了一起，这个地方就是组件（Component）；当然，后面我们还是会继续学习更多组件相关的东西；
在这里，我们只需要知道，JSX其实是嵌入到JavaScript中的一种结构语法；

JSX的书写规范：

JSX的顶层只能有一个根元素，所以我们很多时候会在外层包裹一个div元素（或者使用后面我们学习的Fragment）；
为了方便阅读，我们通常在jsx的外层包裹一个小括号()，这样可以方便阅读，并且jsx可以进行换行书写；
JSX中的标签可以是单标签，也可以是双标签； 注意：如果是单标签，必须以/>结尾；

JSX的使用

jsx中的注释 -{/* 这里是注释*/}

JSX嵌入变量作为子元素
- 情况一：当变量是Number、String、Array类型时，可以直接显示
- 情况二：当变量是null、undefined、Boolean类型时，内容为空；
  - 如果希望可以显示null、undefined、Boolean，那么需要转成字符串；
  - 转换的方式有很多，比如toString方法、和空字符串拼接，String(变量)等方式；
- 情况三：Object对象类型不能作为子元素（not valid as a React child）
JSX嵌入表达式
- 运算表达式
- 三元运算符
- 执行一个函数

// 1.定义App根组件
    class App extends React.Component {
      constructor() {
        super()
        this.state = {
          counter: 100,
          message: "Hello World",
          names: ["abc", "cba", "nba"],

          aaa: undefined,
          bbb: null,
          ccc: true,

          friend: { name: "kobe" },

          firstName: "kobe",
          lastName: "bryant",

          age: 20,

          movies: ["流浪地球", "星际穿越", "独行月球"]
        }
      }

      render() {
        // 1.插入标识符
        const { message, names, counter } = this.state
        const { aaa, bbb, ccc } = this.state
        const { friend } = this.state

        // 2.对内容进行运算后显示(插入表示)
        const { firstName, lastName } = this.state
        const fullName = firstName + " " + lastName
        const { age } = this.state
        const ageText = age >= 18 ? "成年人": "未成年人"
        const liEls = this.state.movies.map(movie => <li>{movie}</li>)

        // 3.返回jsx的内容
        return (
          <div>
            {/* 1.Number/String/Array直接显示出来 */}
            <h2>{counter}</h2>
            <h2>{message}</h2>
            <h2>{names}</h2>

            {/* 2.undefined/null/Boolean */}
            <h2>{String(aaa)}</h2>
            <h2>{bbb + ""}</h2>
            <h2>{ccc.toString()}</h2>

            {/* 3.Object类型不能作为子元素进行显示*/}
            <h2>{friend.name}</h2>
            <h2>{Object.keys(friend)[0]}</h2>

            {/* 4.可以插入对应的表达式*/}
            <h2>{10 + 20}</h2>
            <h2>{firstName + " " + lastName}</h2>
            <h2>{fullName}</h2>

            {/* 5.可以插入三元运算符*/}
            <h2>{ageText}</h2>
            <h2>{age >= 18 ? "成年人": "未成年人"}</h2>

            {/* 6.可以调用方法获取结果*/}
            <ul>{liEls}</ul>
            <ul>{this.state.movies.map(movie => <li>{movie}</li>)}</ul>
            <ul>{this.getMovieEls()}</ul>
          </div>
        )
      }

      getMovieEls() {
        const liEls = this.state.movies.map(movie => <li>{movie}</li>)
        return liEls
      }
    }

    // 2.创建root并且渲染App组件
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)

jsx绑定属性
- 比如元素都会有title属性
- 比如img元素会有src属性
- 比如a元素会有href属性
- 比如元素可能需要绑定class
- 比如原生使用内联样式style

// 1.定义App根组件
    class App extends React.Component {
      constructor() {
        super()
        this.state = {
          title: "哈哈哈",
          imgURL: "https://ts1.cn.mm.bing.net/th/id/R-C.95bc299c3f1f0e69b9eb1d0772b14a98?rik=W5QLhXiERW4nLQ&riu=http%3a%2f%2f20178405.s21i.faiusr.com%2f2%2fABUIABACGAAgoeLO-wUo4I3o2gEw8Qs4uAg.jpg&ehk=N7Bxe9nqM08w4evC2kK6yyC%2bxIWTjdd6HgXsQYPbMj0%3d&risl=&pid=ImgRaw&r=0",
          href: "https://www.baidu.com",

          isActive: true,
          objStyle: {color: "red", fontSize: "30px"}
        }
      }

      render() {
        const { title, imgURL, href, isActive, objStyle } = this.state

        // 需求: isActive: true -> active
        // 1.class绑定的写法一: 字符串的拼接
        const className = `abc cba ${isActive ? 'active': ''}`
        // 2.class绑定的写法二: 将所有的class放到数组中
        const classList = ["abc", "cba"]
        if (isActive) classList.push("active")
        // 3.class绑定的写法三: 第三方库classnames -> npm install classnames

        return (
          <div>
            { /* 1.基本属性绑定 */ }
            <h2 title={title}>我是h2元素</h2>
            {/*<img src={imgURL} alt=""/>*/}
            <a href={href}>百度一下</a>

            
            { /* 2.绑定class属性: 最好使用className */ }
            <h2 className={className}>哈哈哈哈</h2>
            <h2 className={classList.join(" ")}>哈哈哈哈</h2>

            
            { /* 3.绑定style属性: 绑定对象类型 */ }
            <h2 style={{color: "red", fontSize: "30px"}}>呵呵呵呵</h2>
            <h2 style={objStyle}>呵呵呵呵</h2>
          </div>
        )
      }
    }

    // 2.创建root并且渲染App组件
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)

React事件绑定

如果原生DOM原生有一个监听事件，我们可以如何操作呢？
- 方式一：获取DOM原生，添加监听事件；
- 方式二：在HTML原生中，直接绑定onclick；
在React中是如何操作呢？我们来实现一下React中的事件监听，这里主要有两点不同
- React 事件的命名采用小驼峰式（camelCase），而不是纯小写；
- 我们需要通过{}传入一个事件处理函数，这个函数会在事件发生时被执行；

class App extends React.Component {
      constructor() {
        super()
        this.state = {
          message: "Hello World"
        }
      }

      btnClick() {
        console.log("btnClick");
      }

      render() {
        return (
          <div>
            <button onClick={this.btnClick}>按钮</button>
          </div>
        )
      }
    }

this的绑定问题

this的四种绑定规则:
- 1.默认绑定独立执行 foo()
- 2.隐式绑定被一个对象执行 obj.foo() -> obj
- 3.显式绑定: call/apply/bind foo.call("aaa") -> String("aaa")
- 4.new绑定: new Foo() -> 创建一个新对象, 并且赋值给this

在事件执行后，我们可能需要获取当前类的对象中相关的属性，这个时候需要用到this
- 如果我们这里直接打印this，也会发现它是一个undefined
为什么是undefined呢？
- 原因是btnClick函数并不是我们主动调用的，而且当button发生改变时，React内部调用了btnClick函数；
- 而它内部调用时，并不知道要如何绑定正确的this；
如何解决this的问题呢？
- 方案一：bind给btnClick显示绑定this
- 方案二：使用 ES6 class fields 语法
- 方案三：事件监听时传入箭头函数（推荐）

class App extends React.Component {
  // class fields
  name = "App"

  constructor() {
    super()
    this.state = {
      message: "Hello World",
      counter: 100
    }

    this.btn1Click = this.btn1Click.bind(this)
  }

  btn1Click() {
    console.log("btn1Click", this);
    this.setState({ counter: this.state.counter + 1 })
  }

  btn2Click = () => {
    console.log("btn2Click", this)
    this.setState({ counter: 1000 })
  }

  btn3Click() {
    console.log("btn3Click", this);
    this.setState({ counter: 9999 })
  }

  render() {
    const { message } = this.state

    return (
      <div>
        {/* 1.this绑定方式一: bind绑定 */}
        <button onClick={this.btn1Click}>按钮1</button>


        {/* 2.this绑定方式二: ES6 class fields */}
        <button onClick={this.btn2Click}>按钮2</button>


        {/* 3.this绑定方式三: 直接传入一个箭头函数(重要) */}
        <button onClick={() => console.log("btn3Click")}>按钮3</button>

        <button onClick={() => this.btn3Click()}>按钮3</button>


        <h2>当前计数: {this.state.counter}</h2>
      </div>
    )
  }
}

事件参数传递

在执行事件函数时，有可能我们需要获取一些参数信息：比如event对象、其他参数
情况一：获取event对象
- 很多时候我们需要拿到event对象来做一些事情（比如阻止默认行为）
- 那么默认情况下，event对象有被直接传入，函数就可以获取到event对象；
情况二：获取更多参数
- 有更多参数时，我们最好的方式就是传入一个箭头函数，主动执行的事件函数，并且传入相关的其他参数；

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      message: "Hello World"
    }
  }

  btnClick(event, name, age) {
    console.log("btnClick:", event, this)
    console.log("name, age:", name, age)
  }

  render() {
    const { message } = this.state

    return (
      <div>
        {/* 1.event参数的传递 */}
        <button onClick={this.btnClick.bind(this)}>按钮1</button>
        <button onClick={(event) => this.btnClick(event)}>按钮2</button>


        {/* 2.额外的参数传递 */}
        <button onClick={this.btnClick.bind(this, "kobe", 30)}>按钮3(不推荐)</button>

        <button onClick={(event) => this.btnClick(event, "why", 18)}>按钮4(推荐)</button>
      </div>
    )
  }
}

// 2.创建root并且渲染App组件
const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(<App/>)

React条件渲染

某些情况下，界面的内容会根据不同的情况显示不同的内容，或者决定是否渲染某部分内容：
- 在vue中，我们会通过指令来控制：比如v-if、v-show；
- 在React中，所有的条件判断都和普通的JavaScript代码一致；
方式一：条件判断语句
- 适合逻辑较多的情况
方式二：三元运算符
- 适合逻辑比较简单
方式三：与运算符&&
- 适合如果条件成立，渲染某一个组件；如果条件不成立，什么内容也不渲染；

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      message: "Hello World",
      isReady: false,
      friend: undefined
    }
  }

  render() {
    const { isReady, friend } = this.state

    // 1.条件判断方式一: 使用if进行条件判断
    let showElement = null
    if (isReady) {
      showElement = <h2>准备开始比赛吧</h2>
    } else {
      showElement = <h1>请提前做好准备!</h1>
    }

    return (
      <div>
        {/* 1.方式一: 根据条件给变量赋值不同的内容 */}
        <div>{showElement}</div>

        {/* 2.方式二: 三元运算符 */}
        <div>{ isReady ? <button>开始战斗!</button>: <h3>赶紧准备</h3> }</div>

        {/* 3.方式三: &&逻辑与运算 */}
        {/* 场景: 当某一个值, 有可能为undefined时, 使用&&进行条件判断 */}
        <div>{ friend && <div>{friend.name + " " + friend.desc}</div> }</div>
      </div>
    )
  }
}

v-show的效果
- 主要是控制display属性是否为none

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      message: "Hello World",
      isShow: true
    }
  }
  changeShow() {
    this.setState({ isShow: !this.state.isShow })
  }

  render() {
    const { message, isShow } = this.state
    return (
      <div>
        <button onClick={() => this.changeShow()}>切换</button>
        { isShow && <h2>{message}</h2> }

        {/* v-show的效果 */}
        <h2 style={{display: isShow ? 'block': 'none'}}>哈哈哈哈</h2>
      </div>
    )
  }
}

React列表渲染

真实开发中我们会从服务器请求到大量的数据，数据会以列表的形式存储：
- 比如歌曲、歌手、排行榜列表的数据；
- 比如商品、购物车、评论列表的数据；
- 比如好友消息、动态、联系人列表的数据；
在React中并没有像Vue模块语法中的v-for指令，而且需要我们通过JavaScript代码的方式组织数据，转成JSX：
- 很多从Vue转型到React的同学非常不习惯，认为Vue的方式更加的简洁明了；
- 但是React中的JSX正是因为和JavaScript无缝的衔接，让它可以更加的灵活；
- 另外我经常会提到React是真正可以提高我们编写代码能力的一种方式；
如何展示列表呢？
- 在React中，展示列表最多的方式就是使用数组的map高阶函数；
很多时候我们在展示一个数组中的数据之前，需要先对它进行一些处理：
- 比如过滤掉一些内容：filter函数
- 比如截取数组中的一部分内容：slice函数

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      students: [
        { id: 111, name: "why", score: 199 },
        { id: 112, name: "kobe", score: 98 },
        { id: 113, name: "james", score: 199 },
        { id: 114, name: "curry", score: 188 },
      ]
    }
  }

  render() {
    const { students } = this.state

    // 分数大于100的学生进行展示
    const filterStudents = students.filter(item => {
      return item.score > 100
    })

    // 分数大于100, 只展示两个人的信息
    const sliceStudents = filterStudents.slice(0, 2)

    return (
      <div>
        <h2>学生列表数据</h2>
        <div className="list">
          {
            students.filter(item => item.score > 100).slice(0, 2).map(item => {
              return (
                <div className="item" key={item.id}>
                  <h2>学号: {item.id}</h2>
                  <h3>姓名: {item.name}</h3>
                  <h1>分数: {item.score}</h1>
                </div>
              )
            })
          }
        </div>
      </div>
    )
  }
}

列表中的key

我们会发现在前面的代码中只要展示列表都会报一个警告：

这个警告是告诉我们需要在列表展示的jsx中添加一个key
- key主要的作用是为了提高diff算法时的效率；

JSX的本质

实际上，jsx 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖
- 所有的jsx最终都会被转换成React.createElement的函数调用。
createElement需要传递三个参数：
参数一：type
- 当前ReactElement的类型；
- 如果是标签元素，那么就使用字符串表示 “div”；
- 如果是组件元素，那么就直接使用组件的名称；
参数二：config
- 所有jsx中的属性都在config中以对象的属性和值的形式存储；
- 比如传入className作为元素的class；
参数三：children
- 存放在标签中的内容，以children数组的方式进行存储；
- 当然，如果是多个元素呢？React内部有对它们进行处理，处理的源码在下方

jsx源码.png

虚拟DOM的创建过程

我们通过 React.createElement 最终创建出来一个 ReactElement对象：
这个ReactElement对象是什么作用呢？React为什么要创建它呢？
- 原因是React利用ReactElement对象组成了一个JavaScript的对象树；
- JavaScript的对象树就是虚拟DOM（Virtual DOM）；
如何查看ReactElement的树结构呢？
- 我们可以将之前的jsx返回结果进行打印；
- 注意下面代码中我打jsx的打印；
而ReactElement最终形成的树结构就是Virtual DOM；

虚拟dom1.png

jsx – 虚拟DOM – 真实DOM

虚拟dom2.png

声明式编程

虚拟DOM帮助我们从命令式编程转到了声明式编程的模式
React官方的说法：Virtual DOM 是一种编程理念。
- 在这个理念中，UI以一种理想化或者说虚拟化的方式保存在内存中，并且它是一个相对简单的JavaScript对象
- 我们可以通过ReactDOM.render让虚拟DOM 和真实DOM同步起来，这个过程中叫做协调（Reconciliation）；
这种编程的方式赋予了React声明式的API：
- 你只需要告诉React希望让UI是什么状态；
- React来确保DOM和这些状态是匹配的；
- 你不需要直接进行DOM操作，就可以从手动更改DOM、属性操作、事件处理中解放出来；

购物车案例

1.在界面上以表格的形式，显示一些书籍的数据；
2.在底部显示书籍的总价格；
3.点击+或者-可以增加或减少书籍数量（如果为1，那么不能继续-）；
4.点击移除按钮，可以将书籍移除（当所有的书籍移除完毕时，显示：购物车为空~）；

购物车.png

class App extends React.Component {
    constructor() {
      super()
      this.state = {
        books: [
          {
            id: 1,
            name: '《算法导论》',
            date: '2006-9',
            price: 85.0,
            count: 1
          },
          {
            id: 2,
            name: '《UNIX编程艺术》',
            date: '2006-2',
            price: 59.0,
            count: 1
          },
          {
            id: 3,
            name: '《编程珠玑》',
            date: '2008-10',
            price: 39.0,
            count: 1
          },
          {
            id: 4,
            name: '《代码大全》',
            date: '2006-3',
            price: 128.0,
            count: 1
          }
        ]
      }
    }

    getTotalPrice() {
      const totalPrice = this.state.books.reduce((preValue, item) => {
        return preValue + item.price * item.count
      }, 0)
      return totalPrice
    }

    changeCount(index, count) {
      const newBooks = [...this.state.books]
      newBooks[index].count += count
      this.setState({
        books: newBooks
      })
    }

    removeItem(index) {
      const newBooks = [...this.state.books]
      newBooks.splice(index, 1)
      this.setState({
        books: newBooks
      })
    }

    formatPrice(price) {
      return '¥' + Number(price).toFixed(2)
    }

    render() {
      const { books } = this.state

      return (
        <div>
          <table>
            <thead>
              <tr>
                <th>序号</th>
                <th>书籍名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              {books.map((item, index) => {
                return (
                  <tr key={item.id}>
                    <td>{index}</td>
                    <td>{item.name}</td>
                    <td>{item.date}</td>
                    <td>{this.formatPrice(item.price)}</td>
                    <td>
                      <button onClick={() => this.changeCount(index, 1)}>+</button>
                      {item.count}
                      <button disabled={item.count <= 0} onClick={() => this.changeCount(index, -1)}>
                        -
                      </button>
                    </td>
                    <td>
                      <button onClick={() => this.removeItem(index)}>删除</button>
                    </td>
                  </tr>
                )
              })}
            </tbody>
          </table>
          <h3>总价: {this.formatPrice(this.getTotalPrice())}</h3>
        </div>
      )
    }
  }

  const root = ReactDOM.createRoot(document.querySelector('#root'))
  root.render(<App />)

React脚手架解析

前端工程的复杂化

如果我们只是开发几个小的demo程序，那么永远不需要考虑一些复杂的问题：
- 比如目录结构如何组织划分；
- 比如如何管理文件之间的相互依赖；
- 比如如何管理第三方模块的依赖；
- 比如项目发布前如何压缩、打包项目；
- 等等...
现代的前端项目已经越来越复杂了：
- 不会再是在HTML中引入几个css文件，引入几个编写的js文件或者第三方的js文件这么简单；
- 比如css可能是使用less、sass等预处理器进行编写，我们需要将它们转成普通的css才能被浏览器解析；
- 比如JavaScript代码不再只是编写在几个文件中，而是通过模块化的方式，被组成在成百上千个文件中，我们需要通过模块化的技术来管理它们之间的相互依赖；
- 比如项目需要依赖很多的第三方库，如何更好的管理它们（比如管理它们的依赖、版本升级等）；
为了解决上面这些问题，我们需要再去学习一些工具：
- 比如babel、webpack、gulp，配置它们转换规则、打包依赖、热更新等等一些的内容；
- 脚手架的出现，就是帮助我们解决这一系列问题的；

脚手架是什么呢？

传统的脚手架指的是建筑学的一种结构：在搭建楼房、建筑物时，临时搭建出来的一个框架；
编程中提到的脚手架（Scaffold），其实是一种工具，帮我们可以快速生成项目的工程化结构；
- 每个项目作出完成的效果不同，但是它们的基本工程化结构是相似的；
- 既然相似，就没有必要每次都从零开始搭建，完全可以使用一些工具，帮助我们生产基本的工程化模板；
- 不同的项目，在这个模板的基础之上进行项目开发或者进行一些配置的简单修改即可；
- 这样也可以间接保证项目的基本机构一致性，方便后期的维护；
总结：脚手架让项目从搭建到开发，再到部署，整个流程变得快速和便捷；

前端脚手架

对于现在比较流行的三大框架都有属于自己的脚手架：

Vue的脚手架：@vue/cli
Angular的脚手架：@angular/cli
React的脚手架：create-react-app

创建React项目

安装create-react-app
npm install -g create-react-app
创建React项目的命令如下：create-react-app 项目名称
- 注意：项目名称不能包含大写字母
- 另外还有更多创建项目的方式，可以参考GitHub的readme

创建完成后，进入对应的目录，就可以将项目跑起来：
- cd test-react
- npm start
目录结构

可能会遇到的问题

create-react-app : 无法加载文件 D:\nodejs\node_global\create-react-app.ps1，因为在此系统上禁止运行脚本

以管理员身份运行Vscode
在终端输入命令：get-ExecutionPolicy
- 显示Restricted
在终端输入命令：set-ExecutionPolicy RemoteSigned
在终端输入命令：get-ExecutionPolicy
- 显示RemoteSigned

npm 更换淘宝镜像 sill idealTree buildDeps解决方案

npm config set registry https://registry.npm.taobao.org 
npm config get registry

React的组件化开发

React的组件化

组件化思想的应用：
- 有了组件化的思想，我们在之后的开发中就要充分的利用它。
- 尽可能的将页面拆分成一个个小的、可复用的组件。
- 这样让我们的代码更加方便组织和管理，并且扩展性也更强。
React的组件相对于Vue更加的灵活和多样，按照不同的方式可以分成很多类组件：
- 根据组件的定义方式，可以分为：函数组件(Functional Component )和类组件(Class Component)；
- 根据组件内部是否有状态需要维护，可以分成：无状态组件(Stateless Component )和有状态组件(Stateful Component)；
- 根据组件的不同职责，可以分成：展示型组件(Presentational Component)和容器型组件(Container Component)；
这些概念有很多重叠，但是他们最主要是关注数据逻辑和UI展示的分离：
- 函数组件、无状态组件、展示型组件主要关注UI的展示；
- 类组件、有状态组件、容器型组件主要关注数据逻辑；
当然还有很多组件的其他概念：比如异步组件、高阶组件等，我们后续再学习。

类组件

类组件的定义有如下要求：
- 组件的名称是大写字符开头（无论类组件还是函数组件）
- 类组件需要继承自 React.Component
- 类组件必须实现render函数
在ES6之前，可以通过create-react-class 模块来定义类组件，但是目前官网建议我们使用ES6的class类定义。
使用class定义一个组件：
- constructor是可选的，我们通常在constructor中初始化一些数据；
- this.state中维护的就是我们组件内部的数据；
- render() 方法是 class 组件中唯一必须实现的方法；

render函数的返回值

当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一：
React 元素：
- 通常通过 JSX 创建。
- 例如，
  会被 React 渲染为 DOM 节点，会被 React 渲染为自定义组件；
- 无论是
  还是均为 React 元素。
数组或 fragments：使得 render 方法可以返回多个元素。
Portals：可以渲染子节点到不同的 DOM 子树中。
字符串或数值类型：它们在 DOM 中会被渲染为文本节点
布尔类型或 null：什么都不渲染。

函数组件

函数组件是使用function来进行定义的函数，只是这个函数会返回和类组件中render函数返回一样的内容。
函数组件有自己的特点（当然，后面我们会讲hooks，就不一样了）：
- 没有生命周期，也会被更新并挂载，但是没有生命周期函数；
- this关键字不能指向组件实例（因为没有组件实例）；
- 没有内部状态（state）；
我们来定义一个函数组件：

react生命周期

认识生命周期

很多的事物都有从创建到销毁的整个过程，这个过程称之为是生命周期；
React组件也有自己的生命周期，了解组件的生命周期可以让我们在最合适的地方完成自己想要的功能；
生命周期和生命周期函数的关系：
生命周期是一个抽象的概念，在生命周期的整个过程，分成了很多个阶段；
- 比如装载阶段（Mount），组件第一次在DOM树中被渲染的过程；
- 比如更新过程（Update），组件状态发生变化，重新更新渲染的过程；
- 比如卸载过程（Unmount），组件从DOM树中被移除的过程；
React内部为了告诉我们当前处于哪些阶段，会对我们组件内部实现的某些函数进行回调，这些函数就是生命周期函数：
- 比如实现componentDidMount函数：组件已经挂载到DOM上时，就会回调；
- 比如实现componentDidUpdate函数：组件已经发生了更新时，就会回调；
- 比如实现componentWillUnmount函数：组件即将被移除时，就会回调；
- 我们可以在这些回调函数中编写自己的逻辑代码，来完成自己的需求功能；
我们谈React生命周期时，主要谈的类的生命周期，因为函数式组件是没有生命周期函数的；（后面我们可以通过hooks来模拟一些生命周期的回调）

生命周期解析

学习一下最基础、最常用的生命周期函数：

生命周期函数

Constructor
如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。
constructor中通常只做两件事情：
- 通过给 this.state 赋值对象来初始化内部的state；
- 为事件绑定实例（this）；

componentDidMount
componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。
componentDidMount中通常进行哪里操作呢？
- 依赖于DOM的操作可以在这里进行；
- 在此处发送网络请求就最好的地方；（官方建议）
- 可以在此处添加一些订阅（会在componentWillUnmount取消订阅）；

componentDidUpdate
componentDidUpdate() 会在更新后会被立即调用，首次渲染不会执行此方法。
- 当组件更新后，可以在此处对 DOM 进行操作；
- 如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求；（例如，当 props 未发生变化时，则不会执行网络请求）。
componentWillUnmount
componentWillUnmount() 会在组件卸载及销毁之前直接调用。
- 在此方法中执行必要的清理操作；
- 例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等；

不常用生命周期函数

除了上面介绍的生命周期函数之外，还有一些不常用的生命周期函数：
- getDerivedStateFromProps：state 的值在任何时候都依赖于 props时使用；该方法返回一个对象来更新state；
- getSnapshotBeforeUpdate：在React更新DOM之前回调的一个函数，可以获取DOM更新前的一些信息（比如说滚动位置）；
- shouldComponentUpdate：该生命周期函数很常用，但是我们等待讲性能优化时再来详细讲解；
另外，React中还提供了一些过期的生命周期函数，这些函数已经不推荐使用。
更详细的生命周期相关的内容，可以参考官网：https://zh-hans.reactjs.org/docs/react-component.html

认识组件的嵌套

组件之间存在嵌套关系：
- 在之前的案例中，我们只是创建了一个组件App；
- 如果我们一个应用程序将所有的逻辑都放在一个组件中，那么这个组件就会变成非常的臃肿和难以维护；
- 所以组件化的核心思想应该是对组件进行拆分，拆分成一个个小的组件；
- 再将这些组件组合嵌套在一起，最终形成我们的应用程序；
上面的嵌套逻辑如下，它们存在如下关系：
- App组件是Header、Main、Footer组件的父组件；
- Main组件是Banner、ProductList组件的父组件；

组件通信

认识组件间的通信

在开发过程中，我们会经常遇到需要组件之间相互进行通信：
- 比如App可能使用了多个Header，每个地方的Header展示的内容不同，那么我们就需要使用者传递给Header一些数据，让其进行展示；
- 又比如我们在Main中一次性请求了Banner数据和ProductList数据，那么就需要传递给他们来进行展示；
- 也可能是子组件中发生了事件，需要由父组件来完成某些操作，那就需要子组件向父组件传递事件；
总之，在一个React项目中，组件之间的通信是非常重要的环节；
父组件在展示子组件，可能会传递一些数据给子组件：
- 父组件通过属性=值的形式来传递给子组件数据；
- 子组件通过 props 参数获取父组件传递过来的数据；

父组件传递子组件 - 类组件和函数组件

参数propTypes

对于传递给子组件的数据，有时候我们可能希望进行验证，特别是对于大型项目来说：
- 当然，如果你项目中默认继承了Flow或者TypeScript，那么直接就可以进行类型验证；
- 但是，即使我们没有使用Flow或者TypeScript，也可以通过 prop-types 库来进行参数验证；
从 React v15.5 开始，React.PropTypes 已移入另一个包中：prop-types 库

**更多的验证方式，可以参考官网zh-hans.reactjs.org/docs/typech…
- 比如验证数组，并且数组中包含哪些元素；
- 比如验证对象，并且对象中包含哪些key以及value是什么类型；
- 比如某个原生是必须的，使用 requiredFunc: PropTypes.func.isRequired

如果没有传递，我们希望有默认值呢？
- 我们使用defaultProps就可以了

子组件传递父组件

某些情况，我们也需要子组件向父组件传递消息：
- 在vue中是通过自定义事件来完成的；
- 在React中同样是通过props传递消息，只是让父组件给子组件传递一个回调函数，在子组件中调用这个函数即可；
我们这里来完成一个案例：
- 将计数器案例进行拆解；
- 将按钮封装到子组件中：CounterButton；
- CounterButton发生点击事件，将内容传递到父组件中，修改counter的值；
这里省略了代码

组件通信案例练习

插槽（slot）

React中的插槽（slot）

在开发中，我们抽取了一个组件，但是为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的div、span等等这些元素。
我们应该让使用者可以决定某一块区域到底存放什么内容。

这种需求在Vue当中有一个固定的做法是通过slot来完成的，React呢？
React对于这种需要插槽的情况非常灵活，有两种方案可以实现：
- 组件的children子元素；
- props属性传递React元素；

children实现插槽

每个组件都可以获取到 props.children：它包含组件的开始标签和结束标签之间的内容。

props实现插槽

通过children实现的方案虽然可行，但是有一个弊端：通过索引值获取传入的元素很容易出错，不能精准的获取传入的原生；
另外一个种方案就是使用 props 实现：
- 通过具体的属性名，可以让我们在传入和获取时更加的精准

Context

Context应用场景

非父子组件数据的共享：
- 在开发中，比较常见的数据传递方式是通过props属性自上而下（由父到子）进行传递。
- 但是对于有一些场景：比如一些数据需要在多个组件中进行共享（地区偏好、UI主题、用户登录状态、用户信息等）。
- 如果我们在顶层的App中定义这些信息，之后一层层传递下去，那么对于一些中间层不需要数据的组件来说，是一种冗余的操作。
我们实现一个一层层传递的案例：
- 我这边顺便补充一个小的知识点：Spread Attributes
但是，如果层级更多的话，一层层传递是非常麻烦，并且代码是非常冗余的：
- React提供了一个API：Context；
- Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props；
- Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言

Context相关API

React.createContext
- 创建一个需要共享的Context对象：
- 如果一个组件订阅了Context，那么这个组件会从离自身最近的那个匹配的 Provider 中读取到当前的context值；
- defaultValue是组件在顶层查找过程中没有找到对应的Provider，那么就使用默认值

Context.Provider
- 每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化：
- Provider 接收一个 value 属性，传递给消费组件；
- 一个 Provider 可以和多个消费组件有对应关系；
- 多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据；
- 当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染；

Class.contextType
- 挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象：
- 这能让你使用 this.context 来消费最近 Context 上的那个值；
- 你可以在任何生命周期中访问到它，包括 render 函数中；

Context.Consumer
- 这里，React 组件也可以订阅到 context 变更。这能让你在函数式组件中完成订阅 context。
- 这里需要函数作为子元素（function as child）这种做法；
- 这个函数接收当前的 context 值，返回一个 React 节点；

Context代码演练

Context的基本使用
什么时候使用默认值defaultValue呢？

什么时候使用Context.Consumer呢？
- 1.当使用value的组件是一个函数式组件时；
- 2.当组件中需要使用多个Context时；

setState

为什么使用setState

开发中我们并不能直接通过修改state的值来让界面发生更新：
- 因为我们修改了state之后，希望React根据最新的State来重新渲染界面，但是这种方式的修改React并不知道数据发生了变化；
- React并没有实现类似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式来监听数据的变化；
- 我们必须通过setState来告知React数据已经发生了变化；
疑惑：在组件中并没有实现setState的方法，为什么可以调用呢？
- 原因很简单，setState方法是从Component中继承过来的。

setState异步更新

setState的更新是异步的？
- 最终打印结果是Hello World；
- 可见setState是异步的操作，我们并不能在执行完setState之后立马拿到最新的state的结果
为什么setState设计为异步呢？
- setState设计为异步其实之前在GitHub上也有很多的讨论；
- React核心成员（Redux的作者）Dan Abramov也有对应的回复，有兴趣的同学可以参考一下； -github.com/facebook/re…
我对其回答做一个简单的总结：
setState设计为异步，可以显著的提升性能；
- 如果每次调用 setState都进行一次更新，那么意味着render函数会被频繁调用，界面重新渲染，这样效率是很低的；
- 最好的办法应该是获取到多个更新，之后进行批量更新；
如果同步更新了state，但是还没有执行render函数，那么state和props不能保持同步；
- state和props不能保持一致性，会在开发中产生很多的问题；

如何获取异步的结果

那么如何可以获取到更新后的值呢？
方式一：setState的回调
- setState接受两个参数：第二个参数是一个回调函数，这个回调函数会在更新后会执行；
- 格式如下：setState(partialState, callback)

当然，我们也可以在生命周期函数

setState一定是异步吗？（React18之前

其实分成两种情况：
- 在组件生命周期或React合成事件中，setState是异步；
- 在setTimeout或者原生dom事件中，setState是同步；
验证一：在setTimeout中的更新

验证二：原生DOM事件：

setState默认是异步的（React18之后）

在React18之后，默认所有的操作都被放到了批处理中（异步处理）。
如果希望代码可以同步会拿到，则需要执行特殊的flushSync操作

react从入门到进阶笔记