study/ZiuChen.github.io

Fork 0

mirror of https://github.com/ZiuChen/ZiuChen.github.io.git synced 2025-08-17 23:19:55 +08:00

ZiuChen 7d0abfbf8b docs: React note update

2023-04-17 21:08:39 +08:00

55 KiB

Raw Blame History

React

邂逅React

React开发依赖

react 包含React的核心代码
react-dom 将React渲染到不同平台需要的核心代码
babel 将JSX转换成React代码的工具

为什么要拆分成这么多的包？

不同的库各司其职，让库变得纯粹
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
是目前前端使用非常广泛的编译器、转换器（Compiler/Transformer）
提供对ES6语法的Polyfill，将ES6语法转为大多数浏览器都支持的ES5语法

二者之间的联系

默认情况下React开发可以不使用Babel
但是我们不可能使用React.createElement来编写代码
通过Babel，我们可以直接编写JSX（JavaScript XML），让Babel帮我们转化为React.createElement

React初体验

我们通过CDN方式引入react、react-dom、babel这三个依赖

并且创建#root根节点，作为渲染React组件的容器，再新建一个script标签，键入以下内容

<div id="root"></div>
<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" crossorigin></script>
<script type="text/babel">
  ReactDOM.render(<div>Hello, React!</div>, document.querySelector('#root'))
</script>

这时，一个内容为Hello, React!的div标签就被渲染到页面上了

需要注意的是：ReactDOM.render这种写法适用于React18之前，在React18之后建议用下面的代码渲染根节点：

const root = ReactDOM.createRoot(document.querySelector('#root'))
root.render(<h1>Hello, React!</h1>)

第一个React程序

设想我们现在有这样一个需求：点击按钮使文本Hello, World!变为Hello, React!

我们很容易就能写出如下代码：

const root = ReactDOM.createRoot(document.querySelector('#root'))
let msg = 'Hello, World!'

render() // initial render

function handleChangeClick() {
  msg = 'Hello, React!'
}

root.render(
  <div>
    <h1>{msg}</h1>
    <button onClick={handleChangeClick}>Change Text</button>
  </div>
)

在Vue中，如果我们对数据进行了修改，Vue的数据响应式会自动帮我们完成视图的更新

然而在React中，当我们修改了数据需要通知React，让React重新渲染视图。在这里，我们可以把渲染的过程封装为一个函数，方便我们重复调用，触发重新渲染

const root = ReactDOM.createRoot(document.querySelector('#root'))
let msg = 'Hello, World!'

render() // initial render

function handleChangeClick() {
  msg = 'Hello, React!'
  render() // re-render
}

function render() {
  root.render(
    <div>
      <h1>{msg}</h1>
      <button onClick={handleChangeClick}>Change Text</button>
    </div>
  )
}

这个案例中，我们使用{}语法，将动态的JS语法嵌入到JSX代码中

组件化开发

React有两种组件：类组件与函数组件，React18+推荐使用函数组件+Hooks

类组件

我们使用类组件来逐步重构上面的案例：

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      msg: 'Hello, World!'
    }
  }
  render() {
    return <h2>{this.state.msg}</h2>
  }
}

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

类组件必须实现render方法，render方法返回值为后续React渲染到页面的内容
组件内数据分为两类
- 参与页面更新的数据
  - 当数据变化时，需要触发组件重新渲染
- 不参与页面更新的数据
  - 数据不会变化，或变化后也不需要重新渲染视图
需要触发视图重新渲染的数据，我们将其成为：参与数据流
- 定义在对象的state属性中
- 可以通过在构造函数中通过 this.state = { name: 'Ziu' } 来定义状态
- 当数据发生变化，可以调用 this.setState 来更新数据，通知React执行视图更新
- update操作时，会重新调用render函数，使用最新的数据来渲染界面

:::success 需要注意的是，在constructor中我们调用了super，因为App类是继承自React.Component类，调用super即调用了其父类的构造函数，让我们的App组件可以继承一些内置属性/方法如state setState render :::

至此我们完成了数据的迁移，下面我们来完成事件函数的迁移。

有了之前的介绍，我们很容易的可以写出下面的代码：

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      msg: 'Hello, World!'
    }
  }
  changeText() {
    this.setState({
      msg: 'Hello, React!'
    })
  }
  render() {
    return (
      <div>
        <h2>{this.state.msg}</h2>
        <button onClick={this.changeText}>Change Text</button>
      </div>
    )
  }
}

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

我们可以写一个实例方法changeText来修改msg，然而，此时我们点击按钮后发现，案例不能正常工作。

如果在changeText中打log，会发现函数被正常触发了，但是状态没有更新

为什么this.setState失效了？这和this的绑定有关：绑定的changeText在被调用时，向上找this找到的是全局的this即undefined

这种情况有点类似于下面的例子：

const app = new App()
app.changeText() // this => app

const func = app.changeText
func() // this => undefined

在非严格模式下，直接调用func时的this指向的是window，严格模式下则为undefined

为了解决this绑定的问题，我们需要显式把函数调用绑定给当前组件，这时组件就可以正常工作了。

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      msg: 'Hello, World!'
    }
  }
  changeText() {
    this.setState({
      msg: 'Hello, React!'
    })
  }
  render() {
    return (
      <div>
        <h2>{this.state.msg}</h2>
        <button onClick={this.changeText.bind(this)}>Change Text</button>
      </div>
    )
  }
}

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

提前绑定this

在render函数中频繁通过.bind毕竟不太优雅，好在也有另一种方式：可以在constructor中提前对实例方法进行this绑定：

...
constructor() {
  super()
  this.state = {
    msg: 'Hello, World!'
  }
  this.changeText = this.changeText.bind(this)
}
render() {
  ...
    <button onClick={this.changeText}>Change Text</button>
  ...
}
...

列表渲染

可以通过循环，将数组渲染到视图中

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      movieList: [
        'The Shawshank Redemption',
        'The Godfather',
        'The Godfather: Part II',
        'The Dark Knight'
      ]
    }
  }

  render() {
    return (
      <ul>
        {this.state.movieList.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    )
  }
}

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

