react性能优化达到最大化的方法 immutable.js使用的必要性
115 浏览量
2020-12-12
15:15:54
上传
评论
收藏 83KB PDF 举报
react性能优化达到最大化的方法性能优化达到最大化的方法 immutable.js使用的必要性使用的必要性
一行代码胜过千言万语。这篇文章呢，主要讲述我一步一步优化react性能的过程，为什么要用immutable.js呢。毫不夸张的
说。有了immutable.js（当然也有其他实现库）。。才能将react的性能发挥到极致！要是各位看官用过一段时间的react，而
没有用immutable那么本文非常适合你。那么我开始吧！
1、对于、对于react的来说，如果父组件有多个子组件的来说，如果父组件有多个子组件
想象一下这种场景，一个父组件下面一大堆子组件。然后呢，这个父组件re－render。是不是下面的子组件都得跟着re－
render。可是很多子组件里面是冤枉的啊！很多子组件的props 和 state 然而并没有改变啊！！虽然virtual dom 的diff 算法很
快，但是性能也不是这么浪费的啊！下面我们上代码
1）.原始代码如下
以下是父组件代码。。负责输入name 和 age 然后循环显示name 和 age
export default class extends Component {
constructor(props){
super(props)
this.state={
name:"",
age :"",
persons:[] }
}
render() {
const {name,age,persons} = this.state
return (
<div>
<span>姓名:</span><input value={name} name="name" onChange={this._handleChange.bind(this)}></input>
<span>年龄:</span><input value={age} name="age" onChange={this._handleChange.bind(this)}></input>
<input type="button" onClick={this._handleClick.bind(this)} value="确认"></input>
{persons.map((person,index)=>(
<Person key={index} name={person.name} age={person.age}></Person>
))}
</div>
)
}
_handleChange(event){
this.setState({[event.target.name]:event.target.value})
}
_handleClick(){
const {name,age} = this.state
this.setState({
name:"",
age :"",
persons:this.state.persons.concat([{name:name,age:age}])
})
}
}
以下是子组件代码单纯的显示name和age而已
class Person extends Component {
componentWillReceiveProps(newProps){
console.log(`我新的props的name是${newProps.name}，age是${newProps.age}。我以前的props的name是${this.props.name}，age是${this.props.age}是
我要re-render了`);
}
render() {
const {name,age} = this.props;
return (
<div>
<span>姓名:</span>
<span>{name}</span>
<span> age:</span>
<span>{age}</span>
</div>
)
}
}
运行起来长下图这个样
资源评论
