Question

我已经学习了React，也学会了使用Context API，但是我听说有一个“新的context 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”，这甚至不在React官方文档的“ Context”中：(？

还可以看看我的“消费者”：

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的相似之处在于，它们都是通过组件树传递数据的方法，而不必在每个级别手动传递道具。

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

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

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

Answer 2

React Redux和Context API是不同的东西。上下文是一种通过嵌套子组件向下传递数据而无需在向下的子进程中通过每个子道具走私数据的简便方法。

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

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

Hooks API为状态管理打开了新的大门。我认为，这是Redux之前的中间立场。

查看此回购useContext + useReducer +独立重新渲染：

上下文提供者包装示例：assignability

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

我将研究如何适应钩子，以及钩子如何在新的管理应用程序状态中发挥作用。

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

这是我的一些资源：

https://github.com/joha0033/race-series-2/blob/master/src/App.js

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

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

2 个答案: