深入理解react

CoderStudy 發(fā)布于2019-08-23 13:52 / 1577人閱讀

摘要：最近在看源碼，發(fā)覺(jué)以前對(duì)的理解實(shí)在浮淺，這里記錄了一些以前疏忽的點(diǎn)。和在里面，經(jīng)過(guò)的解析后，會(huì)變成執(zhí)行后的結(jié)果。原來(lái)對(duì)的理解就是類(lèi)似這種寫(xiě)法，現(xiàn)在看了實(shí)現(xiàn)之后才理解。

最近在看react源碼，發(fā)覺(jué)以前對(duì)react的理解實(shí)在浮淺，這里記錄了一些以前疏忽的點(diǎn)。

createElement和component

在react里面，經(jīng)過(guò)babel的解析后，jsx會(huì)變成createElement執(zhí)行后的結(jié)果。

const Test = (props) => hello, {props.name};

經(jīng)過(guò)babel解析后會(huì)變?yōu)閏reateElement(Test, {name: "world})，這里的Test就是上面的Test方法，name就是Test方法里面接受的props中的name。
實(shí)際上當(dāng)我們從開(kāi)始加載到渲染的時(shí)候做了下面幾步：

// 1. babel解析jsx
 -> createElement(Test, {name: "world"})
// 2. 對(duì)函數(shù)組件和class組件進(jìn)行處理
// 如果是類(lèi)組件，不做處理，如果是函數(shù)組件，增加render方法
const props = {name: world};
const newTest = new Component(props);
newTest.render = function() {
    return Test(props);
}
// 3. 執(zhí)行render方法
newTest.render();

key

react中的diff會(huì)根據(jù)子組件的key來(lái)對(duì)比前后兩次virtual dom（即使前后兩次子組件順序打亂），所以這里的key最好使用不會(huì)變化的值，比如id之類(lèi)的，最好別用index，如果有兩個(gè)子組件互換了位置，那么index就會(huì)導(dǎo)致diff全部失效。

cloneElement

原來(lái)對(duì)cloneElement的理解就是類(lèi)似cloneElement(App, {})這種寫(xiě)法，現(xiàn)在看了實(shí)現(xiàn)之后才理解。原來(lái)第一個(gè)參數(shù)應(yīng)該是一個(gè)reactElement，而不是一個(gè)reactComponent，應(yīng)該是，而不是App，這個(gè)也確實(shí)是我沒(méi)有好好看文檔。

setState

react里面setState后不會(huì)立即更新，但在某些場(chǎng)景下也會(huì)立即更新，下面這幾種情況打印的值你都能回答的上來(lái)嗎？

class App extends React.Component {
    state = {
        count: 0;
    }
    test() {
        this.setState({
            count: this.state.count + 1
        }); 
        console.log(this.state.count); // 此時(shí)為0
        this.setState({
            count: this.state.count + 1
        });
        console.log(this.state.count); // 此時(shí)為0
    }
    test2() {
        setTimeout(() => {
            this.setState({
                count: this.state.count + 1
            });
            console.log(this.state.count); // 此時(shí)為1
            this.setState({
                count: this.state.count + 1
            });
            console.log(this.state.count); // 此時(shí)為2
        })
    }
    test3() {
        Promise.resolve().then(() => {
            this.setState({
                count: this.state.count + 1
            });
            console.log(this.state.count); // 此時(shí)為1
            this.setState({
                count: this.state.count + 1
            });
            console.log(this.state.count); // 此時(shí)為2
        })
    }
    test4() {
        this.setState(prevState => {
            console.log(prevState.count); // 0
        return {
            count: prevState.count + 1
        };
        });
        this.setState(prevState => {
            console.log(prevState.count); // 1
            return {
                count: prevState.count + 1
            };
        });
    }
    async test4() {
        await 0;
        this.setState({
            count: this.state.count + 1
        });
        console.log(this.state.count); // 此時(shí)為1
        this.setState({
            count: this.state.count + 1
        });
        console.log(this.state.count); // 此時(shí)為2
    }
}

在react中為了防止多次setState導(dǎo)致多次渲染帶來(lái)不必要的性能開(kāi)銷(xiāo)，所以會(huì)將待更新的state放到隊(duì)列中，等到合適的時(shí)機(jī)（一般是組件第一次渲染或觸發(fā)事件后）后進(jìn)行batchUpdate，所以在setState后無(wú)法立即拿到更新后的state，很多人說(shuō)setState是異步的，setState表現(xiàn)確實(shí)是異步，只是里面沒(méi)有用異步代碼實(shí)現(xiàn)。
如果是給setState傳入一個(gè)函數(shù)，這個(gè)函數(shù)是執(zhí)行前一個(gè)setState后才被調(diào)用的，所以函數(shù)返回的參數(shù)可以拿到更新后的state。
但是如果將setState在異步方法中（setTimeout、Promise等等）調(diào)用，由于方法是異步的，會(huì)導(dǎo)致組件pending結(jié)束后才執(zhí)行異步方法中的setState，這個(gè)時(shí)候由于組件已經(jīng)不處于pending狀態(tài)了，會(huì)導(dǎo)致setState立即執(zhí)行，這時(shí)通過(guò)this.state可以拿到最新的值。

ref

ref用到原生的標(biāo)簽上，可以直接在組件內(nèi)部用this.refs.xxx的方法獲取到真實(shí)DOM。
ref用到組件上，需要用ReactDOM.findDOMNode(this.refs.xxx)的方式來(lái)獲取到這個(gè)組件對(duì)應(yīng)的DOM節(jié)點(diǎn)。

shouldComponentUpdate

當(dāng)shouldComponentUpdate返回false的時(shí)候，組件沒(méi)有重新渲染，但是更新后的state和props已經(jīng)掛載到了組件上面，這個(gè)時(shí)候如果打印state和props，會(huì)發(fā)現(xiàn)拿到的已經(jīng)是更新后的了。