react性能優化

時間 2019-12-11

標籤 react 性能優化欄目 React 简体版

原文原文鏈接

react是由facebook公司推出的,主打的口號就是高性能。那麼咱們在使用的時候，若是能在作一下優化的，那麼react使用的性能會更高，用戶體驗也會更好。css

下面我就列出幾種優化的方案供你們參考一下react

1. setState的優化

16.0更新之後，setSate書寫的時候，能夠直接穿一個帶兩個參數的函數，使得咱們在從新修改state中值不用再定義變量來接收,直接和原來的值比較就能夠了es6

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

2.props的值

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

const { list,name  } = this.props

3. ajax請求的位置

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

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;