亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

React專題：不可變屬性

biaoxiaoduan / 824人閱讀

摘要：沒(méi)有團(tuán)伙，多帶帶作案，干凈利落，便于封口。它最大的特點(diǎn)就是不可變。兄弟組件之間傳值原理和回調(diào)函數(shù)一樣，只不過(guò)這里父組件只是一個(gè)橋梁。父組件接收到回調(diào)函數(shù)的值以后，通過(guò)保存該值，并觸發(fā)另一個(gè)子組件重新渲染，重新渲染后另一個(gè)子組件便可以獲得該值。

本文是『horseshoe·React專題』系列文章之一，后續(xù)會(huì)有更多專題推出
來(lái)我的 GitHub repo 閱讀完整的專題文章
來(lái)我的 個(gè)人博客 獲得無(wú)與倫比的閱讀體驗(yàn)

React是用來(lái)解決狀態(tài)同步的，但它卻有一個(gè)與this.state并駕齊驅(qū)的概念。

這就是this.props。

this.props是組件之間溝通的一個(gè)接口。

原則上來(lái)講，它只能從父組件流向子組件，但是開(kāi)發(fā)者有各種hack技巧，基本上近親之間溝通是不成問(wèn)題的。

this.props this.props是一個(gè)極其簡(jiǎn)單的接口。世界需要更多這樣的傻瓜接口

你只需要像寫HTML標(biāo)簽的屬性一樣，把它寫上去，它就傳到了子組件的this.props里面。

不過(guò)有幾個(gè)地方需要注意：

有兩個(gè)特殊的屬性ref和key，它們各有用途，并不會(huì)傳給子組件的this.props。

如果只給屬性不給值，React會(huì)默認(rèn)解析成布爾值true。

除了字符串，其他值都要用花括號(hào)包裹。

如果你把屬性給了標(biāo)簽而不是子組件，React并不會(huì)解析。

import React, { Component, createRef } from "react";
import Child from "./Child";

class App extends Component {
    isPopular = false;
    refNode = createRef();
    
    render() {
        return [
            ,
            ,
            ,
        ];
    }
}

export default App;
this.props是一個(gè)不可變對(duì)象

React具有濃重的函數(shù)式編程的思想。

提到函數(shù)式編程就要提一個(gè)概念：純函數(shù)。

純函數(shù)有幾個(gè)特點(diǎn)：

給定相同的輸入，總是返回相同的輸出。

過(guò)程沒(méi)有副作用。

不依賴外部狀態(tài)。

function doSomething(a, b) {
    return a + b;
}

這是一種編程思想。如果你對(duì)這個(gè)概念有點(diǎn)模糊，我可以舉個(gè)例子：

你的殺父仇人十年后突然現(xiàn)身，于是你決定雇傭一個(gè)冷面殺手去解決他。

你會(huì)找一個(gè)什么樣的殺手呢？

給多少錢辦多少事，效果可預(yù)期，從不失手。

不誤傷百姓，不引起動(dòng)靜。

沒(méi)有團(tuán)伙，多帶帶作案，干凈利落，便于封口。

如果你面對(duì)殺父仇人有這樣的覺(jué)悟，那么純函數(shù)便是你的囊中之物了。

為什么要提純函數(shù)？因?yàn)?b>this.props就是汲取了純函數(shù)的思想。

它最大的特點(diǎn)就是不可變。

跟this.state不一樣的是，this.props來(lái)真的。雖然this.state也反對(duì)開(kāi)發(fā)者直接改變它的屬性，但畢竟只是嘴上說(shuō)說(shuō)，還是要靠開(kāi)發(fā)者自己的約束。然而this.props會(huì)直接讓你的程序崩潰。

加上React也沒(méi)有this.setProps方法，所以不需要開(kāi)發(fā)者自我約束，this.props就是不可變的。

溝通基本靠吼 父組件給子組件傳值

這個(gè)無(wú)需贅言，最直觀的傳值方式。

import React from "react";
import Child from "./Child";

const App = () => {
    return (
        
    );
}

export default App;
子組件給父組件傳值

其實(shí)就是利用回調(diào)函數(shù)的參數(shù)傳遞值。

父組件定義一個(gè)方法，將該方法通過(guò)props傳給子組件，子組件需要給父組件傳值時(shí)，便傳參執(zhí)行該方法。由于方法定義在父組件里，父組件可以接收到該值。

import React, { Component } from "react";
import Child from "./Child";

class App extends Component {
    state = { value: "" };
    
    render() {
        return (
            
        );
    }
    
    handleSomething = (e) => {
        this.setState({ value: e.target.value });
    }
}

export default App;
import React from "react";

const Child = (props) => {
    return (
        
    );
}

export default Child;
兄弟組件之間傳值

原理和回調(diào)函數(shù)一樣，只不過(guò)這里父組件只是一個(gè)橋梁。

父組件接收到回調(diào)函數(shù)的值以后，通過(guò)this.setState保存該值，并觸發(fā)另一個(gè)子組件重新渲染，重新渲染后另一個(gè)子組件便可以獲得該值。

import React, { Component, Fragment } from "react";
import ChildA from "./ChildA";
import ChildB from "./ChildB";

class App extends Component {
    state = { value: "" };
    
    render() {
        return (
            
                
                
            
        );
    }
    
    handleSomething = (e) => {
        this.setState({ value: e.target.value });
    }
}

export default App;
import React from "react";

const ChildA = (props) => {
    return (
        
    );
}

export default ChildA;
import React from "react";

const ChildB = (props) => {
    return (
        
{props.value}

    );
}

export default ChildB;
createContext

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/108438.html

相關(guān)文章

  • React專題：可變狀態(tài)

    摘要：的參數(shù)既可以是一個(gè)對(duì)象，也可以是一個(gè)回調(diào)函數(shù)?；卣{(diào)函數(shù)提供了兩個(gè)參數(shù)，第一個(gè)參數(shù)就是計(jì)算過(guò)的對(duì)象，即便這時(shí)還沒(méi)有渲染，得到的依然是符合直覺(jué)的計(jì)算過(guò)的值。專題一覽什么是可變狀態(tài)不可變屬性生命周期組件事件操作抽象 本文是『horseshoe·React專題』系列文章之一，后續(xù)會(huì)有更多專題推出來(lái)我的 GitHub repo 閱讀完整的專題文章來(lái)我的 個(gè)人博客 獲得無(wú)與倫比的閱讀體驗(yàn) Reac...

    hosition 評(píng)論0 收藏0

  • React專題：什么是UI

    摘要：現(xiàn)代前端框架的使命就是開(kāi)發(fā)者管理狀態(tài)，框架根據(jù)狀態(tài)自動(dòng)生成。專題一覽什么是可變狀態(tài)不可變屬性生命周期組件事件操作抽象 本文是『horseshoe·React專題』系列文章之一，后續(xù)會(huì)有更多專題推出來(lái)我的 GitHub repo 閱讀完整的專題文章來(lái)我的 個(gè)人博客 獲得無(wú)與倫比的閱讀體驗(yàn) 什么是UI？ 如果你指的是布局和色彩，那更偏向于設(shè)計(jì)師的工作。 在現(xiàn)代web領(lǐng)域，大家已經(jīng)有一個(gè)共識(shí)...

    silvertheo 評(píng)論0 收藏0

  • React專題：生命周期

    摘要：而生命周期鉤子，就是從生到死過(guò)程中的關(guān)鍵節(jié)點(diǎn)。異步渲染下的生命周期花了兩年時(shí)間祭出渲染機(jī)制。目前為這幾個(gè)生命周期鉤子提供了別名，分別是將只提供別名，徹底廢棄這三個(gè)大活寶。生命周期鉤子的最佳實(shí)踐是在這里初始化。 本文是『horseshoe·React專題』系列文章之一，后續(xù)會(huì)有更多專題推出來(lái)我的 GitHub repo 閱讀完整的專題文章來(lái)我的 個(gè)人博客 獲得無(wú)與倫比的閱讀體驗(yàn) 生命周期...

    Hanks10100 評(píng)論0 收藏0

  • React專題：react，redux以及react-redux常見(jiàn)一些面試題

    摘要：我們可以為元素添加屬性然后在回調(diào)函數(shù)中接受該元素在樹(shù)中的句柄，該值會(huì)作為回調(diào)函數(shù)的第一個(gè)參數(shù)返回。使用最常見(jiàn)的用法就是傳入一個(gè)對(duì)象。單向數(shù)據(jù)流，比較有序，有便于管理，它隨著視圖庫(kù)的開(kāi)發(fā)而被概念化。 面試中問(wèn)框架，經(jīng)常會(huì)問(wèn)到一些原理性的東西，明明一直在用，也知道怎么用， 但面試時(shí)卻答不上來(lái)，也是挺尷尬的，就干脆把react相關(guān)的問(wèn)題查了下資料，再按自己的理解整理了下這些答案。 reac...

    darcrand 評(píng)論0 收藏0

  • react進(jìn)階漫談

    摘要：父組件向子組件之間非常常見(jiàn)，通過(guò)機(jī)制傳遞即可。我們應(yīng)該聽(tīng)說(shuō)過(guò)高階函數(shù)，這種函數(shù)接受函數(shù)作為輸入，或者是輸出一個(gè)函數(shù)，比如以及等函數(shù)。在傳遞數(shù)據(jù)的時(shí)候，我們可以用進(jìn)一步提高性能。 本文主要談自己在react學(xué)習(xí)的過(guò)程中總結(jié)出來(lái)的一些經(jīng)驗(yàn)和資源，內(nèi)容邏輯參考了深入react技術(shù)棧一書(shū)以及網(wǎng)上的諸多資源，但也并非完全照抄，代碼基本都是自己實(shí)踐，主要為平時(shí)個(gè)人學(xué)習(xí)做一個(gè)總結(jié)和參考。 本文的關(guān)鍵...

    neuSnail 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<