时间戳

首页 > 解决方案 > 我是在使用 NEW 上下文 API 还是在使用 Redux？

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

问题描述

我已经学习了 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 适合大应用？

这么多我无法明确回答的问题，有大量的文章和视频说的完全相反。

有好心人能启发我吗？

标签： reactjsreduxstate

解决方案

从上面的例子看，你根本不像在使用 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

推荐阅读