react寫代碼個人心得

處理一個問題，將之分化爲多個片段去處理，多的不好理解，單個總會理解吧。

多個片段的好處：

    邏輯清晰明瞭，

    出現問題，便於排查

    代碼的易讀性

    維護性較強

一個方法處理一個問題

不要所有的邏輯都在一個方法裏面去處理

代碼都在一個方法裏面，看得頭痛，不容易讀懂，不容易把控

如果把控不了幾十上百行的代碼，那就將之簡化爲十行以內的東西

這樣不容易出現問題，就算出現問題也便於我們排查

 

我將這個分爲三步走：

//主頁面

//基類處理數據

//數據的展示

//主頁面
export class WorkIndex extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            workData:null
        }
    }

    componentDidMount(){
        // 獲取數據操作
    }

    //定義一個方法
    OnDone=(e,data)=>{
        //操作數據
        let {result}  = this.state;
        // 拿到返回過來的數據
        if(data){
            if(!result) result =[];
            result.push(data)
        }
        this.setState({result});
    }

    render(){
        let {workData} = this.state;
        return <div>
            <h2>主頁面</h2>
            {/* 主要視圖 */}
            <WorkPage  workData={workData} OnDone={this.OnDone}/>
        </div>
    }
}

 

//數據實例---數據操作
class WorkManipulation{
    WorkData;
    constructor(WorkData){
        // 在這裏對數據重新處理 --將處理的數據放到 this.WorkData;
        //例子  如果WorkData是一個數據
        for(let i=0;i<workerData.length;i++){
            this.WorkData.push({
                newWorkDataOne:workerData[i].data1,
                newWorkDataTwo:workerData[i].data2,
                newWorkDataThree:workerData[i].data3,
                // ...跟多數據的操作
            })
        }
    }


    //驗證數據 例子1
    check(index){
        let newData = this.WorkData[index];//拿到具體的數據
        if(newData.newWorkDataOne==1) return true;
        else return false;
    }

    //提取新的數據
    getNewData(params){
        let changeData=this.WorkData;
        let newData =  changeData.map(item=>item.newWorkDataTwo!==params);
        return newData;
    }
    // 更多的操作方法 。。。。
}

 

// 數據的交互實例
class WorkPage extends React.Component{
    constructor(props){
        super(props)
        this._startWork(props)
    }

    componentWillReceiveProps(props){
        this._startWork(props);
    }

    _startWork(props){
        // 獲取數據
        let  work = new WorkManipulation(props.workData);//將數據進行處理
        this.state = {work,index:0,result:[],startTime:new Date().getTime(0)};
        this._changeWay(params);//進行一些其他的操作
    }
    _changeWay(params){
        //操作代碼 ....
    }
    OnDone(){
        let {OnDone} = this.props;
        let returnParams = {
            //需要返回過去的數據
        }
        if(OnDone) OnDone(this,returnParams)
    }
    render(){
        return <div>
            <h3>數據展示</h3>
            {/* 內容排版 */}
            {/* 數據操作等 ----例子*/}
            <button onClick={()=>this.OnDone()}>點擊處理數據</button>
        </div>
    }
}

 

按照這種模式，提高了我的開發效率，增強代碼的可讀性。減少不必要的時間浪費。