一文通关React

一、前言

最近公司Vue@2全家桶需要转型React@18全家桶，并开发相应轮子等等计划。我上次看React还是在2年之前，所以最近花了一两周从头儿复习了React，结合各路大佬的笔记和视频，总结了自己的一篇，因为我习惯记录在有道云上面然后有空才会整理标题、文字、代码到CSDN，如果本文的文字片段中（非代码片段）出现
这类标签的请忽略。

文章共计8w8k字，写到最后CSDN都卡了，觉得不错的朋友点个赞鼓励下喔。

二、核心概念

不管是Vue转过来的同学，还是初学者，我都建议要耐心看核心概念，包括框架的思想和原理，当工作时间越长，之后你会发现无论是JS、Java还是GO还是什么，都只是工具而已，重要的是它其中的思想、设计理念。

2.1、React简介

2.1.1、React与传统MVC框架的关系

（1）MVC框架是什么：MVC也即Model业务模块、View用户视图、Controller控制器的统称。当View视图层有事件发生，它会将事件交给Controller控制层处理，Controller控制器再决定用哪一个Model业务模型去处理，这个时候View视图层会注册成为这个Model业务模型的订阅者，当Model业务模型处理完毕会通知View视图层进行更新。

（2）MVC框架的弊端是：一个Model关联一个View，这样会造成高度耦合，也即这个View层无法进行复用，再大型项目中这是很大的弊端。这也正是促使React被发明出来的原因。

（3）React既不是MVC框架也不是MVVM框架，严格来说它只能算V，也即View层，甚至React并不认可MVC框架的设计。

2.1.2、React的特性

（1）声明式设计：即我们只负责数据层的逻辑开发，视图层交给React自动完成生成。

（2）高效：React通过虚拟DOM，大幅度的减少与真实DOM的交互。

（3）灵活：React可以和已知的库或框架很好的配合。

（4）JSX：JSX语法可以使html、css、js在同一页面书写。

（5）组件：具有高度可复用性。

（6）单向响应的数据流：即数据自父到子传递，如果子有改变数据的逻辑则通知父，由父决定是否修改，再命令子修改。

2.1.3、虚拟DOM

在以前的JS开发中，如果我们有100条数据渲染到DOM中去，并在某个时段删除其中的一个DOM，我们需要将整个数据对象清空，再重新渲染99条数据到DOM中。而虚拟DOM（vdom）的出现，可以很好的避免这种情况：React使用JS创建两个数据对象，通过Diff算法让100条的和99条的做对比，得到更改的地方，再单独将改变的地方做增加或删除，其他不变的DOM不做处理。这样极大的提升了性能，减少了性能浪费。

2.2、安装脚手架

npx install create-react-app -g
create-react-app 文件名

create-react-app 会将 webpack 的配置文件隐藏起来，类似 vue.config.js 的东西没法使用。

你可以观察 package.json 中有 script 命令叫做：react-scripts eject ，它会把 webpack 的配置文件都暴露出来。

但是这样是不太安全的，所以这里推荐使用 Umi 、Vite 这样的脚手架去创建项目，它们都有对于 webpack 配置文件修改的方案，并且也都有多人数的社区。

当然如果你已经使用 npx create-react-app 这个脚手架了的话，可以安装下载 craco 这个插件，也能帮助你配置 webpack：

// 1、安装
pnpm install -D @craco/craco

// 2、修改 package.json 中的 script 命令
{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  }
}

// 3、项目根目录下创建 craco.config.js，在其中进行 webpack 相关配置
const path = require('path')
const pathResolve = pathUrl => path.join(__dirname, pathUrl)

module.exports = {
  webpack: {
    alias: {
      '@': pathResolve('src'),
      '@assets': pathResolve('src/assets')
    }
  }
}

2.3、元素渲染

2.3.1、React的元素渲染

元素是构成React最小的砖块，元素描述了在屏幕上想看到的内容。 但是注意，与浏览器中的DOM元素不同，React元素创建的是开销极小的普通对象。 React DOM会负责更新DOM来与React元素保持一致，可以看成为比对再更新的状况。

const element = 
Hello, world
ReactDOM.render(element, document.getElementById('root'))

2.3.2、更新已渲染的元素

React元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的UI。 根据我们已知的知识，更新UI唯一的方法就是使用ReactDOM.render()。 我们来看一个定时器的例子：

function tick () {
  const element = (
    

      
Hello, world!
      
It is {new Date().toLocaleTimeString()}.
    
  );
  ReactDOM.render(element, document.getElementById('root'))
}

setInterval(tick, 1000)

2.3.3、只更新需要更新的部分

React DOM会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使DOM达到预期的状态。

2.4、JSX

2.4.1、JSX简介

下面的这个语法，既不是字符串也不是HTML，他被称为JSX，也是JavaScript的语法扩展。JSX可能会使人联想到模版语言，但它具有JavaScript的全部功能。

const element = 
Hello, world!

2.4.2、在JSX中嵌入表达式

在下面的例子中，我们声明了一个名为name的变量，然后在JSX中使用它，并将它包裹在大括号中。 最后通过ReactDOM.render渲染到指定DOM中（渲染将在后面章节中介绍，你可以暂时理解为将元素呈现到屏幕上的方法）。 在括号内，可以放置任何有效的JavaScript表达式，例如：2+2、user.name、formatTime(time)等等，和vue的{{}}效能类似。

const welcome = 'Hello,'
const name = 'Josh Perez'
const element = 
Hello, {welcome + name}

ReactDOM.render(
  element,
  document.getElementById('root')
);

function formatName (user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
}

const element = (
  

    Hello, {formatName(user)}!
  
)

ReactDOM.render(
  element,
  document.getElementById('root')
)

