数据结构
网络
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 次浏览