需要注意的是，这里绑定的key的功能类似于Vue中的特殊属性key，它用来帮助React对列表渲染进行更高效的更新。

计数器案例

结合之前的知识，可以实现一个简单的计数器

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      count: 0
    }
    this.addCount = this.addCount.bind(this)
    this.subCount = this.subCount.bind(this)
  }

  addCount() {
    this.setState({
      count: this.state.count + 1
    })
  }

  subCount() {
    this.setState({
      count: this.state.count - 1
    })
  }

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

    return (
      <div>
        <h1>Count: {count}</h1>
        <button onClick={this.addCount}>Add</button>
        <button onClick={this.subCount}>Sub</button>
      </div>
    )
  }
}

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

认识JSX语法

认识JSX语法
JSX基本使用
JSX事件绑定
JSX条件渲染
JSX列表渲染
JSX的原理与本质

是因为我们给script标签添加了type="text/babel"属性，浏览器不会对这个script进行解析，当babel被加载完成后，babel会在页面中寻找type="text/babel"的script标签进行转义，转义后的代码才会被浏览器执行

JSX: JavaScript Extension / JavaScript XML
All in JS
不同于Vue的模板语法不需要专门学习模板语法中的指令(v-for/v-if/v-bind)

JSX的使用

书写JSX的规范与注意事项

JSX的顶层只能有一个根元素元素必须包裹在单独的闭合标签中
- 后续会接触到Fragment标签 Vue3也是将元素包裹在了Fragments标签中
为了方便阅读通常在JSX外层包裹一个小括号()方便阅读

JSX的注释

在JSX中编写注释，需要以{/* ... */}的形式，在.jsx/.tsx文件中，通过快捷键就可以快捷的生成注释内容

本质上是通过花括号语法{}嵌入了一段JavaScript表达式，在表达式中书写注释

...
return (
  <div>
    {/* Some Comment... */}
    <h1>Count: {count}</h1>
    <button onClick={this.addCount}>Add</button>
    <button onClick={this.subCount}>Sub</button>
  </div>
)
...

JSX嵌入变量作为子元素

可以通过花括号语法将变量内容嵌入到JSX语法中：

const message = 'Hello, React!'
const arr = ['abc', 'cba', 'nba']

return (
  <div>
    <h1>{ message }</h1>
    <div>{ arr }</div>
  </div>
)

变量类型为number string array类型时，可以直接展示
变量类型为null undefined boolean类型时，内容为空
- 如果希望可以展示null/undefined/boolean类型，需要通过.toString()方法将其转为字符串
- 空字符串拼接、String构造函数等方式
Object对象类型不能作为子元素 (Objects are not valid as a React child)

下例中，只有number类型会被正常展示，而其余变量则不会展示在视图中

render() {
  const number = 123
  const n = null
  const u = undefined
  const b = true

  return (
    <div>
      <div>
        Number: {number}
      </div>
      <div>
        Null: {n}
      </div>
      <div>
        Undefined: {u}
      </div>
      <div>
        Boolean: {b}
      </div>
    </div>
  )
}

将对象类型变量嵌入到JSX语法中，React会抛出错误：

...
render() {
  const obj = { name: 'Ziu' }
  return (
    <div>
      { obj }
    </div>
  )
}
...

JSX的属性绑定

在Vue中我们通过v-bind绑定属性
在React中如何绑定元素属性？
title src href class 内联style等

下例中，我们通过花括号语法对元素的属性进行了动态绑定，点击按钮可以切换className状态

同时，动态绑定的内联样式也会发生改变，通过花括号语法动态绑定style属性

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      isActive: false,
      title: 'Description'
    }
    this.changeActive = this.changeActive.bind(this)
  }

  changeActive() {
    this.setState({
      isActive: !this.state.isActive
    })
  }

  render() {
    const { isActive, title } = this.state
    const classList = ['title', isActive ? 'active' : '']

    return (
      <div>
        <div
          className={classList.join(' ')}
          title={title}
          style={{ color: isActive ? 'red' : 'blue' }}
        >
          Hello, React!
        </div>
        <button onClick={this.changeActive}>Change Active</button>
      </div>
    )
  }
}

当我们通过脚手架创建项目时，可以使用第三方库来帮我们完成className的绑定

classnames库 pnpm add classnames
提供了多种创建className的语法

JSX事件绑定

先前的例子中，我们已经通过onClick给按钮绑定过事件处理函数了，其中涉及了this绑定

回顾一下this的四种绑定规则：

默认绑定独立执行 foo() this => undefined
隐式绑定被一个对象执行 obj.foo() this => obj
显式绑定 call/bind/apply foo.call('aaa') this => String('aaa')
new绑定 new Foo() 创建一个新对象，并且赋值给this

除了之前通过function + bind绑定事件处理函数的方式，还可以通过箭头函数来帮我们完成处理

箭头函数的内部使用this时会自动向上层作用域查找this 实际开发中这种方式并不常用

...
changeActive = () => {
  this.setState({
    isActive: !this.state.isActive
  })
}
...

相比之下更推荐使用的，是下面这种方式：

...
<button onClick={() => this.changeActive()}>Change Active</button>
...

这样书写有几种好处：

给事件处理函数传递参数更方便
书写更方便不必主动考虑this绑定问题

它的原理是，我们对外暴露的本质上是一个箭头函数，当调用箭头函数时，本质上是执行this.changeActive，这是一种隐式绑定，找到的this为当前组件实例

事件绑定参数传递

Event参数传递
额外参数传递

事件回调函数的第一个默认参数就是Event对象，这个Event对象是经过React包装后的，但是原生的属性都包含在内，React对其进行了一些扩展

...
changeActive(ev) {
  console.log('Event', ev)
}

