我已经学习了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 : '[email protected]',
tel : "555-555-5555"
},
{
id: 2,
nom : 'John Doe',
email : '[email protected]',
tel : "555-555-5555"
},
{
id: 3,
nom : 'Hugo Doe',
email : '[email protected]',
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 oficial文档中都没有:(？
你也可以看看我的“消费者”：
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 with Context吗？我使用旧的还是新的语境？为什么Context适用于小应用程序和Redux适用于大型应用程序？
我无法回答的问题很多，有大量的文章和视频正好相反。
有人可以善意开导我吗？
从上面的示例来看，它看起来并不像您正在使用Redux。
React的Context API和Redux类似，两者都是通过组件树传递数据的方法，而不必在每个级别手动传递道具。
由于React的带有Hooks的Context API直到React~v16.8才生成，因此Redux是传递数据的唯一选择。现在使用Context API和钩子，我的预测是你会看到Redux逐渐消失在夕阳中。但是，我应该注意，当一部分应用程序需要许多不同的上下文时，如果实现不当，Context API会很快变得令人头疼。
这是我在研究React上下文和钩子时构建的一个小应用程序，可以帮助您更好地掌握它们：
React Redux和Context API不是一回事。上下文是一种通过嵌套子组件向下传递数据的简单方法，而不会在下行过程中通过每个子prop进行走私。
Context API不是像Redux这样的状态管理器。它可以作为一个使用，但最好传递数据（如样式或auth）不变异/改变它。 Context使用provider标记+ render props来传递数据。当上下文数据发生更改时，提供程序标记内的所有内容（所有子元素）都会重新呈现。因此，如果您将整个应用程序或大量应用程序包装在提供程序中，您可能需要检查重新渲染。
Redux是一个状态管理器，当你有大量的状态（你对大的定义的调用）时使用。它的设置稍微复杂，但你会得到一个非常强大的成熟的第三方库来管理状态。它有很棒的开发工具，设置正确时效率很高。
Hooks API为国家管理开辟了新的大门。在我看来，它是在redux之前的中间地带。
看看这个repo useContext + useReducer +独立的重新渲染：
Context Provider Wrapper示例：https://github.com/joha0033/race-series-2/blob/master/src/Context/Authorization/authorization.js
使用Context Wrapper示例：https://github.com/joha0033/race-series-2/blob/master/src/App.js
我会考虑习惯钩子以及它们如何在新的应用程序状态管理中发挥作用。
您当前使用的Context API应该是最新的。最新的React更新（带钩子）包含一个名为useContext的钩子。这个钩子不会改变你创建或提供上下文的方式，但它使得在依赖于上下文的组件中使用它更简单。
这是我的一些资源：