国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React專題：不可變屬性

biaoxiaoduan / 763人閱讀

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

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

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

這就是this.props。

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

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

this.props this.props是一個極其簡單的接口。世界需要更多這樣的傻瓜接口

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

不過有幾個地方需要注意：

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

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

除了字符串，其他值都要用花括號包裹。

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

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是一個不可變對象

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

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

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

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

過程沒有副作用。

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

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

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

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

你會找一個什么樣的殺手呢？

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

不誤傷百姓，不引起動靜。

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

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

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

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

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

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

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

這個無需贅言，最直觀的傳值方式。

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

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

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

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

父組件定義一個方法，將該方法通過props傳給子組件，子組件需要給父組件傳值時，便傳參執(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ù)一樣，只不過這里父組件只是一個橋梁。

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

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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/108438.html

相關(guān)文章

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

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

    hosition 評論0 收藏0

  • React專題：什么是UI

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

    silvertheo 評論0 收藏0

  • React專題：生命周期

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

    Hanks10100 評論0 收藏0

  • React專題：react，redux以及react-redux常見一些面試題

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

    darcrand 評論0 收藏0

  • react進(jìn)階漫談

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

    neuSnail 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<