render() {
  return (
    <div>
      {/* event将作为默认入参传递给changeActive */}
      <button onClick={this.changeActive}>Change Active</button>

      {/* 通过箭头函数绑定事件监听回调函数时 需要手动透传一下event */}
      <button onClick={(ev) => this.changeActive(ev)}>Change Active</button>
    </div>
  )
}
...

当我们需要传递额外的参数时，通过箭头函数传递也更容易：

changeActive(ev, name, age) {
  console.log('Event', ev)
  console.log('Name', name)
  console.log('Age', age)
}

render() {
  return (
    <div>
      {/* NOT Recommand */}
      <button onClick={this.changeActive.bind(this, 'Ziu', 18)}>Change Active</button>
      {/* Recommand */}
      <button onClick={(ev) => this.changeActive(ev, 'Ziu', 18)}>Change Active</button>
    </div>
  )
}

需要注意，当通过.bind传递额外参数时，最后一个参数才是默认传递的Event对象，这会导致非预期行为

> Event 'Ziu'
> Name 18
> Age {Event}

JSX事件绑定案例

创建一个Tab栏，选中哪个选项，哪个选项被激活切换为红色，同一时间仅有一个激活项目

结合之前学习的内容，很容易就可以写出下述代码：

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      activeIndex: 0,
      tabList: ['Home', 'Recommend', 'Hot', 'User']
    }
  }

  changeActive(index) {
    this.setState({
      activeIndex: index
    })
  }

  render() {
    const { activeIndex, tabList } = this.state

    return (
      <div>
        <div className="tabs">
          {tabList.map((item, index) => (
            <button
              className={'tab ' + index === activeIndex ? 'active' : ''}
              style={{
                color: index === activeIndex ? 'red' : 'black'
              }}
              key={index}
              onClick={() => this.changeActive(index)}
            >
              {item}
            </button>
          ))}
        </div>
      </div>
    )
  }
}

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

条件渲染

控制元素按照某种条件渲染，以加载状态为例

列表未加载出来时，展示加载中，加载完毕则渲染完整内容：

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      isLoading: true
    }
  }

  changeLoading() {
    this.setState({
      isLoading: !this.state.isLoading
    })
  }

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

    return (
      <div>
        {isLoading ? (
          <div className="loading"> Loading ... </div>
        ) : (
          <div className="list">Some Content</div>
        )}
        <button onClick={() => this.changeLoading()}>Toggle Loading</button>
      </div>
    )
  }
}

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

常用的条件渲染方式

if/else/else-if
- 适合判断逻辑较复杂的情况将条件渲染抽离出来
三元运算符 ?:
- 适合判断逻辑简单的情况
逻辑与运算符 &&
- 如果条件成立则渲染某个组件，否则什么内容都不渲染
可选链 user?.info?.name

下例中通过逻辑与运算符&&决定VIP标签是否展示在视图中

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      isVip: false
    }
  }

  changeVip() {
    this.setState({
      isVip: !this.state.isVip
    })
  }

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

    return (
      <div>
        <div class="user">
          <span>username: Ziu</span>
          {isVip && <span className="vip-banner"> VIP </span>}
        </div>

        <button onClick={() => this.changeVip()}>Toggle Vip</button>
      </div>
    )
  }
}

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

在React中简单写一个"v-show"

v-show是Vue提供的语法糖，不同于v-if，它只切换元素的display属性。

下面我们在React中简单复现一个v-show的效果：

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      isShow: true
    }
  }

  changeShow() {
    this.setState({
      isShow: !this.state.isShow
    })
  }

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

    return (
      <div>
        <div style={{ display: isShow ? '' : 'none' }}>Target Element</div>
        <button onClick={() => this.changeShow()}>Toggle Show</button>
      </div>
    )
  }
}

实际使用中，将其封装为hooks来调用更具通用性，也更方便管理

列表渲染中的高阶函数

filter函数过滤器
slice函数分页
sorc函数排序
...

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      stuList: [
        { name: 'Ziu', age: 18, score: 88 },
        { name: 'Kobe', age: 19, score: 59 },
        { name: 'Why', age: 20, score: 61 },
        { name: 'James', age: 21, score: 99 }
      ]
    }
  }

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

    // 及格的学生
    const passStuList = stuList.filter((item) => item.score >= 60)

    // 分数最高的两个学生
    const top2StuList = stuList.sort((a, b) => b.score - a.score).slice(0, 2)

    return (
      <div>
        <div className="list">
          {stuList.map(({ name, age, score }) => (
            <div className="item" key={name}>
              <span className="name">{name}</span>
              <span className="age">{age}</span>
              <span className="score">{score}</span>
            </div>
          ))}
        </div>
      </div>
    )
  }
}

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

JSX的本质

JSX的转换过程

假设我们有下面的JSX代码：

class App extends React.Component {
  constructor() {
    super()
  }

  render() {
    const page = (
      <div className="page">
        <div className="header">Header</div>
        <div className="content">
          Content
          <div className="banner">Banner</div>
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
          </ul>
        </div>
        <div className="footer">Footer</div>
      </div>
    )
    console.log(page)
    return <div>{page}</div>
  }
}

通过JSX语法描述出来的template会经过Babel转化，转化为JavaScript树的数据结构

在控制台中我们可以看到，子节点都存放进了父节点的props.children中

虚拟DOM树

JSX仅仅是React.createElement(component, props, ...children)的语法糖

所有的JSX语法都会被Babel转化为这样的命令式语法

.createElement函数的参数

type
- 当前ReactElement的类型
- 如果是标签元素，值为字符串如："div"
- 如果是组件元素，那么值为组件的名称
config
- 所有JSX中绑定的属性都在config中以键值对的形式存储
- 例如className => class

我们借助Babel官网的Playground来检查一下JSX语法的转化

