在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片段<>。