React memoization技术：将函数计算结果缓存起来

import React, { Component } from "react";
import memoize from "memoize-one";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fruits: ["orange??", "apple??", "peach??"], // 水果列表
      txt: "", // 筛选文本
      counter: 0 // 计数器
    };
  }

  filter = memoize((fruits, txt) => {
    console.log("函数返回值未缓存，计算");
    return fruits.filter(fruit => fruit.includes(txt));
  });

  changeHandler = e => {
    this.setState({
      txt: e.target.value
    });
  };

  increase = () => {
    const { counter } = this.state;
    this.setState({
      counter: counter + 1
    });
  };

  render() {
    console.log("组件渲染");

    const { fruits, txt, counter } = this.state;
    const favorFruits = this.filter(fruits, txt);

    return (
      <div>
        <div>
          计数器：{counter}
          <button onClick={this.increase}>增加</button>
        </div>
        <input onChange={this.changeHandler} value={txt} placeholder="请输入水果名称"/>
        <ul>
          {favorFruits.map(fruit => (
            <li key={fruit}>{fruit}</li>
          ))}
        </ul>
      </div>
    );
  }
}