摘要：又一篇來(lái)自日常開(kāi)發(fā)的匯總各位客官請(qǐng)對(duì)號(hào)入席，店小二逐一上菜。解決方案有很多種，例如把字符串?dāng)?shù)組等重組對(duì)象數(shù)組，每個(gè)元素設(shè)置一個(gè)唯一等。另外有個(gè)方式推薦使用生成唯一的數(shù)組，和數(shù)據(jù)數(shù)組一起使用，省去提交數(shù)據(jù)時(shí)再重組數(shù)組。

又一篇來(lái)自日常開(kāi)發(fā)的匯總：各位客官請(qǐng)對(duì)號(hào)入席，店小二逐一上菜。

第一道菜：回鍋肉

react數(shù)組循環(huán)，基本都會(huì)設(shè)置一個(gè)唯一的key，表格的對(duì)象數(shù)組循環(huán)一般沒(méi)什么問(wèn)題，數(shù)據(jù)基本都會(huì)有一個(gè)id。那有種情況就比較坑了，出現(xiàn)在表單形式的頁(yè)面結(jié)構(gòu)中，對(duì)某個(gè)數(shù)組進(jìn)行增刪改操作，一般對(duì)于非對(duì)象數(shù)組而言，沒(méi)有id，可能很多人會(huì)偷懶，循環(huán)的時(shí)候，直接設(shè)置數(shù)組的下標(biāo)index作為key，當(dāng)出現(xiàn)增刪改時(shí)候，就會(huì)出現(xiàn)數(shù)據(jù)對(duì)不上或者重新渲染組件的問(wèn)題等。解決方案有很多種，例如把字符串?dāng)?shù)組等重組對(duì)象數(shù)組，每個(gè)元素設(shè)置一個(gè)唯一id等。另外有個(gè)方式：推薦使用shortid生成唯一key的數(shù)組，和數(shù)據(jù)數(shù)組一起使用，省去提交數(shù)據(jù)時(shí)再重組數(shù)組。

import React from "react";
import shortid from "shortid";

class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: ["a", "b", "c"]
        }
        this.dataKeys = this.state.data.map(v => shortid.generate());
    }
    
    deleteOne = index => { // 刪除操作
        const { data } = this.state;
        this.setState({ data: data.filter((v, i) => i !== index) });
        this.dataKyes.splice(index, 1);
    }
    
    render() {
        return (
            

               {
                   data.map((v, i) => 
                    
 this.deleteOne(i)}  
                        key={this.dataKeys[i]}
                    >
                        {v}
                    
                    )
               } 
            
        )
    }
}
// 稍微抽取，可以封裝一個(gè)通用的組件

第二道菜：番茄炒蛋

通過(guò)判斷值是否存在來(lái)控制元素是否顯示，一般三目運(yùn)算可以達(dá)到此效果，最簡(jiǎn)單的還是用短路的寫(xiě)法：

// 不錯(cuò)
const flag = "something";
flag && 


// 很好
// 注意一般可能上面寫(xiě)法多一些，但當(dāng)flag為0 的時(shí)頁(yè)面上會(huì)顯示0，用!!將其轉(zhuǎn)為boolean避免坑，
// 代碼也更規(guī)范
const flag = "something";
!!flag && 

第三道菜：酸辣土豆絲

使用組件，傳遞props：

const { data, type, something } = this.state;

也許另外一種傳遞方式更簡(jiǎn)潔：

const { data, type, something } = this.state;

第四道菜：清炒時(shí)蔬

組件的props有時(shí)候會(huì)定義很多，但是調(diào)用組件傳遞props的時(shí)候又想一個(gè)個(gè)傳，不想一次性傳遞一個(gè)option對(duì)象，通過(guò)擴(kuò)展運(yùn)算符和解構(gòu)賦值可以簡(jiǎn)化此操作：

const Demo = ({ prop1, prop2, prop3, ...restProps }) => (
    

        xxxx
        { restProps.something }
    
)
// 父組件使用Demo

第五道菜：小吃-糍粑

一般改變state值的一種方式：

const { data } = this.state;
this.setState({ data: {...data, key: 1 } });

另外一種可以通過(guò)callback的方式改變state的值

this.setState(({ data }) => ({ data: {...data, key: 1 } }));

還可以：

this.setState((state, props) => {
    return { counter: state.counter + props.step };
});

第六道菜：水煮肉片

React 性能優(yōu)化有很多種方式，那常見(jiàn)的一種就是在生命周期函數(shù)shouldComponentUpdate里面判斷某些值或?qū)傩詠?lái)控制組件是否重新再次渲染。

判斷一般的字符串，數(shù)字或者基礎(chǔ)的對(duì)象，數(shù)組都還是比較好處理，那嵌套的對(duì)象或者數(shù)組就比較麻煩了，對(duì)于這種，可以轉(zhuǎn)成字符串處理，但屬性值的位置不同時(shí)，那就無(wú)效了。