2.4.3、JSX也是一个表达式

在编译之后，JSX表达式会被转为普通JavaScript函数调用，并且对其取值后得到JavaScript对象。 也就是说，你可以在if语句和for循环的代码块中使用JSX，将JSX赋值给变量，把JSX当作参数传入，以及从函数中返回JSX：

function getGreeting (user) {
  if (user) {
    return 
Hello, {formatName(user)}!
  }
  return 
Hello, Stranger.
}

2.4.4、JSX表达对象

Babel会把JSX转译成一个名为React.createElement()函数调用。 以下两种表达式完全等效： 

const element = (
  

    Hello, world!
  
)

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
)

2.5、组件和props

2.5.1、函数组件和class组件

定义组件最简单的方法就是写JavaScript函数，下面的例子是一个有效的React组件。 因为它接收了唯一带有数据的“props”对象并返回一个React元素： 

import React from "react"
export default function Welcome (props) {
  return (
    
Hello, {props.name}
  )
}
// 注意：在React16.8版本之前函数组件没有自身的状态，也被称为无状态组件，
// 在16.8版本之后才支持有状态。

// 函数组件当然可以使用箭头函数方式：
const Tabber = () => {
  return (
    
Tabber
  )
}

你同时还可以使用 ES6 的 class 来定义组件：

import React, { Component } from "react";
export default class Welcome extends Component {
  render() {
    return (
      
Hello, {this.props.name}
    )
  }
}

2.5.2、props组件通信（父传子）

// 父组件
import React, { Component } from "react"
import Tabbar from "./views/TabBar/TabBar.js"
import SideBar from "./views/SideBar/SideBar.js"

export default class App extends Component {
  let obj = {
    title: "123",
    showBtn: true
  }
  render() {
    return (
      

        
        
        // 如果子组件恰巧也是命名相同的，我们可以用...展开符传递
        
      
    )
  }
}

// 子组件
import React, { Component } from "react"

export default class Tabbar extends Component {
  render() {
    let {title, showBtn} = this.props  // 这是解构赋值，或者写为 let title = this.props.title;
    console.log(this.props)    // {title: "导航栏", showBtn: true}
    return (
      

        {title}
        {showBtn && 按钮}
      
    )
  }
}

// 函数式子组件
// 函数组件特别需要注意的是，因为没有this，所以我们不同通过this.props来获取属性
// 我们需要通过形参来接收props
import React from "react";

export default function SideBar(props) {
  console.log(this);  // undefined
  console.log(props);  // {title: "侧边栏"}
  let {title} = props;  // 这是解构赋值的写法，你当然可以写为：let title = props.title;
  return (
    

      {title}
    
  );
}

2.5.3、callback组件通信（子传父）

子组件无法直接修改父组件的State状态，因为状态是私有的，所以我们通过在父组件中定义方法回调，在子组件中调用props属性下挂载的方法回调，让父组件自己修改自身State状态，以达到在子组件点击按钮控制父组件下另一个子组件的显隐。 

// 父组件
import React, { Component } from "react"
import TabBar from "./views/TabBar/TabBar.js"
import SideBar from "./views/SideBar/SideBar.js"

export default class App extends Component {
  state = {
    show: false
  }

  handleShow = (text) => {
    this.setState({
      show: !this.state.show
    })
    console.log(text)  // 我是子组件的值
  }
  
  render() {
    return (
      

        
        {this.state.show && }
      
    )
  }
}

// 子组件
import React, { Component } from "react"

export default class TabBar extends Component {
  state = {
    text: "我是子组件的值"
  }
  
  handleClick = () => {
    this.props.event(this.state.text)
  }
  
  render() {
    return (
      

        显隐侧边栏
      
    )
  }
}

2.5.4、状态提升（兄弟组件通信）

状态提升也称为：中间人模式（有点类似于Vue中的兄弟组件通信，也是需要通过共同的父组件去传递需要共享的数据）。
也就是说，多个组件需要去共享的State状态提升到最近的父组件中，父组件在通过更改后使用props分发给子组件。
需要注意的是，假设两个需要共享信息的组件不是亲兄弟组件，再通过这样去找最近父组件的方式，就过于麻烦了，要经过多层的传递，所以状态提升只适合亲兄弟组件，也就是这两个组件是同一个父组件。 

B和C是亲兄弟，只需要提升一层到A即可完成通信：
          Component A
Component B       Component C

D和E不是亲兄弟，需要提升多层到A才能完成通信：
            Component A
    Component B     Component C
Component D             Component E

2.5.5、发布订阅模式（兄弟组件通信，一种思想，纯JS的解决方案）

import React, { Component } from 'react'

export default class App extends Component {
  var bus = {
    list: [],
    subscribe(callback) {
      this.list.push(callback)
    },
    publish(info) {
      this.list.forEach(callback => {
          callback && callback(info)
      })
    }
  }
  
  render() {
    return (
      
APP
    )    
  }
}

// 订阅者
bus.subscribe((info) => {
  console.log("111", info)
})
bus.subscribe((info) => {
  console.log("222", info)
})

// 发布者
bus.publish('发布')  // 111, 发布   222, 发布

2.5.6、context状态树传参（官方推荐的兄弟组件通信解决方案）

context可以跨多层级进行组件通信，前提是这些需要通信的组件都在context的控制范围内，也即需要通信的组件是消费者（consumer），他们需要一个供应商（provider）来提供context的环境。 

// 父组件
import React, { Component } from 'react'
import TabBar from "./views/TabBar/TabBar.js"
import SideBar from "./views/SideBar/SideBar.js"
const GlobalContext = React.createContext()

export default class App extends Component {
  constructor() {
    state = {
      text: "标题"
    }
  }
  
