组件化开发(二)

React 性能优化

diff 优化

React 在 props 或 state 发生改变时，会调用 React 的 render 方法，会创建一颗不同的树

React需要基于这两颗不同的树之间的差别来判断如何有效的更新 UI：

如果一棵树参考另外一棵树进行完全比较更新，那么即使是最先进的算法，该算法的复杂程度为 O(n³)，其中 n 是树中元素的数量
https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf
如果在 React 中使用了该算法，那么展示 1000 个元素所需要执行的计算量将在十亿的量级范围
这个开销太过昂贵了，React的更新性能会变得非常低效

于是，React对这个算法进行了优化，将其优化成了O(n)，如何优化的呢？

同层节点之间相互比较，不会垮节点比较
不同类型的节点，产生不同的树结构
开发中，可以通过 key 来指定哪些节点在不同的渲染下保持稳定

keys 优化

方式一：在最后位置插入数据
- 这种情况，有无 key 意义并不大
方式二：在前面插入数据
- 这种做法，在没有 key 的情况下，所有的 li 都需要进行修改

key 的注意事项：

key 应该是唯一的
key 不要使用随机数（随机数在下一次 render 时，会重新生成一个数字）
使用 index 作为 key，对性能是没有优化的

render 函数优化

在 App 中，我们增加了一个计数器的代码
当点击 +1 时，会重新调用 App 的 render 函数
而当 App 的 render 函数被调用时，所有的子组件的 render 函数都会被重新调用

只要是修改了 App 中，所有组件都需要重新 render，进行 diff 算法，性能必然是很低的

事实上，很多的组件没有必要重新 render
它们调用 render 应该有一个前提，就是依赖的数据（state、props）发生改变时，再调用自己的 render 方法

shouldComponentUpdate

React 给我们提供了一个生命周期方法 shouldComponentUpdate（很多时候，我们简称为SCU），这个方法接受参数，并且需要有返回值：

该方法有两个参数：

参数一：nextProps 修改之后，最新的 props 属性
参数二：nextState 修改之后，最新的 state 属性

该方法返回值是一个 boolean 类型：

返回值为 true，那么就需要调用 render 方法
返回值为 false，那么久不需要调用 render 方法
默认返回的是 true，也就是只要 state 发生改变，就会调用 render 方法

在 App 中增加一个 message 属性：

jsx 中并没有依赖这个 message，那么它的改变不应该引起重新渲染
但是因为 render 监听到 state 的改变，就会重新 render，所以最后 render 方法还是被重新调用了

jsx

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

  shouldComponentUpdate(nextProps, newState) {
    if (this.state.message !== newState.message) {
      return true
    }
    return false
  }
}

PureComponent

如果所有的类，我们都需要手动来实现 shouldComponentUpdate，那么会给我们开发者增加非常多的工作量

事实上 React 已经考虑到了这一点，所以 React 已经默认帮我们实现好了，如何实现呢？

将 class 继承自 PureComponent

jsx

import React, { PureComponent } from 'react'
export class Home extends PureComponent { }

高阶组件 memo

目前我们是针对类组件可以使用 PureComponent，那么函数式组件呢？

事实上函数式组件我们在 props 没有改变时，也是不希望其重新渲染其 DOM 树结构的

我们需要使用一个高阶组件 memo：

将函数式组件通过 memo 函数进行一层包裹

jsx

import { memo } from 'react'
const Profile = memo(function (props) { })

标识是否是 PureComponent
如果是 PureComponent 做浅层比较（对比 state 和 props）
浅层比较 shallowEqual

state 不可变力量

修改 state 中的某一个数据（引用类型）

先对数据进行拷贝操作
修改拷贝之后对象，设置新对象

ref

在 React 的开发模式中，通常情况下不需要、也不建议直接操作DOM原生，但是某些特殊的情况，确实需要获取到 DOM 进行某些操作：

管理焦点，文本选择或媒体播放
触发强制动画
集成第三方 DOM 库
我们可以通过 refs 获取 DOM

如何创建 refs 来获取对应的DOM呢？目前有三种方式：