import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const page = /*#__PURE__*/_jsxs("div", {
  className: "page",
  children: [/*#__PURE__*/_jsx("div", {
    className: "header",
    children: "Header"
  }), /*#__PURE__*/_jsxs("div", {
    className: "content",
    children: ["Content", /*#__PURE__*/_jsx("div", {
      className: "banner",
      children: "Banner"
    }), /*#__PURE__*/_jsxs("ul", {
      children: [/*#__PURE__*/_jsx("li", {
        children: "Item 1"
      }), /*#__PURE__*/_jsx("li", {
        children: "Item 2"
      }), /*#__PURE__*/_jsx("li", {
        children: "Item 3"
      }), /*#__PURE__*/_jsx("li", {
        children: "Item 4"
      }), /*#__PURE__*/_jsx("li", {
        children: "Item 5"
      })]
    })]
  }), /*#__PURE__*/_jsx("div", {
    className: "footer",
    children: "Footer"
  })]
});
console.log(page);

这时经过Babel转义后的纯JS函数，这段函数可以在浏览器中直接运行

如果移除了相关JSX代码，并将他们都替换为React.createElement函数调用，那么得到的代码也可以直接在浏览器中运行。Babel帮助我们完成了转化，提高了开发效率，相比于通过调用React.createElement来描述视图，通过JSX编写的代码更加容易维护

这些代码最终形成的就是虚拟DOM树，React可以将虚拟DOM渲染到页面上，形成真实DOM

虚拟DOM允许React可以通过diff算法，高效地对真实DOM树进行更新

声明式编程

虚拟DOM帮我们从命令式编程转到了声明式编程的模式
对虚拟DOM作何处理，如何渲染是由React决定的，由于做了一层抽象，那么同样可以将虚拟DOM渲染成原生组件（React Native）

购物车案例

下面写一个经典的购物车案例

function formatPrice(price) {
  return `$ ${price.toFixed(2)}`
}

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      books: [
        { name: 'book1', author: 'author1', price: 100, count: 0 },
        { name: 'book2', author: 'author2', price: 200, count: 0 },
        { name: 'book3', author: 'author3', price: 300, count: 0 },
        { name: 'book4', author: 'author4', price: 400, count: 0 }
      ]
    }
  }

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

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

  getTotal() {
    const { books } = this.state
    return books.reduce((acc, { price, count }) => acc + price * count, 0)
  }

  renderBookCart() {
    const { books } = this.state
    const total = this.getTotal()
    return (
      <div className="shopping-cart">
        <h1>Shopping Cart</h1>
        <div className="books">
          {books.map(({ name, author, price, count }, index) => (
            <div className="book" key={name}>
              <span className="idx">{index + 1}</span>
              <span className="name">{name}</span>
              <span className="author">{author}</span>
              <span className="price">{formatPrice(price)}</span>
              <span className="counter">
                <button onClick={() => this.changeCount(index, -1)} disabled={count <= 0}>
                  -
                </button>
                <span className="counter-number">{count}</span>
                <button onClick={() => this.changeCount(index, 1)}>+</button>
              </span>
              <button onClick={() => this.removeItem(index)}>Delete</button>
            </div>
          ))}
        </div>
        <div className="total">
          <span>Total: {formatPrice(total)}</span>
        </div>
      </div>
    )
  }

  renderEmptyTip() {
    return <div className="empty">Shopping Cart is Empty</div>
  }

  render() {
    const isEmpty = this.state.books.length === 0

    return !isEmpty ? this.renderBookCart() : this.renderEmptyTip()
  }
}

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

React项目开发

认识脚手架工具
create-react-app
创建React项目
Webpack的配置

React脚手架

类似于Vue提供的 pnpm create vite 创建一个模板，React也可以通过 create-react-app 来初始化一个空的React模板

pnpm add create-react-app -g # 全局安装create-react-app
create-react-app react-app # 创建一个名为react-app的React项目
# 删除node_modules package-lock.json
cd react-app
pnpm i # 使用pnpm重新安装依赖

// index.js
import ReactDOM from 'react-dom/client'
import App from './App'

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

// App.jsx
import { Component } from 'react'

export default class App extends Component {
  render() {
    return <div>Hello, React!</div>
  }
}

React组件化开发

React组件生命周期
React组件间通信
React组件插槽
React非父子的通信
setState使用详解

组件化是React的核心思想之一，组件化是一个抽象的过程，将大的应用程序抽象为多个小的组件，最终形成组件树

分而治之，让代码更容易组织和管理

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

根据组件定义方式，可以分为：函数组件(Functional Component)与类组件(Class Component)
根据组件内部是否有状态需要维护，可以分为：无状态组件(Stateless Component)和有状态组件(Stateful Component)
根据组件的不同职责，可以分为：展示型组件(Presentational Component)和容器型组件(Container Component)

除此之外，还有异步组件、高阶组件等...

类组件

类组件的定义有以下要求：
- 组件的名称必须为大写（无论是类组件还是函数组件）
- 类组件需要继承自React.Component
- 类组件内必须实现render函数
通过class关键字定义一个组件
- constructor是可选的，通常需要在constructor中初始化一些数据
- this.state中维护的数据就是组件内部的数据
- render方法是class组件中唯一必须实现的方法

render函数

render函数在组件第一次渲染时被调用
当this.props或this.state发生变化时被调用

被调用时组件内会检查this.props和this.state是否发生变化，并且返回下面的返回值之一：

React元素
- 通常通过JSX创建
- 例如<div />会被React渲染为DOM节点，而<SomeComponent />会被React渲染为自定义组件
- 无论是<div />还是<SomeComponent />，他们都为React元素
数组或Fragments组件
- 允许通过render方法同时返回多个元素
字符串或数字
- 元素会被渲染
boolean/null/undefined类型
- 元素不会被渲染

函数组件

函数组件不需要继承自任何父类，函数的返回值相当于render函数的返回值，表示组件要渲染的内容

修改前文中编写的App.jsx即可：

// App.jsx
export default function App() {
  return <div>Hello, React!</div>
}

函数组件是使用function定义的函数，函数的返回值会返回与render函数相同的内容，表示组件要渲染的内容
函数组件有自己的特点（在无hooks的情况下，引入hooks后函数组件与类组件一样强大）
- 没有生命周期，也会被更新并挂在，但是没有生命周期函数
- this关键字不能指向组件实例，因为没有组件实例
- 没有内部状态（state）