  render() {
    return (
       {
            this.setState({
              title: value
            })
          }
        }
      }>
        

          
          
        
      
    )
  }
}

// 子组件 TabBar
import React, { Component } from 'react'
const GlobalContext = React.createContext()

export default class TabBar extends Component {
  render() {
    return (
      {/* 
        这里用这样的写法是因为关键点在value身上，
        我们需要接收到供应商给我们提供的服务，
        所以设计上采用了回调函数的写法，
        方便我们拿到value这个服务形参。
      */}
      
        {
          (value) => {
            console.log(value)     // {title: "标题", text: "文本"}
            return (
              

                {value.title}       // 先是“标题”，点击sidebar的按钮后更新内容，调用setState重新渲染
              
            )
          }
        }
      
    )
  }
}

// 子组件 SideBar
import React, { Component } from 'react'
const GlobalContext = React.createContext()

export default class TabBar extends Component {
  render() {
    return (
      
        {
          (value) => {
            return (
              
 { value.changeTitle("更改标题") }}>
                按钮
              
            )
          }
        }
      
    )
  }
}

2.5.7、props属性类型检测和默认属性

我们引入React内置的prop-types，用它挂载的各种方法可以分别检测props的类型。
props的默认属性则使用static设置类属性即可。 

import React, { Component } from 'react'
import checkType from "prop-types"

export default class Tabbar extends Component {
  static propsTypeTest = {
    title: checkType.string,
    showBtn: checkType.bool
  };
  static defaultProps = {
    showBtn: true
  };
  render() {
    let {title, showBtn} = this.props
    console.log(this.props)    // {title: "导航栏", showBtn: true}
    return (
      

        {title}
        {showBtn && 按钮}
      
    )
  }
}

// 需要特别注意的一点是：函数式组件不支持以上的static写法
// 我们需要在外部给函数身上分别挂上两个属性
import React from 'react'
import checkType from "prop-types"

export default function SideBar(props) {
  let {title, showBtn} = props
  console.log(props)    // {title: "侧边栏", showBtn: true}
  return (
    

      {title}
    
  )
}

SideBar.typeProps = {
  title
}

2.5.8、props的只读性

组件无论是使用函数声明还是通过class声明，都决不能修改自身的props。

React很灵活但它有一个严格的规则：所以的React组件必须保护它们的props不被更改。

当然，应用程序的 UI 是动态的，并会伴随着时间的推移而变化。在下一章节中，我们将介绍一种新的概念，称之为 “state”。在不违反上述规则的情况下，state允许React组件随用户操作、网络响应或者其他变化而动态更改输出内容。

2.6、事件处理

2.6.1、事件代理模式

React的事件并不会绑定在每一个具体元素上，而是采用了事件代理的模式：

（1）事件会绑定在#root根节点上。

（2）当有事件发生时，root会查找所有的子元素身上的相应事件，找到之后进行处理。

（3）因为是事件代理了所有事件，所以默认有event参数，可以在函数中打印出来。

2.6.2、React元素和DOM元素的事件处理区别

React元素的事件处理和DOM元素的事件处理很相似，但是语法上会有不同：

（1）React事件的命名采用小驼峰式（camelCase），而不是纯小写。

（2）使用JSX语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

（3）你不能通过return false的方式阻止默认行为。你必须显式的使用preventDefault。

2.6.3、代码示例

// 传统HTML

  Activate Lasers


// React

  Activate Lasers


// 阻止默认行为
// 在这里，e是一个合成事件。React根据W3C规范来定义这些合成事件，所以你不需要担心跨浏览器的兼容性问题。
function ActionLink() {
  function handleClick(e) {
    e.preventDefault()
    console.log('The link was clicked.')
  }

  return (
    
      Click me
    
  )
}

你必须谨慎对待JSX回调函数中的this，在JavaScript中，class的方法默认不会绑定this。如果你忘记绑定this.handleClick并把它传入了onClick，当你调用这个函数的时候this的值为undefined。我们在construtor中使用bind来绑定this：

class Toggle extends React.Component {
  constructor(props) {
    super(props)
    this.state = {isToggleOn: true}
    // 为了在回调中使用 `this`，这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }))
  }
  render() {
    return (
      
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      
    )
  }
}

ReactDOM.render(
  ,
  document.getElementById('root')
)

如果你觉得bind来绑定this太麻烦，你可以使用另外两种办法：
public class fields语法、在回调中使用箭头函数：

// public class fields语法
class LoggingButton extends React.Component {
  // 此语法确保 `handleClick` 内的 `this` 已被绑定。
  // 注意: 这是 *实验性* 语法。
  handleClick = () => {
    console.log('this is:', this)
  }
  render() {
    return (
      
        Click me
      
    )
  }
}


// 在回调中使用箭头函数
class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this)
  }
  render() {
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。
    return (
       this.handleClick()}>
        Click me
      
    )
  }
}

2.6.4、向事件处理程序传递参数

以下两种方式是等价的，分别通过箭头函数和Function.prototype.bind来实现。 在这两种情况下，React的事件对象e会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过bind的方式，事件对象以及更多的参数将会被隐式的进行传递。

 this.deleteRow(id, e)}>Delete Row
Delete Row

2.7、条件渲染

也即使用if else、&&、三目运算符来决定元素的渲染。

2.7.1、元素变量

也即可以声明一个变量来储存元素。

class LoginControl extends React.Component {
  constructor(props) {
    super(props)
    this.handleLoginClick = this.handleLoginClick.bind(this)
    this.handleLogoutClick = this.handleLogoutClick.bind(this)
    this.state = {isLoggedIn: false}
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true})
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false})
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn
    let button
    if (isLoggedIn) {
      button = 
    } else {
      button = 
    }

    return (
      

        
        {button}
      
    )
  }
}

