少踩點(diǎn)坑，你值得知道的React事件綁定

Riddler 發(fā)布于2019-08-21 11:21 / 1105人閱讀

摘要：比如在的時(shí)候組件掛載的時(shí)候會(huì)根據(jù)指定的參數(shù)繼續(xù)向下執(zhí)行，則會(huì)在掛載的時(shí)候還沒(méi)發(fā)生點(diǎn)擊事件就直接執(zhí)行了父組件的函數(shù)。即中轉(zhuǎn)函數(shù)的效果，保證了時(shí)的函數(shù)都是并且也防止了子組件在掛載時(shí)，順著調(diào)用父組件的函數(shù)從而避免了一系列錯(cuò)誤。

寫在前面

以前寫Vue寫慣了，心血來(lái)潮，寫起了react。

github地址：Close2React

項(xiàng)目使用框架版本主要有 react(15.4.1) + react-dom(15.4.1) + webpack(1.13.3) + axios(0.15.3) + node(6.2.2), 點(diǎn)擊查看項(xiàng)目簡(jiǎn)介：一段人人都應(yīng)該知道的從 vue 到 react 的過(guò)渡史

目前該項(xiàng)目有兩個(gè)分支, half-es6 + master

half-es6和master實(shí)現(xiàn)的功能一樣, 實(shí)現(xiàn)了CURD + Axios + Others

half-es6的寫法并沒(méi)有完全使用es6的class的概念, master是完善了它

現(xiàn)在讓我們快速了解React的事件綁定都有什么坑~
?? ?? ??

案例1： tab示例效果圖

錯(cuò)誤示范

// 父組件主要是為了實(shí)現(xiàn)tab的切換
const Content = React.createClass({
    getInitialState() {
        return {
            tabTxt: ["CURD", "Axios", "Others"],
            choice: 0, //目前激活的tab的下標(biāo)
        }
    },
    
    switchChoice(idx){ // 設(shè)置choice
        this.setState({
            choice: idx
        })
    },
    
    renderTabInit(text, idx) {
        return ({text})
    },
    
    render() { ...... }
});

自以為把方法傳入了子組件，就在Tab子組件中直接this.props.choose調(diào)用父組件的方法

const Tab = React.createClass({
    render(){
        return (
            {this.props.children}
        )
    }
});

結(jié)果瀏覽器打開(kāi)就爆炸了。boom

大概意思就是說(shuō)：
我在父組件中的setState在渲染的時(shí)候?qū)е铝艘粋€(gè)錯(cuò)誤。React不能更新一個(gè)正在變化的state。
組件中的render應(yīng)該是一個(gè)帶有state和props的pure function（純函數(shù)）。如果不是純函數(shù)，構(gòu)造器會(huì)產(chǎn)生一些副作用。
比如在render的時(shí)候（組件掛載的時(shí)候）會(huì)根據(jù)props指定的參數(shù)繼續(xù)向下執(zhí)行，則會(huì)在掛載的時(shí)候（還沒(méi)發(fā)生點(diǎn)擊事件）就直接執(zhí)行了父組件的函數(shù)。
順便解釋一下pure function
1、給出同樣的參數(shù)值，該函數(shù)總是求出同樣的結(jié)果。該函數(shù)結(jié)果值不依賴任何隱藏信息或程序執(zhí)行處理可能改變的狀態(tài)或在程序的兩個(gè)不同的執(zhí)行，也不能依賴來(lái)自I/O裝置的任何外部的輸入
2、結(jié)果的求值不會(huì)促使任何可語(yǔ)義上可觀察的副作用或輸出，例如易變對(duì)象的變化或輸出到I/O裝置

正確姿勢(shì)

const Tab = React.createClass({
    chooseTab() { // 子組件的中轉(zhuǎn)函數(shù)
        this.props.choose(this.props.idx); //在這里調(diào)用父組件的函數(shù)
    },
    
    render(){
        return (
            {this.props.children}
        )
    }
});

這個(gè)中轉(zhuǎn)函數(shù)的名詞是我自己取的，只是這樣就能讓點(diǎn)擊事件的函數(shù)變成pure function，就不會(huì)在組件掛載的時(shí)候就沿著props繼續(xù)向下執(zhí)行，就能避免在掛載組件的時(shí)候就直接調(diào)用父組件的setState了。

案例2 todolist 的編輯 & 保存示例效果圖

錯(cuò)誤示范

// 父組件
const PageA = React.createClass({
    getInitialState() { ... }, // 初始化todolist的數(shù)據(jù)
    componentDidMount(){ ... }, // 掛載組件時(shí)的函數(shù)
    initDidCount() { ... }, // 更新完成的進(jìn)度
    
    handleTxtChange(event){ // 重點(diǎn): 當(dāng)input的輸入值變化時(shí)調(diào)用這個(gè)函數(shù)
        let index = event.target.getAttribute("data-index"); // 強(qiáng)行得到todolist的index
        // 這里一定需要index這個(gè)參數(shù)作為修改this.state.list時(shí)候的下標(biāo)
        this.state.list[index].text = event.target.value; // 把input的值更新到state上去
        this.setState({
            list: this.state.list
        });
        this.initDidCount(); // 更新完成進(jìn)度
    },

    handleCheckChange(event,idx) { ... }, // checkbox的onChange,和input的onChange一樣
    deleteItem(idx) { ... },  // 刪除
    
    initListLi(val,idx) {
        return (
            
        )
    },
    
    render() { ...... }
});

這里也會(huì)和案例1有同樣的情況，父組件用props傳入的方法里面有setState，如果在子組件的reader中直接用this.props.handleTxtChange 調(diào)用的話，會(huì)導(dǎo)致函數(shù)不純。

