在实际开发过程中，经常遇到根据输入数据，重新计算需要渲染的数据的情况。
如实时查询等。
1）在getDerivedStateFromProps()中判断涉及的属性变化，来更新数据。
这种方法在涉及属性较多时，特别复杂。
2）在render()方法中计算数据，并且使用PureComponent。
这种方法只要render就会计算，即使其他无关属性，也会导致重新渲染，从而触发计算。
特别是数据较大时，特别影响性能。
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))
)
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)
原文：https://www.cnblogs.com/lyraLee/p/11973196.html