ReactDOM.render(
  ,
  document.getElementById('root')
)

2.7.2、与运算符&&

function Mailbox(props) {
  const unreadMessages = props.unreadMessages
  return (
    

      
Hello!
      {unreadMessages.length > 0 &&
        

          You have {unreadMessages.length} unread messages.
        
      }
    
  )
}

const messages = ['React', 'Re: React', 'Re:Re: React']
ReactDOM.render(
  ,
  document.getElementById('root')
)

2.7.3、三目运算符

render() {
  const isLoggedIn = this.state.isLoggedIn
  return (
    

      {isLoggedIn
        ? 
        : 
      }
    
  )
}

2.7.4、阻止元素渲染

在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染。若要完成此操作，你可以让render方法直接返回null，而不进行任何渲染。

function WarningBanner (props) {
  if (!props.warn) {
    return null
  }

  return (
    

      Warning!
    
  )
}

class Page extends React.Component {
  constructor(props) {
    super(props)
    this.state = {showWarning: true}
    this.handleToggleClick = this.handleToggleClick.bind(this)
  }

  handleToggleClick () {
    this.setState(state => ({
      showWarning: !state.showWarning
    }))
  }

  render() {
    return (
      

        
        
          {this.state.showWarning ? 'Hide' : 'Show'}
        
      
    )
  }
}

ReactDOM.render(
  ,
  document.getElementById('root')
);

2.8、列表和key

2.8.1、渲染多个组件

下面，我们使用Javascript中的map()方法来遍历numbers数组。将数组中的每个元素变成li标签，最后我们将得到的数组赋值给listItems，并把listItems整个渲染进DOM中。

const numbers = [1, 2, 3, 4, 5]
const listItems = numbers.map((number) =>
  
{number}
)

ReactDOM.render(
  
{listItems}
,
  document.getElementById('root')
)

将上述代码转换为组件写法：

function NumberList (props) {
  const numbers = props.numbers
  const listItems = numbers.map((number) =>
    
{number}
  )
  return (
    
{listItems}
  )
}

const numbers = [1, 2, 3, 4, 5]
ReactDOM.render(
  ,
  document.getElementById('root')
)

这时控制台会报没有key的错误，如果是使用过Vue应该知道是少绑了key，React同理，你可以绑定数据遍历后的id，在没有的情况下可以绑定index索引。在两种语法中，key都是独一无二的，是告诉语法哪些元素发生改变了，需要更新或添加或删除，所以我们应该切记给每个元素特定的key。但是Vue和React两个语法的写法有所不同：

function NumberList (props) {
  const numbers = props.numbers
  const listItems = numbers.map((number, index) =>
    

      {number}
    
  )
  return (
    
{listItems}
  )
}

const numbers = [1, 2, 3, 4, 5]
ReactDOM.render(
  ,
  document.getElementById('root')
)

这里需要提一嘴的是，如果写成下面这样的写法时，需要记得加上 return，而上面提前 const 声明的 map 循环子项则不需要 return：

export default function Test () {
  const list = [{ name: 'Stefan', id: 1 }, { name: 'Edward', id: 2 }, { name: 'Simon', id: 3 }]

  return (
    

      Test
      {
        list.map(item => {
          return 

            {item.name}
          
        })
      }
    
  )
}

2.9、插槽

插槽的内在在于：提高复用性、减少父子通信。

在Vue中使用slot去使用插槽，在React中使用this.props.children，这是一个官方默认写法，也就是说只能用这种方式拿到插槽内的DOM元素。

// 父组件
import React, { Component } from "react"
import Child from "./Views/Components/Child.js"

export defalut class App extends Component {
  render() {
    return (
      

        
          
Slot 1
          
Slot 2
        
      
    )
  }
}

// 子组件
import React, { Component } from "react"

export defalut class Child extends Component {
  render() {
    return (
      

        {this.props.children}    // 会渲染两个DOM，Slot 1 和 Slot 2
        
        {/* 不想把全部都渲染进来，我们可以使用数组取值的写法： */}
        
        {this.props.children[1]}   // 这里只会渲染第二个DOM，Slot 2
      
    )
  }
}

插槽还有一个妙用：虽然父组件需要被插入的DOM会最终插入到子组件中去，但是它可以访问到父组件状态。需要知道的是：它虽然可以访问父组件状态，但是跟父传子还是有区别的，子组件并没有得到信息，所以它替代不了父传子。

import React, { Component } from "react";
import Child from "./Views/Components/Child.js"

export defalut class App extends Component {
  constructor() {
    state = {
      isShow: true,
    }
  }
  
  handleShow = () => {
    this.setState({
      isShow: !this.state.isShow 
    })
  }
  
  render() {
    return (
      

        { this.state.isShow && 
标题
 }
        
           {this.handleShow()}}>Slot 1
        
      
    )
  }
}

// 子组件
import React, { Component } from "react"

export defalut class Child extends Component {
  render() {
    return (
      

        {this.props.children}    // 会渲染两个DOM，Slot 1 和 Slot 2
      
    )
  }
}

2.10、生命周期

这一章节简单的了解下即可，后期使用React18+版本，实际上用不到这些东西了，官方推荐使用函数组件去写，不推荐使用class组件。

2.10.1、初始阶段

componentWillMount () {}  
// 渲染前（render之前最后一次修改状态的机会）
// 用来初始化数据最好用
// React18中已经弃用，建议代码写在componentDidMount或constructor中

render () {}             
// 渲染中（只能访问props和state，不能修改它们、不能修改DOM输出）

