React--组件更新机制和amp;组件性能优化

1.1setState{}的两个作用：

• 修改state
• 更新组件（UI）

1.2过程：父组件重新渲染时，也会重新渲染子组件。但只会渲染当前组件子树（当前组件及其所有子组件）

 2.减轻state

1.  
   class Hello extends Component{
2.  
   componentDidMount(){
3.  
   //timeId存储到this中，而不是state中
4.  
   this.timeId = setInterval(()=>{},2000)
5.  
   }
6.  
   commponentWillUnmount(){
7.  
   clearInterval(this.timerId)
8.  
   }
9.  
   render(){...}
10.  
    }

• 减轻state：只存储跟组件渲染相关的数据（比如：count/列表数据/loading等）
• 注意：不用做渲染的数据不要放在state中，比如定时器id等
• 对于这种需要在多个方法中用到的数据，应该放在this中

3.避免不必要的重新渲染

• 组件更新机制：父组件更新会引起子组件也被更新，这种思路很清晰
• 问题：子组件没有任何变化时也会重新渲染
• 如何避免不必要的重新渲染呢？
• 解决方法：使用钩子函数shouldComponentUpdate（nextProps，nextState）
• 作用：通过返回值决定该组件是否重新渲染，返回true表示重新渲染，false表示不重新渲染 
• 触发时机：更新阶段的钩子函数，组件重新渲染前执行（shouldComponentUpdate-->render）
• 随机数案例

1.  
   import { number } from 'prop-types';
2.  
   import React from 'react';
3.  
   import ReactDOM from 'react-dom';
4.  
   // import MyEditor from './components/MyEditor';
5.  
    
6.  
   class App extends React.Component{
7.  
   state={
8.  
   number:0
9.  
   }
10.  
    handleClick = () =>{
11.  
    this.setState(()=>{
12.  
    return{
13.  
    number: Math.floor(Math.random()*3)
14.  
    }
15.  
     
16.  
    })
17.  
    }
18.  
     
19.  
    shouldComponentUpdate(nextprops,nextState){
20.  
    console.log('最新的state：',nextState)
21.  
    console.log('this.state:',this.state)
22.  
    //返回false，阻止组件重新渲染
23.  
    return false
24.  
    }
25.  
    render(){
26.  
    return(
27.  
    <div>
28.  
    <h1>随机数：{this.state.number}</h1>
29.  
    <button onClick={this.handleClick}>重新生成</button>
30.  
    </div>
31.  
    )
32.  
    }
33.  
    }
34.  
     
35.  
     
36.  
    ReactDOM.render(<App></App>,
37.  
    document.getElementById('root'))

改进：

1.  
   import { number } from 'prop-types';
2.  
   import React from 'react';
3.  
   import ReactDOM from 'react-dom';
4.  
   // import MyEditor from './components/MyEditor';
5.  
    
6.  
   class App extends React.Component{
7.  
   state={
8.  
   number:0
9.  
   }
10.  
    handleClick = () =>{
11.  
    this.setState(()=>{
12.  
    return{
13.  
    number: Math.floor(Math.random()*3)
14.  
    }
15.  
     
16.  
    })
17.  
    }
18.  
     
19.  
    shouldComponentUpdate(nextprops,nextState){
20.  
    console.log('最新的state：',nextState)
21.  
    console.log('this.state:',this.state)
22.  
    // //返回false，阻止组件重新渲染
23.  
    // return false
24.  
    if(nextState.number === this.state.number) return false
25.  
    else return true
26.  
    }
27.  
    render(){
28.  
    console.log('重新渲染')
29.  
    return(
30.  
    <div>
31.  
    <h1>随机数：{this.state.number}</h1>
32.  
    <button onClick={this.handleClick}>重新生成</button>
33.  
    </div>
34.  
    )
35.  
    }
36.  
    }
37.  
     
38.  
     
39.  
    ReactDOM.render(<App></App>,
40.  
    document.getElementById('root'))

更加简洁的写法：if nextState.number !== this.state.number 

4.使用另外一个参数（nextProps） 

1.  
   import { number } from 'prop-types';
2.  
   import React from 'react';
3.  
   import ReactDOM from 'react-dom';
4.  
   // import MyEditor from './components/MyEditor';
5.  
    
6.  
   class App extends React.Component{
7.  
   state={
8.  
   number:0
9.  
   }
10.  
    handleClick = () =>{
11.  
    this.setState(()=>{
12.  
    return{
13.  
    number: Math.floor(Math.random()*3)
14.  
    }
15.  
     
16.  
    })
17.  
    }
18.  
     
19.  
    render(){
20.  
    // console.log('重新渲染')
21.  
    return(
22.  
    <div>
23.  
    <NumberBox number={this.state.number}></NumberBox>
24.  
    <button onClick={this.handleClick}>重新生成</button>
25.  
    </div>
26.  
    )
27.  
    }
28.  
    }
29.  
     
30.  
     
31.  
    class NumberBox extends React.Component{
32.  
    shouldComponentUpdate(nextProps,nextState){
33.  
    console.log('最新的props：',nextProps,',当前props',this.props)
34.  
    return nextProps.number !== this.props.number
35.  
    }
36.  
    render(){
37.  
    console.log('重新渲染')
38.  
    return <h1>随机数：{this.props.number}</h1>
39.  
    }
40.  
    }
41.  
     
42.  
     
43.  
    ReactDOM.render(<App></App>,
44.  
    document.getElementById('root'))

这篇好文章是转载于：学新通技术网