组件的生命周期

我们需要在组件的不同生命周期中执行不同的操作，比如添加解除监听器、发起网络请求等

结合上图，解读一下组件的完整生命周期：

组件挂载后调用构造方法 constructor
执行 render 方法
组件挂载完毕 componentDidMount
后续，当props发生修改或调用了setState触发state改变或调用forceUpdate触发组件更新
- 重新执行render函数根据修改后的最新状态更新视图
- React帮我们更新DOM和refs
- 更新回调 componentDidUpdate 被调用
组件卸载一般是条件渲染切换路由时发生卸载
组件被卸载前 componentWillUnmount 被调用
- 可以用来执行一些清理副作用的操作
- 如解除监听器等

总结一下常用的生命周期钩子：

componentDidMount 组件挂载后
componentDidUpdate 组件更新后
componentWillUnmount 组件卸载前

// LifeCycle.jsx
import { Component } from 'react'

export default class LifeCycle extends Component {
  constructor() {
    super()
    this.state = {
      count: 0
    }
  }

  addCount = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  componentDidMount() {
    console.log('LifeCycle componentDidMount')
  }

  componentDidUpdate() {
    console.log('LifeCycle componentDidUpdate')
  }

  componentWillUnmount() {
    console.log('LifeCycle componentWillUnmount')
  }

  render() {
    console.log('LifeCycle render')
    return (
      <div>
        <h1>LifeCycle</h1>
        <p>{this.state.count}</p>
        <button onClick={this.addCount}>+</button>
      </div>
    )
  }
}

constructor

一般来讲 constructor 中只完成两件事情

给this.state赋初值初始化组件内部状态
为事件处理函数绑定实例(.bind(this))

如果不初始化state或不进行方法绑定，则不需要为React组件实现构造函数

componentDidMount

该生命周期钩子会在组件挂载后被立即调用，相当于Vue中的onMounted

在该生命周期钩子中可以获取到组件的DOM结构，通常在其中完成以下操作：

依赖于DOM的操作需要操作DOM
在此处发送网络请求 (Official Recommend)
在此处添加一些订阅监听回调 (在 componentWillUnmount 中取消订阅)

componentDidUpdate

会在组件更新后被立即调用，首次渲染不会执行此方法

每次组件发生更新后，可以在此回调中对DOM进行操作
如果对更新前后的props进行了比较，也可以选择在此处进行网络请求
- 比如当props未发生改变，则不执行网络请求

componentWillUnmount

组件卸载及销毁之前调用

在此回调中执行必要的清理操作
例如清除timer 取消网络请求或取消在 componentDidMount 中创建的订阅等

不常用的生命周期

static getDeivedStateFromProps
- state的值在任何时候都依赖props时使用，该方法返回一个对象来更新state
shouldComponentUpdate
- 对外部条件进行显式比较决定是否需要对组件进行更新
- 在此生命周期回调中返回false时不会触发re-render 可以完成一些性能优化
getSnapshotBeforeUpdate
- 在更新前获取快照用于更新DOM前对部分数据进行保存
- 比如在DOM更新前获取并保存当前滚动位置

组件间通信

组件间通过props通信

父组件通过直接在子组件上添加属性 title={someValue} 传递数据
子组件中通过 props 参数获取父组件传递来的数据

需要注意的是，子组件中需要通过 super(props) 将props注册给父类，这样才能通过this.props获取到props

但是默认情况下React帮我们完成了这个操作，我们也就不必手动在constructor写了

// Header.jsx
import React, { Component } from 'react'

export default class Header extends Component {
  // constructor(props) {
  //   super(props)
  // }

  render() {
    const { title, count, tabs } = this.props

    return (
      <div>
        <h2>Title: {title}</h2>
        <h2>Count: {count}</h2>
        <ul>
          {tabs.map((tab, index) => (
            <li key={index}>{tab}</li>
          ))}
        </ul>
      </div>
    )
  }
}

// App.jsx
import React, { Component } from 'react'
import Header from './components/Header'

export default class App extends Component {
  render() {
    return (
      <div>
        <Header title="Custom Title" count={1} tabs={['Home', 'Category', 'User']} />
      </div>
    )
  }
}

上文中的例子我们从父组件向子组件传递数据，但是数据都为静态的

我们再完成一个动态数据的绑定，用到了axios请求网络数据，并将数据动态传递给子组件

在父组件的 componentDidMount 中发起网络请求，获取到 postList 后通过props动态传递给子组件 Content 展示出来

// Content.jsx
import React, { Component } from 'react'

export default class Content extends Component {
  render() {
    const { postList } = this.props

    return (
      <div>
        <ul>
          {postList.map((post) => {
            return <li key={post.id}>{post.title}</li>
          })}
        </ul>
      </div>
    )
  }
}

// App.jsx
import React, { Component } from 'react'
import axios from 'axios'
import Content from './components/Content'

export default class App extends Component {
  constructor() {
    super()
    this.state = {
      postList: []
    }
  }

  componentDidMount() {
    axios.get('https://jsonplaceholder.typicode.com/posts').then((res) => {
      this.setState({
        postList: res.data
      })
    })
  }

  render() {
    const { postList } = this.state
    return (
      <div>
        <Content postList={postList} />
      </div>
    )
  }
}

子组件向父组件通信

除了父组件向下传递数据，子组件也需要向上传递数据给父组件。

在React中是通过父组件提供给子组件一个回调函数，在子组件中调用回调函数，从而达到子组件向父组件通信的目的

父组件在提供数据状态 count 的同时，也提供了增减 count 的回调函数 addCount 和 subCount，子组件通过调用回调即可修改状态值

// Counter.jsx
import React, { Component } from 'react'

export default class Counter extends Component {
  render() {
    const { count, addCount, subCount } = this.props
    return (
      <div>
        <button onClick={subCount}>-</button>
        <span>{count}</span>
        <button onClick={addCount}>+</button>
      </div>
    )
  }
}