方式一：传入字符串
- 使用时通过 this.refs.传入的字符串格式获取对应的元素
方式二：传入一个对象
- 对象是通过 React.createRef() 方式创建出来的
- 使用时获取到创建的对象其中有一个 current 属性就是对应的元素
方式三：传入一个函数
- 该函数会在 DOM 被挂载时进行回调，这个函数会传入一个元素对象，我们可以自己保存
- 使用时，直接拿到之前保存的元素对象即可

jsx

import React, { PureComponent, createRef } from 'react'
export class App extends PureComponent {
  constructor() {
    super()
    this.state = {}
    this.titleRef = createRef()
    this.titleEl = null
  }

  getNativeDOM() {
    // 1.方式一: 在React元素上绑定一个ref字符串
    console.log(this.refs.why)
    // 2.方式二: 提前创建好ref对象, createRef(), 将创建出来的对象绑定到元素
    console.log(this.titleRef.current)
    // 3.方式三: 传入一个回调函数, 在对应的元素被渲染之后, 回调函数被执行, 并且将元素传入
    console.log(this.titleEl)
  }

  render() {
    return (
      <div>
        <h2 ref='why'>Hello World</h2>
        <h2 ref={this.titleRef}>Hello Dog</h2>
        <h2 ref={el => (this.titleEl = el)}>Hello Bird</h2>
        <button onClick={e => this.getNativeDOM()}>获取DOM</button>
      </div>
    )
  }
}

ref 的值根据节点的类型而有所不同：

当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性
当 ref 属性用于自定义 class 组件时，ref 对象接收组件的挂载实例作为其 current 属性

ref 不能应用于函数式组件

因为函数式组件没有实例，所以不能获取到对应的组件对象

在开发中我们可能想要获取函数式组件中某个元素的 DOM，这个时候我们应该如何操作呢？

方式一：直接传入 ref 属性（错误的做法）
方式二：通过 forwardRef 高阶函数

受控组件和非受控组件

在 React 中，HTML 表单的处理方式和普通的 DOM 元素不太一样：表单元素通常会保存在一些内部的 state

受控组件

在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）之类的表单元素通常自己维护 state，并根据用户输入进行更新
而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState() 来更新

checkbox 多选，需要对数据进行 map 循环处理，不能像 vue 一样，v-model 一个数组
select 多选，需要对数据这样处理 Array.from(event.target.selectedOptions, item => item.value)

jsx

import React, { PureComponent } from 'react'

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      username: '',
      password: '',
      isAgree: false,
      hobbies: [
        { value: 'sing', text: '唱', isChecked: false },
        { value: 'dance', text: '跳', isChecked: false },
        { value: 'rap', text: 'rap', isChecked: false }
      ],
      fruit: ['orange']
    }
  }

  handleSubmitClick(event) {
    event.preventDefault()
    const hobbies = this.state.hobbies
      .filter(item => item.isChecked)
      .map(item => item.value)
  }
  handleInputChange(event) {
    this.setState({ [event.target.name]: event.target.value })
  }
  handleAgreeChange(event) {
    this.setState({ isAgree: event.target.checked })
  }
  handleHobbiesChange(event, index) {
    const hobbies = [...this.state.hobbies]
    hobbies[index].isChecked = event.target.checked
    this.setState({ hobbies: hobbies })
  }
  handleFruitChange(event) {
    // const options = Array.from(event.target.selectedOptions).map(item => item.value)
    const options = Array.from(event.target.selectedOptions, item => item.value)
    this.setState({ fruit: options })
  }

  render() {
    const { username, password, isAgree, hobbies, fruit } = this.state

    return (
      <div>
        <form onSubmit={e => this.handleSubmitClick(e)}>
          {/* 1.用户名和密码 */}
          <label htmlFor='username'>
            用户:
            <input
              id='username'
              type='text'
              name='username'
              value={username}
              onChange={e => this.handleInputChange(e)}
              />
          </label>
          <label htmlFor='password'>
            密码:
            <input
              id='password'
              type='password'
              name='password'
              value={password}
              onChange={e => this.handleInputChange(e)}
              />
          </label>

          {/* 2.checkbox */}
          <label htmlFor='agree'>
            <input
              id='agree'
              type='checkbox'
              checked={isAgree}
              onChange={e => this.handleAgreeChange(e)}
              />
            同意协议
          </label>


          {/* 3.checkbox 多选 */}
          {hobbies.map((item, index) => {
            return (
              <label key={item.value} htmlFor={item.value}>
                <input
                  type='checkbox'
                  id={item.value}
                  checked={item.isChecked}
                  onChange={e => this.handleHobbiesChange(e, index)}
                  />
                {item.text}
              </label>
            )
          })}

          {/* 4.select */}
          <select value={fruit} onChange={e => this.handleFruitChange(e)} multiple>
            <option value='apple'>苹果</option>
            <option value='orange'>橘子</option>
            <option value='banana'>香蕉</option>
          </select>

          <button type='submit'>注册</button>
        </form>
      </div>
    )
  }
}