componentDidMount () {}   
// 渲染后（成功render并渲染完成真实DOM之后触发，可以修改DOM）
// 用来进行ajax数据请求、setInterval、订阅函数调用、对创建完的DOM进行各种操作、等等最好用

2.10.2、运行阶段

componentWillReceiveProps () {}   
// 父组件属性是否更新（父组件修改属性时触发）

shouleComponentUpdate (nextProps, nextState) {
  console.log(nextProps, nextState);
}       
// 组件是否需要更新（返回false会阻止render调用）
// 这时组件还没有更新，所以nextProps、nextState两个参数代表更新后的属性和状态

componentWillUpdate () {}         
// 更新前（不能修改props和state）

render () {}                      
// 渲染中（只能访问props和state，不能修改它们、不能修改DOM输出）

componentDidUpdate (prevProps, prevState) {
  console.log(prevProps, prevState)
}      
// 更新后（可以修改DOM）
// prevProps、prevState两个参数代表组件更新前的属性和状态

2.10.3、销毁阶段

componentWillUnmount () {}        
// 组件销毁前（在删除组件之前进行清理操作，比如清除定时器、事件监听器）

2.10.4、新生命周期

state = {}
// componentWillMount 初始化类似，都是在渲染前最后一次更改状态的地方
static getDerivedStateFromProps () {
  return {}
}
// 要注意的是，state、static关键字和return必须写，就算暂时没有状态和需要合并返回的状态也需要写不然会报错


state = {
  name: "Stefan",
  age: "24"
}
static getDerivedStateFromProps () {
  return {
    name: "STEFAN"
  }
}
componentDidMount () {
  console.log(this.state.name, this.state.age);     // "STEFAN", 24
}
// 最终return出的是合并后的状态，如果同名会覆盖

2.11、State

2.11.1、State运用

之前的定时器更新UI的方式，是通过ReactDOM.render()实现的，但是它有局限性，我们来看下面的一个例子，来实现一个真正封装的可复用的定时器组件：

import React from "react"

class Clock extends React.Component {
  constructor(props) {
    super(props)
    this.state = { 
      date: new Date(),
      timer: null
    }
  }
  componentDidMount () {
    this.setState({
      timer: setInterval(() => this.tick(), 1000),
    })
  }
  componentWillUnmount () {
    clearInterval(this.state.timer)
  }
  tick () {
    this.setState({
      date: new Date()
    })
  }
  render() {
    return (
      

        {this.state.date.toLocaleTimeString()}
      
    )
  }
}

export default Clock

上述代码如果你学习过vue，那么是很好理解的，如果没有学习过vue，那么我们来一步一步的解答其中的步骤：

首先，我们要使用class组件来替代掉函数组件；

之后，我们编写一个constructor构造函数，然后再其中为this.state赋初值（这里的state不能在构造函数外的任何地方直接更改，比如：this.state.date = null，这类直接修改值的方式是不被允许的，我们要使用this.setState实现修改操作，构造函数是唯一可以给this.state赋值的地方）；

其次，我们定义一个拥有this.setState动作的函数；

然后，在生命周期componentDidMount()中设置计时器，并在计时器中调用具有this.setState动作的函数；

最后，在生命周期componentWillUnmount()中清除定时器。

上面两个生命周期的意思分别为：组件挂载DOM后、组件将要在DOM卸载后。

2.11.2、setState({}, callback)

setState特别需要注意的是：

当它处在同步逻辑中的时候，它是异步去更新状态、真实DOM的；

当它处在异步逻辑中的时候，它是同步去更新状态、真实DOM的。

它接受第二个参数，callback回调函数，当状态和dom更新完毕之后触发这个回调。

import React, { Component } from "react"
export default class App extends Component {
  constructor() {
    state = {
      count: 0
    }  
  }
  
  render() {
    return (
      

        {this.state.count}
        Add
        Add
      
    )
  }
  
  /*
    react触发标识位后，会把整个方法体进行异步处理，等方法体内代码全部走完，
    再合并多个setState为一个，最后更新状态。
  */
  handleClick1 = () => {
    this.setState({
      count: this.state.count++    
    }, () => {
        console.log(this.state.count);  // 1
    })
    console.log(this.state.count);  // 0
    
    this.setState({
      count: this.state.count++    
    })
    console.log(this.state.count);  // 0，页面中的dom是1
  }
  
  handleClick2 = () => {
    setTimeout(() => {
      this.setState({
        count: this.state.count++
      })
      console.log(this.state.count) // 1
      
      this.setState({
        count: this.state.count++
      })
      console.log(this.state.count) // 2
    }, 0)
  }
}

2.11.3、数据是向下流动的

组件可以选择把它的state作为props向下传递到它的子组件中：

import React fomr "react"
import Child from "@/components/Child.js"

class Father extends React.Componet {
  constructor(props) {
    super(props)
    this.state = {
      date: new Date()
    }
  }
  render() {
    return (
      

        
      
    )
  }
}

而子组件Child会在它的props中接收到参数date，但是组件本身不知道它是来自于父组件Father的state还是props，或是手动输入的：

function Child (props) {
  return {props.date.toLocaleTimeString}
}

2.12、PureComponent

PureComponent会帮你比较新旧props，新旧state，决定shouldComponentUpdate返回true或false，从而决定要不要呼叫render function。

注意：如果你的state和props永远都会变，那么PureComponent并不会更高效，因为shallowEqual也需要花费时间。

以下示例中，第一次点击button修改状态会重新render，我们可以通过shouldComponentUpdate去写逻辑判断是否重新render，也可以直接使用extends PureComponent来交给React判断，state变为thiStefan之后再次点击button修改为thiStefan，React判断前后两次值一样，就会阻止render：

import React, { PureComponent } from "react"

class Test extends PureComponent {
  state = {
    name: "Stefan"
  }
  
