在React.js中使用useContext
useContext钩子允许在不使用redux的情况下将数据传递给子元素。
useContext是react中的一个命名导出，因此我们可以导入如下的功能组件-
import {useContext} from ‘react’;如果我们只需要将数据传递给child元素，则它是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中， 我们可以访问以下消息值-
Test =()=>{
return (
<MessageContext.Consumer >
{value=><div> message : {value} </div> }
</MessageContext.Consumer>
);
}请注意，我们尚未在子组件中传递道具。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){
//根据动作类型和值进行计算
}
},[]);我们已经将第二个参数传递给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片段<>。