的反应 上下文API 已经作为一个实验特性存在了一段时间了,但只在反应的版本中 16.3.0 它在生产中安全使用了吗. 下面的文章将向你展示两个基本的网络商店应用程序, 一个用上下文API构建,一个没有.
反应中新的上下文API解决了一个主要问题支持钻. 即使你不熟悉这个术语,如果你在反应上工作过.Js应用,你可能遇到过. Prop钻取是将数据从组件A传递到组件Z的处理过程,方法是将数据传递给多个中间层的反应组件. 组件将间接地和 你, 开发人员反应 要确保一切顺利吗.
要开始这个反应 上下文API教程, 让我们首先探讨如何处理常见问题 没有 反应 上下文API:
应用程序.js
类应用程序扩展组件{
状态= {
汽车:{
car001:{名称:'本田',价格:100},
car002:{名称:'BMW',价格:150},
car003:{名称:'Mercedes',价格:200}
}
};
increment车Price =这个.increment车Price.bind ();
decrement车Price =这个.decrement车Price.bind ();
increment车Price (selectedID) {
//操作状态的简单方法
const 汽车 =对象.分配({}.状态.汽车);
汽车(selectedID).price = 汽车(selectedID).价格+ 1;
这.设置状态({
汽车
});
}
decrement车Price (selectedID) {
//操作状态的简单方法
const 汽车 =对象.分配({}.状态.汽车);
汽车(selectedID).price = 汽车(selectedID).价格- 1;
这.设置状态({
汽车
});
}
呈现(){
回报(
Welcome to my web store
{/*传递道具两次*/}
<产品List
汽车={这.状态.汽车}
increment车Price ={这.increment车Price}
decrement车Price ={这.decrement车Price}
/>
);
}
}
产品List .js
const 产品List = 道具 => (
产品 list:
{/*传递道具两次*/}
<汽车
汽车={道具.汽车}
increment车Price ={道具.increment车Price}
decrement车Price ={道具.decrement车Price}
/>
{/*其他潜在的产品类别,我们将跳过这个演示:*/}
{/* */}
{/* */}
{/* */}
);
导出默认产品列表;
汽车.js
const 汽车 = 道具 => (
汽车:
{/*最后我们可以使用data */}
{对象.键(道具.汽车).map(carID => (
<车
关键= {carID}
name ={道具.汽车(carID).名称}
价格={道具.汽车(carID).价格}
incrementPrice={() => 道具.increment车Price (carID)}
decrementPrice={() => 道具.decrement车Price (carID)}
/>
))}
);
车.js
const 汽车 = 道具 => (
Name: {道具.名称}
Price: ${道具.价格}
);
当然,这不是处理数据的最佳方式,但我希望它能说明原因 支柱钻井很糟糕. 那么反应中的上下文API.Js帮助我们避免这种情况?
介绍上下文网络商店
让我们重构这个应用,并演示它能做什么. 简单地说, 上下文API允许你有一个中央存储,你的数据存在(是的, 就像在Redux中一样). 存储可以直接插入到任何组件中. 你可以省去中间商!
< / div >
重构非常简单——我们不需要对组件的结构做任何改变. 但是,我们确实需要创建一些新组件——提供者和使用者.
1. 初始化上下文
首先,我们需要 创建上下文,稍后我们可以使用它来创建提供者和消费者.
MyContext.js
从“反应”中导入反应;
//这相当于Redux的createStore方法
/ / http://redux.js.org/api/createstore
const MyContext = 反应.createContext ();
导出默认MyContext;
2. 创建提供程序
一旦完成, 我们可以导入上下文并使用它来创建我们的提供者, 我们称之为My提供者. 在其中,我们用一些值初始化一个状态,你可以通过 价值 支持我们的提供者组件. 在我们的反应 上下文API示例中,我们正在共享 这.状态.汽车
以及一些操作状态的方法. 可以把这些方法看作Redux中的简化器.
My提供者.js
导入MyContext./ MyContext”;
类My提供者扩展组件{
状态= {
汽车:{
car001:{名称:'本田',价格:100},
car002:{名称:'BMW',价格:150},
car003:{名称:'Mercedes',价格:200}
}
};
呈现(){
回报(
{
const 汽车 =对象.分配({}.状态.汽车);
汽车(selectedID).price = 汽车(selectedID).价格+ 1;
这.设置状态({
汽车
});
},
decrementPrice: selectedID => {
const 汽车 =对象.分配({}.状态.汽车);
汽车(selectedID).price = 汽车(selectedID).价格- 1;
这.设置状态({
汽车
});
}
}}
>
{这个.道具.孩子}
);
}
}
使提供程序对其他组件可访问, 我们需要用它来包装我们的应用(是的, 就像在Redux中一样). 既然说到这里了, 我们可以去掉状态和方法,因为它们现在是在My提供者中定义的.js.
应用程序.js
类应用程序扩展组件{
呈现(){
回报(
Welcome to my web store
<产品List />
);
}
}
3. 创建消费者
我们需要再次导入上下文,并用它来包装我们的组件 上下文 组件中的参数. 之后,就很直接了. 你使用 上下文,和你用的方法一样 道具. 它保存了我们在MyProducer中共享的所有值,我们只需要使用它!
汽车.js
const 汽车 = () => (
{上下文 => (
汽车:
{对象.键(上下文.汽车).map(carID => (
<车
关键= {carID}
name ={上下文.汽车(carID).名称}
价格={上下文.汽车(carID).价格}
incrementPrice={() => 上下文.incrementPrice (carID)}
decrementPrice={() => 上下文.decrementPrice (carID)}
/>
))}
)}
);
我们忘记了什么? 的产品List! 这就是好处变得明显的地方. 我们不传递任何数据或方法. 该组件被简化了,因为它只需要呈现几个组件.
产品List.js
const 产品List = () => (
产品 list:
<汽车 />
{/*其他潜在的产品类别,我们将跳过这个演示:*/}
{/* */}
{/* */}
{/* */}
);
在本文中,我对Redux和上下文API进行了一些比较. Redux最大的优点之一是,你的应用程序可以有一个中央存储,可以从任何组件访问. 有了反应中新的上下文API,默认情况下你就有了这个功能. 很多人大肆宣传上下文API会使Redux过时.
对于那些只使用Redux的中央存储功能的人来说,这可能是真的. 如果这是你使用它的唯一功能,你现在可以用上下文API替换它,避免在不使用第三方库的情况下进行prop钻取.
如果你对测量和优化你的反应应用程序的性能感兴趣(最新由上下文API提供支持), 读 优化反应性能指南 由同为托普塔勒的威廉·王创作.
< / div >< / div >< / div >
< / div >
了解基本知识
什么是消费者?
消费者是存储信息的最终归宿. 它可以通过提供程序请求数据,并在提供程序允许的情况下操作中央存储.
< / div >< / div >
反应JS是前端库还是后端库?
反应是一个用于在客户端上构建用户界面的库, 因此,它主要用于应用程序的前端. 然而, 提高性能和帮助搜索引擎优化, 反应应用程序能够在后端呈现.
< / div >< / div >
什么是反应JS中的组件?
静态网站倾向于将自己划分为多个页面,这些页面可能与其他页面共享UI,或者完全不同. 反应JS应用程序被分成组件(例如.g. 下拉菜单,嵌入视频,旋转木马). 这有助于节省时间,因为开发人员只需要编写一次组件,并且可以在任何页面上重用它.
< / div >< / div >
什么是一个组件的状态在反应JS?
反应组件可以有自己的状态, 哪个保存有关组件当前配置的信息. 例如, 用户注册表单可能会在其状态中存储用户是否选中了“条款和条件”复选框.
< / div >< / div >
你能共享组件的状态吗?
开发人员可以通过将组件的状态通过道具传递给子组件(由父组件呈现的组件)来共享组件的状态. 在用户注册表单中, 在用户接受“条款和条件”之前,您可以禁用提交按钮.表单可以通过按钮的道具共享复选框的状态.
< / div >< / div >
你能在反应中与父组件或兄弟组件共享组件的状态吗?
不,你不能. 在反应中,数据从根级父级流向嵌套最深的子级. 这就是为什么有必要保持数据的中央存储并在需要时访问它,而不是无休止地从父级传递给子级.
< / div >< / div >
反应的道具是不可变的吗?
反应的道具是不可变的. 组件只能继承它们,但不能修改它们. 如果它们确实需要被修改,这只能通过“请求”父组件来实现. 这可以通过使用回调或钩子来实现.
< / div >< / div >
反应 上下文API使Redux过时了吗?
上下文API使Redux的一个特性过时了——中央存储. 如果你不使用Redux的任何其他特性,你可以用这个新的原生(反应)解决方案替换整个库.
< / div >< / div >
什么是反应中的上下文?
反应的上下文允许你与任何组件共享信息, 通过将其存储在中心位置并允许访问任何请求它的组件(通常您只能通过道具将数据从父级传递给子级).
< / div >< / div >
什么是供应商?
提供者充当交付服务. 当消费者要求某样东西时,它会在上下文中找到它并将其传递到需要它的地方.
< / div >< / div >< / div >< / div >
标签
< / div >< / div >< / div >< / div >
聘请Toptal这方面的专家.< / div >
现在雇佣< / div >< / div >