前言
1.React相关原理
2.React性能优化
正文
React相关原理介绍
setState方法,这个方法是异步更新数据的,并且多次调用setState方法最后只会重新渲染一次render方法
class App extends React.Component{
state={
num:0
}
Click=()=>{
this.setState({
num:this.state.num+1
})
console.log("当前state时:",this.state.num)
this.setState({
num:this.state.num+1
})
console.log("当前state时:",this.state.num)
}
render(){
console.log("render触发了")
return(
<div>
<h2>当前的state是:{this.state.num}</h2>
<button onClick={this.Click}>+1</button>
</div>
)
}
}
ReactDOM.render(<App />,document.getElementById('root'))
单击+1之后的结果
使用下面这种语法可以获取state的最新值,从而保证每次获取到的state都是最新的。
class App extends React.Component{
state={
num:0
}
Click=()=>{
//采用回调函数做参数,返回需要修改的内容
this.setState((state,props)=>{
return {
num:state.num+1
}
})
console.log("当前state时:",this.state.num)
this.setState((state,props)=>{
return {
num:state.num+1
}
})
console.log("当前state时:",this.state.num)
}
render(){
console.log("render触发了")
return(
<div>
<h2>当前的state是:{this.state.num}</h2>
<button onClick={this.Click}>+1</button>
</div>
)
}
}
ReactDOM.render(<App />,document.getElementById('root'))
单击+1后
值得一提的是用这种方法更新仍然是异步的,可以说setState就是异步的。
setState的第二个参数,是一个回调函数,当render重新渲染完成之后立马执行此函数。这个回调函数的执行在componentDidUpdate之后。
class App extends React.Component{
state={
num:0
}
Click=()=>{
//采用回调函数做参数,返回需要修改的内容
this.setState(
(state,props)=>{
return {
num:state.num+1
}
},
()=>{
console.log("页面重新渲染完成")
})
}
render(){
console.log("render触发了")
return(
<div>
<h2>当前的state是:{this.state.num}</h2>
<button onClick={this.Click}>+1</button>
</div>
)
}
}
ReactDOM.render(<App />,document.getElementById('root'))
单击+1之后的结果
JSX语法是createElement()的简化,JSX语法会被babel插件转化成createElement()方法,最后在createElement()方法内部会将内容转化成一个JSX对象,以键值对的形式储存所有信息。
组件更新机制,当父组件发生重新渲染的时候,所有的子组件也会发生重新渲染,以及子组件的子组件。
对组件性能优化
1.state只存储和组件重新渲染有关系的数据,对于需要在多格函数中用到的数据放在this中。
2.避免不必要的渲染,使用钩子函数shouldComponentUpdate(nextProps,nextState),当返回值为true时表示需要重新渲染,当为false时不需要重新渲染。该函数的运行时期在render之前.
参数为最新的props和state,在函数中调用this.state获取到的是更新前的数据,props同理。
3.纯组件
class App extends React.PureComponent{
state={
num:0
}
changeNum=()=>{
this.setState(()=>{
return {
num:Math.floor(Math.random() *3)
}
})
}
render(){
console.log("render触发了")
return(<div>
<h2>当前的随机数是:{this.state.num}</h2>
<button onClick={this.changeNum}>随机生成</button>
</div>
)
}
}
ReactDOM.render(<App />,document.getElementById('root'))
纯组件相较于普通组件,纯组件继承自React.PureComponent,在纯组件中内置了相当于shouldComponentUpdate(),会去判断数据是否发生了更新从而判断是否要更新组件,当然这种比较是简单的比较,对于一些复杂的数据机构比较可能会出现问题,比如对象在更新数据时不要更新对象里的数据,要重新创建一个对象,更新整个对象.
最后值得一提的是render方法的调用并不表示重新渲染整个页面,表示diff算法执行,只更新需要更新的地方。
结语
笔者也是第一次学习做出的总结,要是能从我这里得到一些帮助最好不过,若有错误还望大佬在评论帮忙指出。