非受控组件

React推荐大多数情况下使用受控组件来处理表单数据：

一个受控组件中，表单数据是由 React 组件来管理的
另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理

如果要使用非受控组件中的数据，那么我们需要使用 ref 来从 DOM 节点中获取表单数据

通常使用 defaultValue 来设置默认值
checkbox、radio 支持 defaultChecked，select 和 textarea 支持 defaultValue

jsx

import React, { createRef, PureComponent } from 'react'

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      intro: '哈哈哈'
    }
    this.introRef = createRef()
  }
  handleSubmitClick(event) {
    event.preventDefault()
    console.log(this.introRef.current.value)
  }

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

    return (
      <div>
        <form onSubmit={e => this.handleSubmitClick(e)}>
          {/* 非受控组件 */}
          <input type='text' defaultValue={intro} ref={this.introRef} />
          <button type='submit'>注册</button>
        </form>
      </div>
    )
  }
}

高阶函数

高阶函数的维基百科定义：至少满足以下条件之一：

接受一个或多个函数作为输入
输出一个函数

JavaScript 中比较常见的 filter、map、reduce 都是高阶函数

高阶组件英文：Higher-Order-Components，简称 HOC

高阶组件是参数为组件，返回值为新组件的函数
高阶组件本身不是一个组件，而是一个函数。这个函数的参数是一个组件，返回值也是一个组件

组件名称问题：

在 ES6 中，类表达式中类名是可以省略的
组件的名称都是可以通过 displayName 来修改

高阶组件并不是 React API 的一部分，它是基于 React 的组合特性而形成的设计模式

比如 redux 中的 connect
比如 react-router 中的 withRouter

jsx

function hoc(WrapperComponent) {
  class higherOrderComponent extends PureComponent {
    render() {
      return <WrapperComponent />
    }
  }
  higherOrderComponent.displayName = 'hightOrder'
  return higherOrderComponent
}

class HelloWorld extends PureComponent {
  render() {
    return <h1>Hello World</h1>
  }
}
const HelloWorldHOC = hoc(HelloWorld)

props 增强

高阶组件本质就是对传入的组件进行拦截，对原来你想具备的功能在拦截过程中进行增强

jsx

import React, { PureComponent } from 'react'

// 给一些需要特殊数据的组件，注入 props
function enhanceUserInfo(OriginComponent) {
  class NewComponent extends PureComponent {
    constructor() {
      super()
      this.state = {
        userinfo: {
          name: 'bird',
          age: 99
        }
      }
    }
    render() {
      return <OriginComponent {...this.props} {...this.state.userinfo} />
    }
  }
  return NewComponent
}

const Home = enhanceUserInfo(function (props) {
  return <h1>Home {props.name}</h1>
})

const Profile = enhanceUserInfo(function (props) {
  return <h1>Profile {props.banner}</h1>
})

export class App extends PureComponent {
  render() {
    return (
      <div>
        <Home />
        <Profile banner={'aaa'} />
      </div>
    )
  }
}