錯(cuò)誤姿勢(shì)1

// 錯(cuò)誤的父組件1
...
 handleTxtChange(event,idx){ // 重點(diǎn):【錯(cuò)誤寫法1】 強(qiáng)行傳了兩個(gè)參數(shù)
        console.log(event, idx); // 在控制臺(tái)上輸出結(jié)果
            this.state.list[idx].text = event.target.value; // 把input的值更新到state上去
            this.setState({
                list: this.state.list
            });
            this.initDidCount(); // 更新完成進(jìn)度
        },
...


// 錯(cuò)誤的子組件1
...
render (){
        return (
            
                ...
                    {
                    this.state.status?
                        // 重點(diǎn)代碼開(kāi)始
                        :    
                       // 重點(diǎn)代碼結(jié)束
                        {this.props.text}
                }
                ...
            
        )
    }
...

你會(huì)發(fā)現(xiàn)，你想要給props的方法里傳的自定義參數(shù)index能正常獲取，
而框架自帶參數(shù)event怎么都拿不到，
結(jié)果只能如下，event會(huì)變成undefined。

錯(cuò)誤姿勢(shì)2

// 錯(cuò)誤的父組件2
...
 handleTxtChange(event){ // 重點(diǎn):【錯(cuò)誤寫法2】 只有框架自帶參數(shù)event
        console.log(event.target); // 在控制臺(tái)上輸出結(jié)果
         let index = event.target.getAttribute("data-index"); // 強(qiáng)行拿到標(biāo)簽上的自定義屬性
            this.state.list[index].text = event.target.value; // 把input的值更新到state上去
            this.setState({
                list: this.state.list
            });
            this.initDidCount(); // 更新完成進(jìn)度
        },
...


// 錯(cuò)誤的子組件2
...
render (){
        return (
            
                ...
                {
                    this.state.status?
                        // 重點(diǎn)代碼開(kāi)始
                        :    // 不帶參數(shù)
                       // 重點(diǎn)代碼結(jié)束
                        {this.props.text}
                }
                ...
            
        )
    }
...

當(dāng)發(fā)現(xiàn)多傳了參數(shù)，導(dǎo)致了框架自帶的默認(rèn)參數(shù)event怎么都取不到的時(shí)候，
決定不傳參數(shù)，用其他歪門邪道（比如自定義屬性）拿到想要的參數(shù)。
在input中輸入內(nèi)容，結(jié)果如下。雖然正確，但這樣寫感覺(jué)實(shí)在是不夠智能。

總之，這樣寫雖然解決了問(wèn)題，但我還是覺(jué)得姿勢(shì)還是不對(duì)。

正確姿勢(shì)

// 正確的父組件
...
    handleTxtChange(event,idx){// 重點(diǎn):【正確姿勢(shì)】 不僅帶了框架默認(rèn)參數(shù)event，還帶了自定義參數(shù)
        this.state.list[idx].text = event.target.value;
        this.setState({ // 最正常的賦值寫法
            list: this.state.list
        });
        this.initDidCount();
    },
...

// 正確的子組件
...
    handleTxt(event) {
        // 用一個(gè)中轉(zhuǎn)函數(shù)來(lái)存onChange時(shí)會(huì)調(diào)用的父組件的函數(shù)
        // 并加上任意的參數(shù)
        this.props.handleTxtChange(event, this.props.index);
    },
    
    render (){
        return (
            
                ...
                {
                    this.state.status?
                        // 重點(diǎn)代碼開(kāi)始
                        :
                         // 重點(diǎn)代碼結(jié)束
                        {this.props.text}
                }
                    ...
            
        )
    }
...

如果這樣寫的話，是達(dá)到了和案例1一樣的效果。
即中轉(zhuǎn)函數(shù)的效果，保證了render時(shí)的函數(shù)都是pure function
并且也防止了子組件在掛載時(shí)，render順著this.props.function調(diào)用父組件的函數(shù)
從而避免了一系列錯(cuò)誤。

案例3

案例3純粹是為了演示一個(gè)增加操作，在增加一條記錄后，需要清空input的內(nèi)容時(shí)踩的坑

// 父組件
    addLiItem(obj) {
        this.state.list.push(obj); // 沒(méi)啥好說(shuō)，就是添加一個(gè)元素到list中去
        this.setState({
            list: this.state.list
        });
        this.initDidCount();
    },

// 子組件
const Add = React.createClass({
    getInitialState() {
        return {
            addValue: "",
            addStatus: false
        }
    },
    
    handleAddChange(event) {
        this.setState({
            addValue: event.target.value
        })
    },
    
    add(){
        this.props.addLiItem({
            text: this.state.addValue,
            status: false
        });
        this.setState({ //【重點(diǎn)部分】
            addValue: ""
        }, ()=>{
            this.refs.addIpt.value = ""; // 利用ref操作dom
        });
    },
    // 如果只是setState的時(shí)候發(fā)現(xiàn)完成沒(méi)辦法達(dá)到清空的效果
    // 這時(shí)候的【正確姿勢(shì)】是去操作dom，一定要操作dom
    render() {
        return (
            
               // 定義了一個(gè)ref是addIpt的input標(biāo)簽
                
                
            
        )
    }
});

總結(jié)

為了盡可能使用pure function，也為了保證掛載的時(shí)候不要出問(wèn)題
在子組件需要調(diào)用父組件的this.props.function的時(shí)候
盡可能使用中轉(zhuǎn)函數(shù)
你懂得~~

寫在后面

github地址：Close2React

我是嘉寶Appian，一個(gè)賣萌出家的算法妹紙。