  handleChange() {
    this.setState({
      name: "thiStefan"  
    })
  }
  
  render() {
    console.log("render!")
    return (
      

         this.handleChange()}>
        {this.state.name}
      
    )
  }
}

export default Test

三、夯实基础

3.1、组件类

3.1.1、简介

组件类，详细分的话有三种类，第一类说白了就是我平时用于继承的基类组件 Component，PureComponent，还有就是 react 提供的内置的组件，比如 Fragment,StrictMode，另一部分就是高阶组件 forwardRef，memo 等。

3.1.2、Component

Component 是 class 组件的根基，类组件一切始于 Component 。对于 React.Component 使用，我们没什么好讲的，我们这里重点研究一下 React 对 Component 做了什么：

// react/src/ReactBaseClasses.js
function Component (props, context, updater) {
  this.props = props
  this.context = context
  this.$refs = emptyObject
  this.updater = updater || ReactNoopUpdateQueue
}

这就是 Component 函数，其中 updater 对象上保存着更新组件的方法。

我们声明的类组件是什么时候以何种形式被实例化的呢？

// react-reconciler/src/ReactFiberClassComponent.js
function constructClassInstance (
  workInProgress,
  ctor,
  props
) {
  const instance = new ctor(props, context)
  instance.updater = {
    isMounted,
    enqueueSetState () {
      /* setState 触发这里面的逻辑 */
    },
    enqueueReplaceState () { },
    enqueueForceUpdate () {
      /* forceUpdate 触发这里的逻辑 */
    }
  }
}

对于 Component ， react 处理逻辑还是很简单的，实例化我们类组件，然后赋值 updater 对象，负责组件的更新。然后在组件各个阶段，执行类组件的 render 函数，和对应的生命周期函数就可以了。

3.1.3、PureComponent

PureComponent 和 Component 用法，差不多一样，唯一不同的是，纯组件 PureComponent 会浅比较，props 和 state 是否相同，来决定是否重新渲染组件。所以一般用于性能调优，减少 render 次数。

什么叫做浅比较，我这里举个列子：

class Index extends React.PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      data: {
        name: 'alien',
        age: 28
      }
    }
  }
  handleClick = () => {
    const { data } = this.state
    data.age++
    this.setState({ data })
  }
  render () {
    const { data } = this.state
    return 

      

        
 你的姓名是: {data.name} 
        
 年龄： {data.age}
        age++
      
    
  }
}

这里点击 button 按钮让年龄做++操作，组件并不会重新渲染，因为 PureComponent 会比较新旧 data 对象，结果都指向同一个 data，没有产生变化，所以不更新视图。（这里的比较你可以根据深拷贝和浅拷贝去理解）

解决这个问题同样很简单，你需要把 handleClick 事件这么写：

this.setState({ data: { ...data } })

浅拷贝就能根本解决问题。

3.1.4、memo

React.memo 和 PureComponent 作用类似，可以用作性能优化，React.memo 是高阶组件，函数组件和类组件都可以使用， 和 PureComponent 区别是 React.memo 只能对 props 的情况确定是否渲染，而 PureComponent 是针对 props 和 state。

React.memo 接受两个参数，第一个参数原始组件本身，第二个参数，可以根据一次更新中props是否相同决定原始组件是否重新渲染。是一个返回布尔值，true 证明组件无须重新渲染，false 证明组件需要重新渲染，这个和类组件中的 shouldComponentUpdate() 正好相反 。

React.memo：第二个参数返回 true 组件不渲染 ， 返回 false 组件重新渲染。 shouldComponentUpdate：返回 true 组件渲染 ， 返回 false 组件不渲染。

接下来我们做一个场景，控制组件在仅此一个 props 数字变量，一定范围渲染。

例子：

控制 props 中的 number ：

• 只有 number 更改，组件渲染。

• 只有 number 小于 5 ，组件渲染。

// 引入 React 和 memo
import React, { memo } from 'react'

// 定义memo的第一个参数也即原始组件本身
function TextMemo (props) {
  console.log('子组件渲染')
  console.log(props)  // { num: 1, number: 1 }
  if (props)
    return 
hello,world
}

// 定义memo的第二个参数，在其中做判断返回布尔值
const controlIsRender = (pre, next) => {
  if (pre.number === next.number) { // number 不改变 ，不渲染组件
    return true
  } else if (pre.number !== next.number && next.number > 5) { // number 改变 ，但值大于5 ， 不渲染组件
    return true
  } else { // 否则渲染组件
    return false
  }
}

// 定义组件
const NewTexMemo = memo(TextMemo, controlIsRender)

// 定义将要使用 memo 组件的类组件
class Index extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      number: 1,
      num: 1
    }
  }
  render () {
    const { num, number } = this.state
    return 

      

        改变num：当前值 {num}
         this.setState({ num: num + 1 })} >num++
         this.setState({ num: num - 1 })} >num--
      
      

        改变number： 当前值 {number}
         this.setState({ number: number + 1 })} > number ++
         this.setState({ number: number - 1 })} > number -- 
      
      {/* 将两个 props 传入 memo 组件中 */}
      
    
  }
}

效果是：只有点击改变 number 的 button 按钮改变了 number 值，且在 number 小于5的时候才会渲染组件。因为 memo 的第二个参数中只根据 number 去做了 true 和 false 的返回，所以加减 num 不会造成 memo 组件的渲染。

React.memo 一定程度上，可以等价于组件外部使用 shouldComponentUpdate ，用于拦截新老props，确定组件是否更新。

3.1.5、forwardRef

官网对 forwardRef 的概念和用法很笼统，也没有给定一个具体的案例。很多同学不知道 forwardRef 具体怎么用，下面我结合具体例子给大家讲解 forwardRef 应用场景。