export default App

Context 共享

App.jsx

jsx

import React, { PureComponent } from 'react'
import Product from './pages/Product'
import ThemeContext from './context/theme_context'

export class App extends PureComponent {
  render() {
    return (
      <div>
        <ThemeContext.Provider value={{ color: 'blue', size: 'mini' }}>
          <Product />
        </ThemeContext.Provider>
      </div>
    )
  }
}

export default Appimport React, { PureComponent } from 'react'

// 给一些需要特殊数据的组件，注入 props
function enhanceUserInfo(OriginComponent) {
  class NewComponent extends PureComponent {
    constructor() {
      super()
      this.state = {
        userinfo: {
          name: 'bird',
          age: 99
        }
      }
    }
    render() {
      return <OriginComponent {...this.props} {...this.state.userinfo} />
    }
  }
  return NewComponent
}

const Home = enhanceUserInfo(function (props) {
  return <h1>Home {props.name}</h1>
})

const Profile = enhanceUserInfo(function (props) {
  return <h1>Profile {props.banner}</h1>
})

export class App extends PureComponent {
  render() {
    return (
      <div>
        <Home />
        <Profile banner={'aaa'} />
      </div>
    )
  }
}

export default App

pages/Product.jsx

jsx

import React, { PureComponent } from 'react'
import ThemeContext from '../context/theme_context'
import withTheme from '../hoc/with_theme.js'

/* export class Product extends PureComponent {
  render() {
    return (
      <div>
        <ThemeContext.Consumer>
          {value => {
            return (
              <h2>
                theme {value.color} - {value.size}
              </h2>
            )
          }}
        </ThemeContext.Consumer>
      </div>
    )
  }
} */

export class Product extends PureComponent {
  render() {
    const { color, size } = this.props
    return (
      <div>
        Product {color}-{size}
      </div>
    )
  }
}

export default withTheme(Product)

context/theme_context.jsx

jsx

import ThemeContext from '../context/theme_context'

function withTheme(OriginComponent) {
  return props => {
    return (
      <ThemeContext.Consumer>
        {value => {
          return <OriginComponent {...value} {...props} />
        }}
      </ThemeContext.Consumer>
    )
  }
}

export default withTheme

登录鉴权

App.jsx
- 不推荐使用 forceUpdate 刷新视图，推荐更改 state 刷新视图

jsx

import React, { PureComponent } from 'react'
import Cart from './pages/Cart'

export class App extends PureComponent {
  loginClick() {
    localStorage.setItem('token', 'token')
    this.forceUpdate()
  }
  logoutClick() {
    localStorage.removeItem('token')
    this.forceUpdate()
  }

  render() {
    return (
      <div>
        App
        <button onClick={e => this.loginClick()}>登录</button>
        <button onClick={e => this.logoutClick()}>登出</button>
        <Cart />
      </div>
    )
  }
}

export default App

pages/Cart

jsx

import React, { PureComponent } from 'react'
import loginAuth from '../hoc/login_auth'


export class Cart extends PureComponent {
  render() {
    return (
      <div>
        <h2>Cart</h2>
      </div>
    )
  }
}

export default loginAuth(Cart)

hoc/login_auth.js

jsx

function loginAuth(OriginComponent) {
  return props => {
    const token = localStorage.getItem('token')
    if (token) {
      return <OriginComponent {...props} />
    } else {
      return <h2>请先登录</h2>
    }
  }
}

export default loginAuth

生命周期

jsx

import { PureComponent } from 'react'

function logRenderTime(OriginComponent) {
  return class extends PureComponent {
    UNSAFE_componentWillMount() {
      this.beginTime = new Date().getTime()
    }
    componentDidMount() {
      this.endTime = new Date().getTime()
      const interval = this.endTime - this.beginTime
      console.log(`当前${OriginComponent.name}页面花费了${interval}ms渲染完成!`)
    }

    render() {
      return <OriginComponent {...this.props} />
    }
  }
}

export default logRenderTime

意义

利用高阶组件可以针对某些 React 代码进行更加优雅的处理