// App.jsx
import React, { Component } from 'react'
import Counter from './components/Counter'

export default class App extends Component {
  constructor() {
    super()
    this.state = {
      count: 0
    }
  }

  addCount = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  subCount = () => {
    this.setState({
      count: this.state.count - 1
    })
  }

  render() {
    const { count } = this.state
    return (
      <div>
        <Counter count={count} addCount={this.addCount} subCount={this.subCount}></Counter>
      </div>
    )
  }
}

参数propTypes

我们可以对props传递值的类型做限制（目前官方已不再推荐使用prop-types 建议直接上TypeScript）

如果项目中默认集成了Flow或TypeScript，可以直接进行类型验证
如果没有集成，则可以通过 prop-types 库来进行参数类型验证
从React v15.5起，React.PropTypes独立成为了一个npm包 prop-types 库

pnpm add prop-types

以之前的类组件 Header 为例，为其添加类型限制：

// Header.jsx
import React, { Component } from 'react'
import PropTypes from 'prop-types'

export default class Header extends Component {
  // constructor(props) {
  //   super(props)
  // }

  render() {
    const { title, count, tabs } = this.props

    return (
      <div>
        <h2>Title: {title}</h2>
        <h2>Count: {count}</h2>
        <ul>
          {tabs.map((tab, index) => (
            <li key={index}>{tab}</li>
          ))}
        </ul>
      </div>
    )
  }
}

Header.propTypes = {
  title: PropTypes.string.isRequired,
  count: PropTypes.number.isRequired,
  tabs: PropTypes.array.isRequired
}

Header.defaultProps = {
  title: 'Default Title',
  count: 0
}

可以直接在组件类上添加.propsType为其添加类型检查
也可以添加.defaultProps为其传入默认值

需要注意的是，这里的类型限制和Vue做的defineProps类型限制是类似的，如果没有IDE Extension做额外检查，其类型检查都是在运行时进行的

如果props类型发生不匹配，在运行时会在控制台抛出错误，而编译是可以正常完成的

Warning: Failed prop type: Invalid prop title of type number supplied to Header, expected string.

相比之下，TypeScript可以完成静态的类型检查，帮助我们更早的发现错误

组件通信案例 Tab栏切换

展示一个Tabs，点击切换页面，并切换不同的Tab激活状态。

切换activeIndex后，触发Tabs组件和下方Pages组件的重新渲染

这里对className的拼接可以用第三方库 classnames 替换

// Tabs.jsx
import React, { Component } from 'react'

export default class Tabs extends Component {
  render() {
    const { tabs, activeIndex, changeTab } = this.props

    return (
      <div className="tabs" style={{ display: 'flex' }}>
        {tabs.map((tabName, index) => (
          <div
            className={['tab', activeIndex === index ? 'tab-active' : ''].join('')}
            onClick={changeTab(index)}
            style={{
              margin: 5,
              cursor: 'pointer',
              transition: 'all 0.2s',
              color: activeIndex === index ? 'red' : 'black',
              borderBottom: activeIndex === index ? '2px solid red' : ''
            }}
          >
            {tabName}
          </div>
        ))}
      </div>
    )
  }
}

// App.jsx
import React, { Component } from 'react'
import Tabs from './components/Tabs'

export default class App extends Component {
  constructor() {
    super()
    this.state = {
      tabs: ['Home', 'Hot', 'Category', 'Profile'],
      activeIndex: 0
    }
  }

  changeTab = (index) => () => {
    this.setState({
      activeIndex: index
    })
  }

  render() {
    const { tabs, activeIndex } = this.state
    return (
      <div>
        <Tabs tabs={tabs} activeIndex={activeIndex} changeTab={this.changeTab}></Tabs>
        {tabs[activeIndex] === 'Home' && <h2>Home</h2>}
        {tabs[activeIndex] === 'Hot' && <h2>Hot</h2>}
        {tabs[activeIndex] === 'Category' && <h2>Category</h2>}
        {tabs[activeIndex] === 'Profile' && <h2>Profile</h2>}
      </div>
    )
  }
}

React中的插槽

React并不存在插槽的概念，但是可以通过props.children来实现类似的效果

可以通过向子组件传递props.children子元素来决定子组件内渲染何种内容的标签
我们在子组件标签内书写的内容都会默认作为props.children传递给子组件

通过children实现插槽

实现一个导航栏NavBar组件，左中右布局，渲染内容由父组件决定

需要注意的是如果只传入了一个子标签，那么props.children不再是一个数组，需要对此做额外判断

// NavBar.jsx
import React, { Component } from 'react'

export default class NavBar extends Component {
  render() {
    const { children } = this.props

    Array.isArray(children) || (children = [children])

    return (
      <div
        className="nav-bar"
        style={{ display: 'flex', justifyContent: 'space-between', alignContent: 'center' }}
      >
        <div className="left">{children[0]}</div>
        <div className="center">{children[1]}</div>
        <div className="right">{children[2]}</div>
      </div>
    )
  }
}

// App.jsx
import React, { Component } from 'react'
import NavBar from './components/NavBar'

export default class App extends Component {
  render() {
    return (
      <div>
        <NavBar>
          <span>Back</span>
          <div>Search</div>
          <div>Menu</div>
        </NavBar>
      </div>
    )
  }
}

通过props实现插槽

相比于通过props.children传递插槽，通过props实现的插槽更具确定性

// NavBar.jsx
import React, { Component } from 'react'

export default class NavBar extends Component {
  render() {
    const { left, center, right } = this.props

    return (
      <div
        className="nav-bar"
        style={{ display: 'flex', justifyContent: 'space-between', alignContent: 'center' }}
      >
        <div className="left">{left}</div>
        <div className="center">{center}</div>
        <div className="right">{right}</div>
      </div>
    )
  }
}

// App.jsx
import React, { Component } from 'react'
import NavBar from './components/NavBar'

