react性能優化

react是由facebook公司推出的,主打的口號就是高性能。那么我們在使用的時候，如果能在做一下優化的，那么react使用的性能會更高，用戶體驗也會更好。

下面我就列出幾種優化的方案供大家參考一下

1.  setState的優化

16.0更新以后，setSate書寫的時候，可以直接穿一個帶兩個參數的函數，使得我們在重新修改state中值不用再定義變量來接收,直接和原來的值比較就可以了

this.setState((prev) => ({
    list: [...prev.list, prev.inputValue],
    inputValue: ''
}))

2.props的值

props接收的值使用es6解構的方式來接收

const { list,name  } = this.props

3. ajax請求的位置

定義的事件修改this指向的時候,不建議寫在jsx中,而是寫到 constructor里面

constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
 }
  render() {
        const { item } = this.props
        return (
            <div>
                <div onClick={this.handleClick}>{item}</div>
            </div>
        )
    }

4.如果組件里面沒有邏輯處理的話,只是顯示一些UI效果的話,可以把組件改為無狀態組件,需要展示的數據和方法直接接受父組件傳過來的就可以了

import React, { Fragment } from 'react';
import 'antd/dist/antd.css'
import {Input,Button,List} from 'antd'
 const TodoListUI=(props)=>{
     return (
        <Fragment>
            <div className="form-box">
            <Input placeholder="請輸入" value={props.inputValue} onChange={props.handleChange}style={{width:'300px'}}/>
            <Button type="primary" style={{marginLeft:'20px'}} onClick={props.handleSubmit}>提交</Button>
        </div>
        <div  className="list">
            <List
                size="small"
                bordered
                dataSource={props.list}
                renderItem={(item,index) => (<List.Item onClick={()=>{props.handleDelete(index)}}>{item}</List.Item>)}
            />
        </div>      
        </Fragment>
     )
 }

export default TodoListUI;

5.ajax請求放在(componentDidMount)中,因為componentDidMount生命周期的話,打開只會渲染一次,這樣會大大的提高了性能

6.父子組件傳值的時候,使用shouldComponentUpdate來判斷父向子傳的內容是否有變化,沒變化的話,子組件就不需要渲染

7.如果覺得上面這個方法麻煩的話,我們可以定義組件的時候,不要使用Component而是使用純函數PureComponent,這樣的話,如果使用redux的時候,當前該組件所使用的數據沒有發生變化的話,組件是不會重新渲染的