早期的 React 有提供组件之间的一种复用方式是 mixin，目前已经不再建议使用：

Mixin 可能会相互依赖，相互耦合，不利于代码维护
不同的 Mixin 中的方法可能会相互冲突
Mixin 非常多时，组件处理起来会比较麻烦，甚至还要为其做相关处理，这样会给代码造成滚雪球式的复杂性

HOC 也有自己的一些缺陷：

HOC 需要在原组件上进行包裹或者嵌套，如果大量使用 HOC，将会产生非常多的嵌套，这让调试变得非常困难
HOC 可以劫持 props，在不遵守约定的情况下也可能造成冲突

Hooks 的出现，是开创性的，它解决了很多 React 之前的存在的问题

比如 this 指向问题、比如 hoc 的嵌套复杂度问题等等

函数式组件中的高阶组件：

memo -> PureComponent
forwardRef -> function(props, ref) {}

Portals

某些情况下，我们希望渲染的内容独立于父组件，甚至是独立于当前挂载到的 DOM 元素中（默认都是挂载到 id 为 root 的 DOM 元素上的）

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案：

第一个参数（child）是任何可渲染的 React 子元素，例如一个元素、字符串或 fragment
第二个参数（container）是一个 DOM 元素

通常来讲，当你从组件的 render 方法返回一个元素时，该元素将被挂载到 DOM 节点中离其最近的父节点

jsx

import React, { PureComponent } from 'react'
import { createPortal } from 'react-dom'

export class App extends PureComponent {
  render() {
    return (
      <div className='app'>
        <h1>h1</h1>
        {createPortal(<h2>h2</h2>, document.querySelector('#why'))}
      </div>
    )
  }
}

export default App

fragment

在之前的开发中，我们总是在一个组件中返回内容时包裹一个 div 元素

如果我们希望可以不渲染这样一个 div 应该如何操作？

使用 Fragment
Fragment 允许你将子列表分组，而无需向 DOM 添加额外节点

React 还提供了 Fragment 的短语法：

它看起来像空标签 <></>
如果我们需要在 Fragment 中添加 key，那么就不能使用短语法

jsx

import React, { PureComponent, Fragment } from 'react'

export class App extends PureComponent {
  constructor() {
    super()
    this.state = {
      sections: [
        { title: '哈哈哈', content: '我是内容, 哈哈哈' },
        { title: '呵呵呵', content: '我是内容, 呵呵呵' }
      ]
    }
  }

  render() {
    const { sections } = this.state
    return (
      <>
        {sections.map(item => {
          return (
            <Fragment key={item.title}>
              <h2>{item.title}</h2>
              <p>{item.content}</p>
            </Fragment>
          )
        })}
      </>
    )
  }
}

StrictMode

StrictMode 是一个用来突出显示应用程序中潜在问题的工具：

与 Fragment 一样，StrictMode 不会渲染任何可见的 UI
它为其后代元素触发额外的检查和警告
严格模式检查仅在开发模式下运行，它们不会影响生产构建

严格模式检查什么？

识别不安全的生命周期
使用过时的 ref API
检查意外的副作用
- 这个组件的 constructor 会被调用两次
- 这是严格模式下故意进行的操作，让你来查看在这里写的一些逻辑代码被调用多次时，是否会产生一些副作用
- 在生产环境中，是不会被调用两次的
使用废弃的 findDOMNode 方法
- 在之前的 React API中，可以通过 findDOMNode 来获取 DOM，不过已经不推荐使用了
检测过时的 context API
- 早期的 Context 是通过 static 属性声明 Context 对象属性，通过 getChildContext 返回 Context 对象等方式来使用 Context 的

组件化开发(二) ​

React 性能优化 ​

diff 优化 ​

render 函数优化 ​

PureComponent ​

ref ​

受控组件和非受控组件 ​

受控组件 ​

非受控组件 ​

高阶函数 ​

props 增强 ​

Context 共享 ​

登录鉴权 ​

生命周期 ​

意义 ​

Portals ​

fragment ​

StrictMode ​