export default class App extends Component {
  render() {
    const left = <span>Back</span>
    const center = <div>Search</div>
    const right = <div>Menu</div>

    return (
      <div>
        <NavBar left={left} center={center} right={right}></NavBar>
      </div>
    )
  }
}

作用域插槽

在Vue中，可以通过作用域插槽，在父组件插槽内容中注入插槽的数据

标签与结构由父组件决定
数据内容由子组件对外暴露

重写之前的Tabs例子，可以将插槽传递的内容由静态的React元素变为一个函数，这样在子组件内部就可以通过函数传参，动态地对外暴露数据

之前每个Tab使用span标签书写的，通过作用域插槽，我们将它通过button标签渲染出来

// Tabs.jsx
import React, { Component } from 'react'

export default class Tabs extends Component {
  render() {
    const { tabs, activeIndex, changeTab, tabSlot } = this.props

    return (
      <div className="tabs" style={{ display: 'flex' }}>
        {tabs.map((tabName, index) => (
          <div
            className={['tab', activeIndex === index ? 'tab-active' : ''].join('')}
            onClick={changeTab(index)}
            style={{
              margin: 5,
              cursor: 'pointer',
              transition: 'all 0.2s',
              color: activeIndex === index ? 'red' : 'black',
              borderBottom: activeIndex === index ? '2px solid red' : ''
            }}
          >
            {tabSlot ? tabSlot(tabName) : tabName}
          </div>
        ))}
      </div>
    )
  }
}

// App.jsx
import React, { Component } from 'react'
import Tabs from './components/Tabs'

export default class App extends Component {
  constructor() {
    super()
    this.state = {
      tabs: ['Home', 'Hot', 'Category', 'Profile'],
      activeIndex: 0
    }
  }

  changeTab = (index) => () => {
    this.setState({
      activeIndex: index
    })
  }

  render() {
    const { tabs, activeIndex } = this.state
    return (
      <div>
        <Tabs
          tabs={tabs}
          activeIndex={activeIndex}
          changeTab={this.changeTab}
          tabSlot={(content) => <button>{content}</button>}
        ></Tabs>
        {tabs[activeIndex] === 'Home' && <h2>Home</h2>}
        {tabs[activeIndex] === 'Hot' && <h2>Hot</h2>}
        {tabs[activeIndex] === 'Category' && <h2>Category</h2>}
        {tabs[activeIndex] === 'Profile' && <h2>Profile</h2>}
      </div>
    )
  }
}

Context跨组件传参

非父子组件之间的数据共享

props层层传递跨组件会很不方便对于中间那些本不需要这些props数据的组件是冗余的
第三方状态库外置于React 如Redux （实际开发中较为常用）
事件总线 ...

针对跨组件传参的场景，React提供了一个API名为Context

Context 提供了一个在组件之间共享此类值的方式，而不是显式地通过组件树逐层传递props
使用 Context 共享那些全局的数据，如主题色、用户登录状态、locales等

用Context实现跨组件传参

假设有App Profile UserCard三个嵌套组件，我们希望App中的 isDarkMode 状态能够透传到UserCard组件中

全局通过 createContext 创建一个上下文
根组件通过 DarkModeContext.Provider 标签与 value 传递值到上下文中
需要使用到该值的子组件通过 UserCard.contextType = DarkModeContext 绑定到上下文
随后即可在子组件中通过 this.context 获取到此上下文当前绑定的状态值

::: code-group

// context.js
import { createContext } from 'react'

export const DarkModeContext = createContext()

// App.jsx
import React, { Component } from 'react'
import Profile from './components/Profile'
import { DarkModeContext } from './context'

export default class App extends Component {
  constructor() {
    super()
    this.state = {
      darkMode: false
    }
  }

  changeDarkMode = () => {
    this.setState({ darkMode: !this.state.darkMode })
  }

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

    return (
      <DarkModeContext.Provider value={darkMode}>
        <Profile />
        <button onClick={this.changeDarkMode}>Change DarkMode</button>
      </DarkModeContext.Provider>
    )
  }
}

// Profile.jsx
import React, { Component } from 'react'
import UserCard from './UserCard'

export default class Profile extends Component {
  render() {
    return (
      <div>
        <UserCard />
      </div>
    )
  }
}

// UserCard.jsx
import React, { Component } from 'react'
import { DarkModeContext } from '../context'

export default class UserCard extends Component {
  render() {
    return (
      <div>
        <h1>UserCard</h1>
        {this.context ? <h2>Dark Mode</h2> : <h2>Light Mode</h2>}
      </div>
    )
  }
}

UserCard.contextType = DarkModeContext

:::

在类组件中可以通过Context共享数据，而函数组件中的this并没有指向组件实例，那么在函数式组件中应当如何使用？

用函数式组件重写一下 UserCard

// UserCard.jsx
import { DarkModeContext } from '../context'

export default function UserCard() {
  return (
    <DarkModeContext.Consumer>
      {(context) => (
        <div>
          <h1>UserCard</h1>
          {context ? <h2>Dark Mode</h2> : <h2>Light Mode</h2>}
        </div>
      )}
    </DarkModeContext.Consumer>
  )
}

如果同时需要共享多个状态，Provider可以嵌套，那么在子组件中可以通过不同的Context.Consumer获取到不同的全局上下文，执行不同的操作，展示不同的内容

React.createContext

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

Context.Provider

每个Context对象都会返回一个Provider组件，它允许消费组件订阅Context的变化
Provider接收一个value属性，用于将变化的值传递给消费组件Consumer
一个Provider可以与多个Consumer创建关系
多个Provider可以嵌套使用，内层数据会覆盖外层数据
当Provider的value发生变化时，其内部的所有Consumer组件都会重新渲染

Class.contextType

挂载在类组件上的 contextType 属性会被重新赋值为一个由 React.createContext 创建的Context对象
这允许你在类组件中通过 this.context 获取到最近的Context的值
任何生命周期都能访问到这个值

Context.Consumer

