資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究在 React.js 中使用 useContext
useContext 鉤子允許在不使用 redux 的情況下將資料傳遞給子元素。
useContext 是 React 中的一個命名匯出，因此我們可以像下面這樣在函式元件中匯入它：
import {useContext} from ‘react’;如果我們只需要將資料傳遞給子元素，它是一個簡單的 Redux 替代方案。
建立上下文的簡單示例
import React, { createContext } from ‘react’;
import ReactDOM from ‘react-dom’;
const MessageContext = createContext();
myApp=()=>{
return (
<MessageContext.Provider value=”hello”>
<div>
<Test/>
</div>
</MessageContext.Provider>
);
}在子元件 **Test** 中，我們可以像下面這樣訪問 message 值：
Test =()=>{
return (
<MessageContext.Consumer >
{value=><div> message : {value} </div> }
</MessageContext.Consumer>
);
}請注意，我們沒有在這裡在子元件中傳遞 props。createContext 鉤子為我們提供了提供者和消費者。
提供者用於將值傳遞給子元件，子元件使用消費者訪問值，如上所示。
這是一個簡單的消費者示例，但在現實場景中，我們可能需要巢狀消費者。在這裡，我們可以使用 useContext 以簡單的方式編寫它。
Import { useContext } from ‘react’;
Test =()=>{
const messageValue=useContext(MessageContext);
return (
<div>Message: {messageValue} </div>
);
}我們消除了消費者程式碼，只使用了 useContext，這簡化了程式碼，並且我們可以從具有提供者上下文值的多個父級獲取值。現在，我們不需要巢狀多個消費者了。
useMemo
useMemo 有助於效能最佳化。它可以在每次渲染時執行，但前提是其中一個依賴項發生更改。類似於 useEffect，我們為 useMemo 方法提供了第二個引數，我們可以將其稱為依賴項。
useMemo( ()=>{}, [dependency input array]);第一個函式中的計算會被記住，直到提供的依賴項沒有發生更改。
如果我們有很多繁重的計算需要執行一次或在其中一個輸入發生更改時執行，我們可以使用 useMemo。
如果沒有提供輸入陣列，它將在每次渲染時執行。簡單來說，它優化了繁重的計算。將來，高階編譯器將自行決定依賴項陣列。
我們可以替換 useCallback 並只使用 useMemo，它的工作方式類似。
useCallback(function, []); useMemo(()=>function body, []);
它快取函式值並在其中一個依賴項更改之前返回相同的值。
useReducer
顧名思義，useReducer 類似於 Redux 中 reducer 函式的概念。
它接收一個輸入，並根據分派操作和值，它將為我們提供修改後的更新狀態。
const [ state, dispatch]= useReducer((state, action)={
switch(action.type){
//calculation based on action type and value
}
},[]);我們已將第二個引數傳遞給 useReducer，該引數可用於為狀態設定一些初始值。
一個更簡單的例子
import React, { useReducer } from 'react';
function TestNumber() {
const [total, dispatch] = useReducer((state, action) => {
return state + action;
}, 0);
return (
<>
{total}
<button onClick={() => dispatch(1)}>
Add 1
</button>
</>
);
}在這裡，我們已將狀態初始化為 0，並在每次單擊按鈕時遞增。
我們在上面的示例中也使用了 React 片段 <>。
904 次瀏覽