3.1.5.1、转发引入Ref

这个场景实际很简单，比如父组件想获取孙组件，某一个 dom 元素。这种隔代 ref 获取引用，就需要 forwardRef 来助力。

function Son (props) {
  const { grandRef } = props
  return 

    这个是想要获取元素
  
}

class Father extends React.Component {
  constructor(props) {
    super(props)
  }
  render () {
    return 

      
    
  }
}

const NewFather = React.forwardRef((props, ref) => )

class GrandFather extends React.Component {
  constructor(props) {
    super(props)
  }
  node = null
  componentDidMount () {
    console.log(this.node)
  }
  render () {
    return 

       this.node = node} />
    
  }
}

react 不允许 ref 通过 props 传递，因为组件上已经有 ref 这个属性,在组件调和过程中，已经被特殊处理，forwardRef 出现就是解决这个问题，把 ref 转发到自定义的 forwardRef 定义的属性上，让 ref 可以通过 props 传递。

3.1.5.2、高阶组件转发Ref

由于属性代理的 hoc，被包裹一层，所以如果是类组件，是通过 ref 拿不到原始组件的实例的，不过我们可以通过 forWardRef 转发 ref。

以此来解决高阶组件转发 Ref 的需求：

function HOC (Component) {
  class Wrap extends React.Component {
    render () {
      const { forwardedRef, ...otherprops } = this.props
      return 
    }
  }
  return React.forwardRef((props, ref) => )
}
class Index extends React.Component {
  componentDidMount () {
    console.log(666)
  }
  render () {
    return 
hello,world
  }
}
const HocIndex = HOC(Index, true)

export default () => {
  const node = useRef(null)
  useEffect(() => {
    {/* 就可以跨层级，捕获到 Index 组件的实例了 */}
    console.log(node.current)  // 打印出组件对象
    console.log(node.current.componentDidMount)  // node.current下挂载的原型对象中可以拿到生命周期等函数
  }, [])

  return (
    

      
    
  )
}

3.1.6、lazy

React.lazy 和 Suspense 技术还不支持服务端渲染。如果你想要在使用服务端渲染的应用中使用，我们推荐 Loadable Components 这个库。

React.lazy 和 Suspense 配合一起用，能够有动态加载组件的效果。React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 default export 的 React 组件。

我们模拟一个动态加载的场景：

// 父组件
import { Spin } from 'antd'
import Test from './comTest'

const LazyComponent = React.lazy(() => new Promise((resolve) => {
  setTimeout(() => {
    resolve({
      default: () => 
    })
  }, 2000)
}))

class TestLazy extends React.Component{   
  render () {
    return 

      {/* Spin组件是antd的icon图标，Test组件将会在2S之后替换掉它 */}
      
}>
        
      
    

} }

// 子组件
class Test extends React.Component {
  constructor(props) {
    super(props)
  }
  componentDidMount () {
    console.log('--componentDidMount--')
  }

  render () {
    return 

      Test
    
  }
}

3.1.7、Suspense

何为 Suspense，Suspense 让组件“等待”某个异步操作，直到该异步操作结束即可渲染。

用于数据获取的 Suspense 是一个新特性，你可以使用 以声明的方式来“等待”任何内容，包括数据。本文重点介绍它在数据获取的用例，它也可以用于等待图像、脚本或其他异步的操作。

上面讲到高阶组件 lazy 时候，已经用 lazy + Suspense 模式，构建了异步渲染组件。我们看一下官网文档中的案例：

const ProfilePage = React.lazy(() => import('./ProfilePage')); // 懒加载

}>
  

3.1.8、Fragment

React 不支持一个组件返回多节点元素，（类似于 Vue2 的规则，在 Vue3 中已经自动允许返回多节点），我们写个例子：

export default () => {
  return (
    
Stefan
    
Edward
    
Simon
  )
}

当然最简单的是按照规则去解决这个问题，即加一层外层 DOM 去包裹：

export default () => {
  return (
    

	  
Stefan
	  
Edward
	  
Simon
    
  )
}

但是如果我们不想额外的增加 DOM 节点，所以就引出了 React 的 Fragment 碎片化概念：

  
Stefan
  
Edward
  
Simon

还可以简写为：

<>
  
Stefan
  
Edward
  
Simon

和 Fragment 区别是，Fragment 可以支持 key 属性。<> 不支持 key 属性。

这里需要提一嘴的是，我们使用 map 遍历的元素，React 会默认在外层嵌套一层 Fragment：

const list = [{name: 'Stefan', id: 1}, {name: 'Edward', id: 2}, {name: 'Simon', id: 3}]
{
  list.map(item => {
	return 
	  {item.name}
	
  })
}

// React底层处理过之后等价于：

  Stefan
  Edward
  Simon

3.1.9、Profiler

Profiler 这个 api 一般用于开发阶段，性能检测，检测一次 react 组件渲染用时，性能开销。

Profiler 需要两个参数：

第一个参数：是 id，用于表识唯一性的 Profiler。

第二个参数：onRender 回调函数，用于渲染完成，接受渲染参数。

const index = () => {
  const callback = (...arg) => console.log(arg)
  return 

    

      
        
          
          
            {renderRoutes(menusList)}
          
        
      
    
  
}

arg 会打印出这些内容：

0: "root",
1: "mount",
2: 6.685000262223184,
3: 4.430000321008265,
4: 689.7299999836832,
5: 698.5799999674782,
6: Set(0) {}

// 他们分别代表着：
0: Profiler 树的 id
1: mount 挂载，update 渲染了
2: 更新 committed 花费的渲染时间。
3: 渲染整颗子树需要的时间
4: 本次更新开始渲染的时间
5: 本次更新committed 的时间
6: 本次更新的 interactions 的集合