帮你在函数式组件中完成订阅context （函数式组件中没有this）
当Consumer订阅到context变更，会触发其内部传递的函数
传入Consumer的函数接收当前的context值，返回一个React元素节点

关于defaultValue

什么时候会用到创建Context时传入的defaultValue？

如果子组件通过 this.context 向上查找时没有找到相应的Provider，则使用Context的默认值

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

    return (
      <>
        <DarkModeContext.Provider value={darkMode}>
          <button onClick={this.changeDarkMode}>Change DarkMode</button>
        </DarkModeContext.Provider>
        <Profile />
      </>
    )
  }
...

props属性展开

如果我们希望将一个对象中的所有属性都作为props传递给子组件，可以在子组件标签上直接展开该对象

类似于Vue中的v-bind="childProps"，一次绑定所有属性到子组件

...
  render() {
    const { childProps } = this.state
    return (
      <div>
        <Child {...childProps} />
      </div>
    )
  }
...

如果你确实希望层层传递props来实现跨组件通信，那么可以在render函数中直接将this.props进行属性展开，虽然不推荐这样的做法：

// App.jsx
<App {...this.props} />
// Profile.jsx
<Profile {...this.props} />
// UserCard.jsx
<UserCard {...this.props} />
// Details.jsx
<Details {...this.props} />
...

EventBus跨组件通信

很多第三方库实现了时间发布订阅，如 tiny-emitter

可以借助EventBus完成全局状态共享：

在 App.jsx 中点击按钮触发全局事件并携带payload
当 Player 组件挂载时 componentDidMount 添加play事件的监听
当 Player 组件卸载时 componentWillUnmount 移除play事件的监听
在 Player 组件中展示当前播放的音乐

// App.jsx
import React, { Component } from 'react'
import Player from './components/Player'
import { emit } from './eventbus'

export default class App extends Component {
  play = () => {
    emit('play', { musicName: 'Hello, Music' })
  }

  render() {
    return (
      <>
        <Player></Player>
        <button onClick={this.play}>Play</button>
      </>
    )
  }
}

// Player.jsx
import React, { Component } from 'react'
import { on, off } from '../eventbus'

export default class Player extends Component {
  constructor() {
    super()
    this.state = {
      musicName: ''
    }
  }

  playMusic = ({ musicName }) => {
    console.log('Music Play: ' + musicName)
    this.setState({ musicName })
  }

  componentDidMount() {
    on('play', this.playMusic)
  }

  componentWillUnmount() {
    off('play', this.playMusic)
  }

  render() {
    return (
      <div>
        <h1>Player</h1>
        <p>Now Playing: {this.state.musicName}</p>
      </div>
    )
  }
}

setState的使用详解

不同于Vue的自动追踪依赖，React是通过用户调用setState来获知状态的更新，所以开发者要更新状态不能直接this.state.xxx = 'xxx'，而必须通过setState方法。这样React在内部才能获知状态的更新，继而触发对视图的更新。

从React的源码可以看到，setState方法是从Component集继承而来的

setState的异步更新

当调用 setState 时，方法会使用 Object.assign() 方法将新旧state合并

也可以通过传入回调函数来更新state

// 传入一个state对象 更新state
this.setState({
  count: this.state.count + 1
})

// 传入回调函数 返回值作为将与旧state合并
this.setState((state, props) => {
  return {
    count: state.count + 1
  }
})

传入回调函数来对state进行更新带来了一些好处：

可以在回调中写心得state的逻辑（代码内聚性更强）
回调函数会将之前的state和当前的props传递进来
setState在React的事件处理中是被异步调用的

如何获取异步更新的结果？

setState的异步更新也带来了一些问题，如果我们希望能在state变化后立即做出一些处理，可以使用到setState的第二个入参:

第二个参数是一个回调函数，在回调函数中获取到的state为更新后的state最新值

setState((oldState, props) => newState, () => ... )

为什么setState被设计为异步执行？

Github: RFClarification: why is setState asynchronous?

可以显著提升性能，出于性能优化考虑
- 假设setState是同步执行的，假设在调用函数后开发者连续调用了三次setState
- render函数会执行三次，创建三份不同的VDOM，执行三次Diff算法，三次更新到DOM上，带来重绘与重排...
- 如果在同一时间段内多次修改了state，那么React会在一段时间内的多次修改合并到一起，统一修改
- 这样，即使在同一时间多次触发setState，那么render函数也只会被调用一次
如果同步更新state，那么render函数中通过props传参的子组件不会被更新，会出现数据不同步的问题
- 在setState后，可以立即获取到最新的state值，但是此时render函数并没有被执行

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

在React18之后，setState方法调用都为异步的（在生命周期中或在方法中）

但是在React18之前，某些情况下是同步的：

// 异步执行 执行setState后当前state并未改变
changeTitle = () => {
  this.setState({ title: 'Hello, React!' })
  console.log(this.state.title) // Hello, World!
}

// 同步执行
changeTitle = () => {
  setTimeout(() => {
    this.setState({ title: 'Hello, React!' })
    console.log(this.state.title) // Hello, React!
  }, 0)
}

这是因为setTimeout创建了一个宏任务，脱离了React内部的事件处理队列，不再受React的控制，从而达到了同步执行的效果
同样的，如果是通过DOM监听器触发的回调中执行setState，也会作为宏任务执行，脱离React的事件处理队列

在React18之后，即使是setTimeout中的回调也是异步执行的，所有的回调都将被放入React内部维护的队列中，批量更新

New Feature: Automatic Batching Batching is when React groups multiple state updates into a single re-render for better performance. Without automatic batching, we only batched updates inside React event handlers. Updates inside of promises, setTimeout, native event handlers, or any other event were not batched in React by default. With automatic batching, these updates will be batched automatically: What’s New in React 18

将多个状态更新会放到一次re-render中，为了更好的性能
只在React事件处理函数才会有批处理
之前：在promise/setTimeout/原生事件处理器以及其他的事件默认没有被批处理
现在：都会被做批量处理，收集state改变，统一更新

55 KiB Raw Blame History Unescape Escape