React專題：不可變屬性

biaoxiaoduan 發布于2019-08-26 12:18 / 767人閱讀

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

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

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

這就是this.props。

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

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

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

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

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

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

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

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

如果你把屬性給了標簽而不是子組件，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具有濃重的函數式編程的思想。

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

純函數有幾個特點：

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

過程沒有副作用。

不依賴外部狀態。

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

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

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

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

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

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

沒有團伙，多帶帶作案，干凈利落，便于封口。

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

為什么要提純函數？因為this.props就是汲取了純函數的思想。

它最大的特點就是不可變。

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

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

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

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

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

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

export default App;

子組件給父組件傳值

其實就是利用回調函數的參數傳遞值。

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

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;

兄弟組件之間傳值

原理和回調函數一樣，只不過這里父組件只是一個橋梁。

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

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

GPU云服務器云服務器大小不可變 python 不可變 react編譯后webrtc不支持對象不支持屬性或方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/108438.html

React專題：可變狀態

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

hosition 2019-08-26 12:17 評論0 收藏0
React專題：什么是UI

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

silvertheo 2019-08-26 12:14 評論0 收藏0
React專題：生命周期

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

Hanks10100 2019-08-23 11:25 評論0 收藏0
React專題：react，redux以及react-redux常見一些面試題

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

darcrand 2019-08-23 13:41 評論0 收藏0
react進階漫談

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

neuSnail 2019-08-20 14:16 評論0 收藏0