我是在使用 NEW 上下文 API 还是在使用 Redux？

Question

我已经学习了 React 并且我已经学会了使用 Context API，但是我听说有一个“新的上下文 API”，因为我已经通过一种旧课程（2017 年末）学习了 React，所以我没有不知道我使用的是新的还是旧的 Context API。 另外我刚刚发现了 Redux，它看起来和我使用的几乎完全一样，所以 Redux 和 Context API 到底是一样的吗？

看看我的代码：

这里是我的 context.js：

import React, {Component} from 'react'

const Context = React.createContext();

const reducer = (state, action) => {

    switch(action.type) {
        case 'DELETE_CONTACT' :
        return {
            ...state,
            contacts: state.contacts.filter(contact => 
                contact.id !== action.payload)
        };
        default: 
        return state;
    }

}

export class Provider extends Component {
    state = {
        contacts : [
            {
                id: 1,
                nom : 'John Doe',
                email : 'john@gmail.com',
                tel : "555-555-5555"
            },
            {
                id: 2,
                nom : 'John Doe',
                email : 'john@gmail.com',
                tel : "555-555-5555"
            },
            {
                id: 3,
                nom : 'Hugo Doe',
                email : 'john@gmail.com',
                tel : "555-555-5555"
            }
        ],
        dispatch: action => {
            this.setState(state => reducer(state,action))
        }
    }

    render() {
        return (
            <Context.Provider value={{
                state: this.state,
                sayHello: () => console.log("Hello World")

            }}>
            {this.props.children}
            </Context.Provider>
        )
    }
}

export const Consumer = Context.Consumer;

请注意，我使用的是“Reducer”和“Dispatch”，它们甚至不在“Context”的 React 官方文档中：(？

你也可以看看我的“消费者”：

import React, { Component } from 'react'
import Contact from './Contact'
import {Consumer} from '../context'

export default class Liste extends Component {

  render() {

    return (
      <Consumer>
        {value => {
          return(
            <React.Fragment>
            {value.state.contacts.map(contact => (
                <Contact 
                key={contact.id}
                id={contact.id}
                nom={contact.nom}
                email={contact.email}
                tel={contact.tel}
                />
            ))}
          </React.Fragment>
          )
        }}
      </Consumer>
    )
  }


}

Context 和 React 之间的具体区别是什么？ 我可以将 Reducer 与 Context 一起使用吗？ 我使用的是旧上下文还是新上下文？ 为什么 Context 适合小应用，Redux 适合大应用？

我无法明确回答的问题太多了，有大量文章和视频的说法正好相反。

有好心人能启发我吗？

Answer 1

从上面的示例来看，您根本不像在使用 Redux。

React 的 Context API 和 Redux 的相似之处在于两者都是通过组件树传递数据的方法，而无需在每个级别手动传递 props。

由于 React 的带有 Hooks 的 Context API 直到 React ~v16.8 才投入生产，因此 Redux 是传递数据的唯一选择。现在有了 Context API 和 hooks，我的预测是你会看到 Redux 逐渐消失。但是，我应该指出，如果实施不佳，当您的应用程序的一部分需要许多不同的上下文时，上下文 API 很快就会变得令人头疼。

这是我在研究 React 上下文和钩子时构建的一个小应用程序，可以帮助您更好地掌握它们：

https://github.com/Borduhh/react-hooks-context-example

Answer 2

React Redux 和 Context API 不是一回事。 Context 是一种通过嵌套子组件向下传递数据的简单方法，而无需在向下的过程中通过每个子 prop 将数据走私。

Context API 不是像 Redux 那样的状态管理器。它可以用作一个，但最好传递数据（如样式或 auth ）而不是改变/更改它。 Context 使用提供者标签 + 渲染道具来传递数据。当上下文数据发生变化时，提供者标记内的所有内容（所有子元素）都会重新呈现。因此，如果您将整个应用程序或大量应用程序包装在提供程序中，您可能需要检查您的重新渲染。

Redux 是一个状态管理器，当您拥有大量状态时使用（您调用 large 的定义）。设置起来有点复杂，但是你会得到一个非常强大的成熟的第三方库来管理状态。它具有出色的开发工具，并且在正确设置时非常高效。

Hooks API 为状态管理打开了新的大门。在我看来，它是 redux 之前的中间地带。

查看这个 repo useContext + useReducer + 独立重新渲染：

上下文提供程序包装示例：https://github.com/joha0033/race-series-2/blob/master/src/Context/Authorization/authorization.js

使用上下文包装器示例：https://github.com/joha0033/race-series-2/blob/master/src/App.js

我会研究如何习惯钩子以及它们如何在新的管理应用程序状态中发挥作用。

您当前使用的 Context API 应该是最新的。最新的 React 更新（带有钩子）包括一个名为 useContext 的钩子。这个钩子不会改变你创建或提供上下文的方式，但它可以更简单地在依赖于上下文的组件中使用它。

这是我的一些资源：

https://testdriven.io/blog/react-hooks-primer/

https://testdriven.io/blog/react-hooks-advanced/