useContext 和 Redux 有什么区别？

useContext： useContext 是一个钩子，它提供了一种通过组件树传递数据的方法，而无需手动将 props 向下传递到每个嵌套组件。

句法：

const Context = useContext(initialValue);

项目结构：它看起来像这样。

示例：在此示例中，App.js 在 useContext 的帮助下向 ComC 组件发送数据。

应用程序.js

Javascript

import React, { createContext } from 'react';
import "./index.css";
import ComB from './ComB';
  
const Data = createContext();
  
export default function App() {
  return (
    

      
        
      
    
  );
}
  
export { Data };

ComB.js

Javascript

import React, { useState } from "react";
import ComC from "./ComC";
  
const ComB = () => {
  const [show, setShow] = useState(false);
  return (
    <>
      {show ?  : null}
       setShow(!show)}>
        Click ME
    
  );
}
  
export default ComB;

ComC.js

Javascript

import React, { useContext } from 'react';
import { Data } from './App';
  
const ComC = ({ name }) => {
  const context = useContext(Data);
  return 
{context}
}
  
export default ComC;

输出：

Redux： Redux 是 JavaScript 应用程序中使用的状态管理库。它在 React 和 React-Native 中非常流行。它只是管理应用程序的状态和数据。

redux 的构建部分：

1. 行动
2. 减速器
3. 店铺

项目结构：它看起来像这样。

示例：在此示例中，我们创建了两个按钮，一个将增加值，另一个将减少值。使用 Redux，我们可以管理状态。

应用程序.js

Javascript

import React from 'react';
import './index.css';
import { useSelector, useDispatch } from 'react-redux';
import { incNum, decNum } from './actions/index';
  
function App() {
    
  const mystate = useSelector((state) => state.change);
  const dispatch = useDispatch();
  
  return (
    <>
      
Increment/Decrement the number using Redux.
      

        
{mystate}
         dispatch(incNum())}>+
         dispatch(decNum())}>-
      
    
  );
}
  
export default App;

index.js （在src/actions文件夹中）

Javascript

export const incNum = () => {
   return{ type:"INCREMENT"}
}
  
export const decNum = () => {
   return{ type:"DECREMENT"}
}

函数.js

Javascript

const initialState = 0;
  
const change = (state = initialState, action) => {
  switch (action.type) {
    case "INCREMENT": return state + 1;
    case "DECREMENT": return state - 1;
    default: return state;
  }
}
  
export default change;

index.js （在src/reducers文件夹中）

Javascript

import change from './func'
import {combineReducers}from 'redux';
  
const rootReducer = combineReducers({change});
  
export default rootReducer;

store.js

Javascript

import {createStore} from 'redux';
import rootReducer from './reducers/index';
  
const store = createStore(rootReducer,window.__REDUX_DEVTOOLS_EXTENSION__ && 
window.__REDUX_DEVTOOLS_EXTENSION__());
  
export default store;

index.js （在src文件夹中）

Javascript

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App.jsx'
import store from './store';
import { Provider } from 'react-redux';
  
ReactDOM.render(
  
    
  
  , document.getElementById("root")
);

输出：

useContext 和 Redux 的一些区别：

useContext	Redux
useContext is a hook.	Redux is a state management library.
It is used to share data.	It is used to manage data and state.
Changes are made with the Context value.	Changes are made with pure functions i.e. reducers.
We can change the state in it.	The state is read-only. We cannot change them directly.
It re-renders all components whenever there is any update in the provider’s value prop.	It only re-render the updated components.
It is better to use with small applications.	It is perfect for larger applications.
It is easy to understand and requires less code.	It is quite complex to understand.