函数理解记忆_记忆化技术介绍——使用闭包提升你的 React 性能

导读

1. 动机
2. 记忆化技术
3. 在 React 中使用 memoize-one
4. 用闭包实现记忆化技术
5. React Hook 中的记忆化技术提高你的组件性能

动机

在开发 React 项目中，有一种场景很常见：从服务器中请求了一个数据结构，这个结构非常复杂，甚至还有一些垃圾字段。这个数据结构一般通过 React 组件的 props 传入组件。而我们在render 的时候需要对这个很复杂的数据结构要做处理，比如过滤一些无用的信息，或者重新组合这个数据结构以便更方便的 render。

来看一下这个例子：

class Example extends PureComponent {
  // 当前的过滤文本:
  state = {
    filterText: ""
  };

  handleChange = event => {
    this.setState({ filterText: event.target.value });
  };

  render() {
    // 在 PureComponent 中，render 方发只有在 state.filterText 和 props.list
    // 变化的时候才会重新调用
    const filteredList = this.props.list.filter(
      item => item.text.includes(this.state.filterText)
    )

    return (
      <Fragment>
        <input onChange={this.handleChange} value={this.state.filterText} />
        <ul>{filteredList.map(item => <li key={item.id}>{item.text}</li>)}</ul>
      </Fragment>
    );
  }
}

在上面这个例子中，filter 这一段代码的逻辑其实就是我们所说的，对 从服务器拿来的数据结构 进行处理的过程。每一次调用 render 方法都会调用 filter 这段逻辑。我们在一个组件中更新其实是比较频繁的，而 filter 的逻辑其实也相当占用CPU资源以及时间。如果每次更新调用 render 方法都要走一次这一段 filter 的逻辑，其实是非常消耗时间的。这对 App 的性能也会造成影响