在前端項(xiàng)目開發(fā)的時(shí)候，往往逃不開組件之間傳值這種操作。常見的幾種場(chǎng)景，父子組件、非相關(guān)組件。

大家都知道使用redux就能搞定所有的問題，redux是一個(gè)全局狀態(tài)管理，可以把所有的數(shù)據(jù)放在一個(gè)單獨(dú)的地方在使用的時(shí)候直接拿來用；就相當(dāng)于一個(gè)數(shù)據(jù)倉庫。

image.png

但是如果不用redux呢？下面我來給大家普及一下這種操作。

父子組件之間傳值

父子組件就是兩個(gè)有包含關(guān)系的兩個(gè)組件。他們之間進(jìn)行參數(shù)傳遞使用到的主要是props這個(gè)橋梁。在父組件中通過props屬性把方法和數(shù)據(jù)傳遞給自組件。如果要改變父組件的數(shù)據(jù)，就調(diào)用傳遞過去的方法。

白話版
小明的爸爸???一張銀行卡，小明知道里面有5千塊錢(父組件向足組件傳參，通過屬性傳遞)。小明想向那張卡存錢，但是年齡太小無法操作取款機(jī)。so，小明爸爸可以提供一個(gè)存錢的服務(wù)，小明告訴他老爸去把我的壓歲錢存到卡里(子組件向父組件傳參，調(diào)用父組件提供的方法)。

父傳子使用props屬性

父組件通過屬性向自組件傳遞參數(shù)，通過屬性把數(shù)據(jù)和方法傳遞給子組件

import React, { useState } from "react";
function ParentC() {
  const [money, setMoney] = useState(5000);
  return (
    <div>
      <h1>小明爸爸有:{money}</h1>
      <ChildC m={money} changeM={setMoney}></ChildC>
    </div>
  );
}

子傳父使用方法調(diào)用

子組件通過調(diào)用父組件的方法改變父組件中的數(shù)據(jù)(向父組件傳值)

import React from "react";
function ChildC(props) {
  const [m, changeM] = props;
  return (
    <div>
      <button onClick={() => changeM(m + 2000)}>存錢</button>
    </div>
  );
}

非相關(guān)組件之間傳值

非相關(guān)組件之間傳值的話，在當(dāng)前版本16.8之后可以使用context上下文。簡單粗暴，直接上代碼

store.js

import React, { createContext, useState } from "react";

const AppContext = createContext(); // 通過createContext方法創(chuàng)建一個(gè)上下文，用來做全局傳遞使用

const { Provider } = AppContext;  // 全局?jǐn)?shù)據(jù)提供組件，可以理解為數(shù)據(jù)源

// 創(chuàng)建一個(gè)全局的數(shù)據(jù)源，在入口文件的時(shí)候把所有的組件包括起來
export function AppProvider(props) {
  const { children } = props; // 傳遞的屬性，children表示要渲染的子組件
  // 定義局部狀態(tài)，在此處是一個(gè)可以全局使用的狀態(tài)，在所有AppProvider包括在內(nèi)的自組件都可以用
  // 可以定義多個(gè)的
  const [count, setCount] = useState(1); 
  // 設(shè)置value把屬性信息傳遞給子組件
  return (
    <Provider value={{ name: "Tom", count, setCount }}>{children}</Provider>
  );
}

export default AppContext;

index.js入口文件

...
import { AppProvider } from "./store"; // 引入創(chuàng)建好的數(shù)據(jù)源
...
ReactDOM.render(
  <AppProvider>
    ...所有的其他組件
  </AppProvider>,
  document.getElementById("root")
);

在項(xiàng)目的任意一個(gè)組件中使用

import React, { useContext } from "react";
import Appcontext from "./store";
...
function HelloWorld(props) {
   ...
  const context = useContext(Appcontext);
  // console.log(context);
  // 可以獲取Provider設(shè)置的value值，里面的方法可以直接調(diào)用，屬性可以直接獲取
  // 就相當(dāng)于在定義了全局的屬性和方法，屬性用來存儲(chǔ)數(shù)據(jù)，方法用來改變數(shù)據(jù)
  //  數(shù)據(jù)改變之后組件重新渲染
  const { setCount, count } = context; 
  ...
}

此中方法簡單粗暴，就相當(dāng)于定義了一堆全局變量和全局方法，用來改變數(shù)據(jù)和存儲(chǔ)數(shù)據(jù)。

視頻講解

參考
[譯] 從設(shè)計(jì)師的角度看 Redux