推薦使用lodash(或者其他的類(lèi)似庫(kù))的isEqual對(duì)嵌套數(shù)組或?qū)ο筮M(jìn)行判斷(相比其他方式更簡(jiǎn)單些)

shouldComponentUpdate(nextProps, nextState) {
    if (_.isEqual(nextState.columns, this.state.columns)) return false;
    return true;
}

第七道菜：干鍋兔

創(chuàng)建彈層的三種方式：

普通組件通過(guò)state和樣式控制，在當(dāng)前組件中顯示彈層-每次引入組件并且render里面控制顯示，掛載節(jié)點(diǎn)在某組件里面

// 彈層 
const Dialog = () => 
彈層
// 某組件
render() {
    return (
        this.state.showDialog && 

    )
}

2.通過(guò)Portals創(chuàng)建通道，在根節(jié)點(diǎn)外部掛載組件-但還是需要每次引入并且在render里面調(diào)用

// 彈層 
class Dialog extends React.Component {
  constructor(props) {
    super(props);
    this.el = document.createElement("div");
  }
  componentDidMount() {
    modalRoot.appendChild(this.el);
  }
  componentWillUnmount() {
    modalRoot.removeChild(this.el);
  }

  render() {
    return ReactDOM.createPortal(
      this.props.children || 
xxxx
,
      this.el,
    );
  }
}
// 某組件
render() {
    return (
        this.state.showDialog && 

    )
}

3.推薦使用ReactDom.render創(chuàng)建彈層-掛載根節(jié)點(diǎn)外層，使用也更方便

// demo
let dialog;
class Dialog {
    show(children) {    // 顯示
        this.div = document.createElement("div");
        document.body.appendChild(this.div);

        ReactDom.render(children || 
xxxx
, this.div);
    }
    destroy() {     // 銷(xiāo)毀
        ReactDom.unmountComponentAtNode(this.div);
        this.div.parentNode.removeChild(this.div);
    }
}
export default {
    show: function(children) {
        dialog = new Dialog();
        dialog.show(children);
    },
    hide: xxxxx
};
// 某組件
import Dialog from "xxx";
alert = () => {
    Dialog.show(xxxx);
}
render() {
    return (
        點(diǎn)擊彈層
    )
}

第八道菜：火燒肉

render props是現(xiàn)在很流行的一種渲染方式，通過(guò)回調(diào)函數(shù)，渲染子組件，參數(shù)可為父組件的任意屬性值（官網(wǎng)也有相應(yīng)的介紹）新版的contextApi也采用了這個(gè)模式。

很多種場(chǎng)景使用此方式的做法：

// 權(quán)限控制組件，只需要封裝一次connect，
// 通過(guò)render props向子組件傳遞權(quán)限
class AuthWidget extends Component {
    render() {
        return this.props.children(this.props.auth);
    }
}

const mapStateToProps = state => {
    const { auth } = state;
    return { auth: state.auth };
};
export default connect(mapStateToProps)(AuthWidget);

// 其他組件使用
 auth.edit && 編輯}
/>

// 使用antd的form時(shí)
const Test = ({ form, children }) => {
    return children(form);
};
const FormTest = Form.create()(Test);

class Demo extends Component {
    render() {
        return (
            

                xxxxx
                
                    { form => {
                        this.form = form;
                        return (
                            

                                
                                    {getFieldDecorator("field", xxx)(
                                        
                                    )}
                                
                            
                        )
                    }}
                
            
        )
    }
}

第九道菜：粉絲白菜蝦仁湯

子組件改變父組件的state方式有很多種，可以在父組件設(shè)置一個(gè)通用函數(shù)，類(lèi)似：setParentState，通過(guò)子組件回調(diào)處理時(shí)，就可以更方便的統(tǒng)一處理：

// 父組件
state = {
    data: {}
}
setParentState = obj => {
    this.setState(obj);
}
// 子組件
onClick = () => {
    this.props.setParentState({ data: xxx });
}

第十道菜：麻婆豆腐

永遠(yuǎn)不要直接設(shè)置state的值：this.state.data = { a: 1 }。這個(gè)會(huì)導(dǎo)致幾個(gè)問(wèn)題：
1：組件不會(huì)重新渲染 2：shouldComponentUpdate(nextProps, nextState) 函數(shù)里面 this.state的值是已經(jīng)改變了,和nextState的值相同。

舉個(gè)栗子：

// wrong
const { data } = this.state;
data.a = 1;     // 等價(jià)于this.state.data.a = 1;
this.setState({ data }); // shouldComponentUpdate里面觀察到 this.state 和nextState的值是相同的
// 此時(shí)函數(shù)里面性能相關(guān)的優(yōu)化是無(wú)效的

// correct  需要用到當(dāng)前state值的寫(xiě)法
this.setState(state => ({ data: {...state.data, a: 1} }))

各位客官，菜已上齊，請(qǐng)慢用
react相關(guān)討論，請(qǐng)加Q群：743490497