memoization-根据输入重新计算render的数据

在实际开发过程中，经常遇到根据输入数据，重新计算需要渲染的数据的情况。

如实时查询等。

常用方法：

1）在getDerivedStateFromProps()中判断涉及的属性变化，来更新数据。

这种方法在涉及属性较多时，特别复杂。

2）在render()方法中计算数据，并且使用PureComponent。

这种方法只要render就会计算，即使其他无关属性，也会导致重新渲染，从而触发计算。

特别是数据较大时，特别影响性能。

memoization

memoization函数可以解决上面两个方法的弊端。

“memoize-one”只缓存最后一次的结果，不会触发内存泄漏。

示例代码：

import React, {PureComponent} from 'react';
import ReactDOM from 'react-dom';
import memoize from 'memoize-one';

class App extends PureComponent {
  constructor(props) {
    super(props); 
    this.state = {
      list: []
    }
    this.inputRef = React.createRef();
  }
  add = () => {
    this.setState(state => ({
      list: state.list.concat(this.inputRef.current.value)
    }))
  }
  render() {
    return (
      <div>
        <Child list={this.state.list} />
        <br/>
        <input defaultValue="" ref={this.inputRef} />
        <button onClick={this.add}>ClikeMe Add</button>
      </div>
    )
  }
}

class Child extends React.Component {
  state = {
    filterText: null
  }
  // memoize-one可以缓存最后一次的数据和结果；避免内存泄漏
  // 否则在getDerivedStateFromProps中需要比较list前后的值和filterText前后的值
  // 来避免重复计算
  filter = memoize(
    (list, filterText) => list.filter(i => i.includes(filterText))
  )
  static getDerivedStateFromProps(props, state) {
    return null;
  }
  handleChange = (e) => {
    this.setState({
      filterText: e.target.value
    })
  }
  render() {
    const filterList = this.filter(this.props.list, this.state.filterText)
    return (
      <form>
        <fieldset>
          <legend>过滤参数</legend>
          <input onChange={this.handleChange}/>          
        </fieldset>
        {
          filterList && filterList.map((i,index) => (
            <div key={i}>{index}---{i}</div>
          ))
        }
      </form>
    )
  }
}
ReactDOM.render(<App/>, window.root)