Profiler 是一个轻量级的组件，但是我们也应该只在需要的时候使用它。

3.1.10、StrictMode

StrictMode 见名知意，严格模式，用于检测 react 项目中的潜在的问题，。与 Fragment 一样， StrictMode 不会渲染任何可见的 UI 。它为其后代元素触发额外的检查和警告。

严格模式检查仅在开发模式下运行；它们不会影响生产构建。

StrictMode 目前有助于：

• 识别不安全的生命周期

• 关于使用过时字符串 ref API 的警告

• 关于使用废弃的 findDOMNode 方法的警告

• 检测意外的副作用

• 检测过时的 context API

对于不安全生命周期指的是：UNSAFE_componentWillMount，UNSAFE_componentWillReceiveProps，UNSAFE_componentWillUpdate

这些声明周期是官方不推荐使用的，如果在严格模式中使用会控制台报错，在之前大多使用 class 组件的时期如果一定要用这几个声明周期，只有去除严格模式，依然是可以生效的，但是不推荐使用，因为这些生命周期 React 已经停止维护了。React 官方称之为过时的生命周期，且不推荐在新版本 React 中继续使用它们。

class Test extends React.component {
  UNSAFE_componentWillMount () {
    console.log('-- UNSAFE_componentWillMount --')
  }
  
  render () {
	return 
Test
  }
}

// 控制台报错
Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code.
警告：不建议在严格模式下使用不安全的生命周期，这可能表明你的代码有隐患。

3.2、工具类

3.2.1、createElement

一提到 createElement，就不由得和 jsx 联系一起。我们写的 jsx，最终会被 babel，用 createElement 编译成 react 元素形式。我写一个组件，我们看一下会被编译成什么样子：

render () {
  return 
    生命周期

          Flagment      text文本   

} // 编译之后是这样： render() {   return React.createElement("div", { className: "box" },     React.createElement("div", { className: "item" }, "\u751F\u547D\u5468\u671F"),     React.createElement(Text, { mes: "hello,world" }),     React.createElement(React.Fragment, null, " Flagment "),     "text\u6587\u672C"); }

所以我们可以不用 jsx 模式，而是直接通过 createElement 进行开发：

// createElement 模型
React.craeteElement(
  type,
  [props],
  [...children]
)

//  createElement 参数
第一个参数：如果是组件类型就传入组件，如果是 DOM 类型就会传入 div 或者 span 这样的字符串
第二个参数：是一个对象，如果是组件类型就是 props，如果是 DOM 类型就是属性
其他参数：依次为 children，根据顺序排列

经过 createElement 处理，最终会形成 $$typeof = Symbol(react.element) 对象。对象上保存了该 react.element 的信息。

3.2.2、cloneElement

createElement 把我们写的 jsx，变成 element 对象; 而 cloneElement 的作用是以 element 元素为样板克隆并返回新的 React 元素。返回元素的 props 是将新的 props 与原始元素的 props 浅层合并后的结果。

那么 cloneElement 感觉在我们实际业务组件中，可能没什么用，但是在一些开源项目，或者是公共插槽组件中用处还是蛮大的，比如说，我们可以在组件中，劫持 children element，然后通过 cloneElement 克隆 element，混入 props。经典的案例就是 react-router 中的 Swtich 组件，通过这种方式，来匹配唯一的 Route 并加以渲染。

我们设置一个场景，在组件中，去劫持 children，然后给 children 赋能一些额外的 props：

function Father ({ children }) {
  const newChildren = React.cloneElement(children, { age: 24 })
  return 
 {newChildren} 
}

function Son (props) {
  console.log(props)
  return 
hello,world
}

class Test extends React.Component {
  render () {
    return 

      
        
      
    
  }
}

// 控制台打印：
{ name: 'Stefan', age: 24 }

3.2.3、createContext

createContext 用于创建一个Context 对象，createContext 对象中，包括用于传递 Context 对象值 value 的 Provider，和接受 value 变化订阅的Consumer。

const MyContext = React.createContext(defaultValue)

createContext 接受一个参数 defaultValue，如果 Consumer 上一级一直没有 Provider，则会应用 defaultValue 作为 value。只有当组件所处的树中没有匹配到 Provider 时，其 defaultValue 参数才会生效。

我们来模拟一个 Context.Provider 和 Context.Consumer 的例子：

import React from 'react'
const MyContext = React.createContext()

function ComponentB () {
  /* 用 Consumer 订阅， 来自 Provider 中 value 的改变  */
  return 
    {(value) => }
  
}

function ComponentA (props) {
  const { name, mes } = props

  return 

    
 姓名：{name}
    
 想对大家说：{mes}
  
}

function index () {
  const [value] = React.useState({
    name: 'alien',
    mes: 'let us learn React '
  })

  return 
    
      
    
  

}

Provider 和 Consumer 的良好的特性，可以做数据的存和取，Consumer 一方面传递 value，另一方面可以订阅 value 的改变。

Provider 还有一个特性可以层层传递 value，这种特性在 react-redux 中表现的淋漓尽致。

3.2.4、createFactory

React.createFactory(type)

返回用于生成返回用于生成指定类型 React 元素的函数。类型参数既可以是标签名字符串（像是 'div' 或 'span'），也可以是 React 组件 类型 （ class 组件或函数组件），或是 React fragment 类型。

使用：指定类型 React 元素的函数。类型参数既可以是标签名字符串（像是 'div' 或 'span'），也可以是 React 组件 类型 （ class 组件或函数组件），或是 React fragment 类型。

使用：

const Text = React.createFactory(() => 
hello,world
)

function Index () {  
  return (