[译]迁移到新的 React Context Api
随着 React 16.3.0 的发布,context api 也有了很大的更新。我已经从旧版的 api 更新到了新版。这里就分享一下我(作者)的心得体会。
回顾
下面是一个展示如何使用旧版 api 的例子:
function Usage(props) {
return (
<Toggle onToggle={props.onToggle}>
<Toggle.On>The button is on</Toggle.On>
<Toggle.Off>The button is off</Toggle.Off>
<div>
<Toggle.Button />
</div>
</Toggle>
)
}
上面的代码会返回一个复合组件Toggle
。这个组件可以让子组件共享隐式的状态。在某些简单的情况下可以用React.Children.map
来处理。但是,这个例子需要使用 context api 来达到在 React 的某个组件树的任意节点分享 state 的目的。
旧的 Context Api
这是一个旧版 context api 的应用例子:
const TOGGLE_CONTEXT = "__toggle__";
// Toggle on
function ToggleOn({ children }, context) {
const { on } = context[TOGGLE_CONTEXT];
return on ? children : null;
}
ToggleOn.contextTypes = {
[TOGGLE_CONTEXT]: PropTypes.object.isRequired
};
// Toggle off
function ToggleOff({ children }, context) {
const { on } = context[TOGGLE_CONTEXT];
return on ? null : children;
}
ToggleOff.contextTypes = {
[TOGGLE_CONTEXT]: PropTypes.object.isRequired
};
// Toggle button
function ToggleButton(props, context) {
const { on, toggle } = context[TOGGLE_CONTEXT];
return <Switch on={on} onClick={toggle} {...props} />;
}
ToggleButton.contextTypes = {
[TOGGLE_CONTEXT]: PropTypes.object.isRequired
};
// Toggle
class Toggle extends React.Component {
static On = ToggleOn;
static Off = ToggleOff;
static Button = ToggleButton;
static defaultProps = { onToggle: () => {} };
static childContextTypes = {
[TOGGLE_CONTEXT]: PropTypes.object.isRequired
};
state = { on: false };
toggle = () =>
this.setState(
({ on }) => ({ on: !on }),
() => this.props.onToggle(this.state.on)
);
getChildContext() {
return {
[TOGGLE_CONTEXT]: {
on: this.state.on,
toggle: this.toggle,
}
};
}
render(){
return <div>{this.props.children</div>
}
}
在就的 API 里,你必须用一个字符串指定要分享的 state。然后通过getChildContext
方法返回实际的 context。在父组件里通过childContextTypes
来指定发出的 context 的类型,在子组件里用contextTypes
来指定接收的 context 的类型。我(作者, 下文同)从来不喜欢这样不直接的方式, 平时也尽量不这么做。另外,还要使用静态属性,才能保证 context 值传入子组件。 我也不喜欢这样。
另一个问题是如果shouldComponentUpdate
方法返回 false 的话,context 的值是不会变的。当然这也有变通的方法,具体可以参考这个repo。
新的 Context API
新的 context api 没有这些问题,这也是我为什么这么激动的原因。上面的例子可以更新为:
const ToggleContext = React.createContext({
on:false,
toggle: () => {},
});
class Toggle extends React.Component {
static On = ({children}) => (
<ToggleContext.Consumer>
{({on})=>(on ? children: null)}
</ToggleContet.Consumer>
)
static Off = ({children}) => (
<ToggleContext.Consumer>
{({on}) => (on ? null : children)}
</ToggleContext.Consumer>
);
static Button = props => (
<ToggleContext.Consumer>
{({on, toggle}) => (
<Switch on={on} toggle={toggle} {...props} />
)}
</ToggleContext.Consumer>
)
toggle = () => this.setState(
({on}) => ({on: !on}),
() => this.props.onToggle(this.state.on)
);
state = {on: false, toggle: this.toggle};
render() {
return (
<ToggleContext.Provider value={}>
{this.props.children}
</ToggleContext.Provider>
);
}
}
旧的API的问题都没有了。现在不仅没有了不直接的字符串,还有了明显的组件:Provider
和Consumer
分别提供和消费context。
每一个子组件都需要用consumer子组件,就想在就api里需要有静态属性一样)。但是,两个api的这个问题都可以通过基于render props的高阶组件来解决。非常简单!
另一个通过shouldComponentUpdate
返回false来更新的问题也解决了。新的context api会自动处理这个问题。
最后一个非常好的改变是子组件都使用了render props模式。这样在新的context api里也可以对外界暴露非常优雅的接口。
新api的问题
这就是在新的api里通过Provider
的value属性给子组件消费的值,只有在你想要子组件重绘的时候才会改变。
这也就是说在render方法里使用`value={{on: this.state.on, toggle: this.toggle}}是不被推荐的。
这是因为没次render都会传入一个新的对象,即使state本身没有改变。因为是一个新的对象,那么所有的子组件也都会重绘。
这个影响在实际使用的时候会很大。一般来说最好是传入一个只有在state改变时才改变的值。也就是为什么说value={this.state}
。
如果你不想传入整个state给消费者,那么你可以使用这个Ryan Florence的这个小技巧。
只不过这也还是会有一个小问题,我需要把toggle
方法存入state里。这也显得很奇怪,不过这只是一个小瑕疵,不影响大局。
总结
新的context api绝对是React团队带来的一个非常好的改变。希望你也能和我一样的喜欢。
另外:如果你还不能用16.3.0这个版本,那么你可以添加一个polyfill来使用新的api。这个polyfill是create-react-context。
from:https://blog.kentcdodds.com/migrating-to-reacts-new-context-api-b15dc7a31ea0
[译]迁移到新的 React Context Api的更多相关文章
- [React] Use the new React Context API
The React documentation has been warning us for a long time now that context shouldn't be used and t ...
- React Context API
使用React 开发程序的时候,组件中的数据共享是通过数据提升,变成父组件中的属性,然后再把属性向下传递给子组件来实现的.但当程序越来越复杂,需要共享的数据也越来越多,最后可能就把共享数据直接提升到最 ...
- 10分钟学会React Context API
Create-react-app来学习这个功能: 注意下面代码红色的即可,非常简单. 在小项目里Context API完全可以替换掉react-redux. 修改app.js import React ...
- React 16.3来了:带着全新的Context API
文章概览 React在版本16.3-alpha里引入了新的Context API,社区一片期待之声.我们先通过简单的例子,看下新的Context API长啥样,然后再简单探讨下新的API的意义. 文中 ...
- React 新 Context API 在前端状态管理的实践
本文转载至:今日头条技术博客 众所周知,React的单向数据流模式导致状态只能一级一级的由父组件传递到子组件,在大中型应用中较为繁琐不好管理,通常我们需要使用Redux来帮助我们进行管理,然而随着Re ...
- React 全新的 Context API
Context API 可以说是 React 中最有趣的一个特性了.一方面很多流行的框架(例如react-redux.mobx-react.react-router等)都在使用它:另一方面官方文档中却 ...
- 手写一个React-Redux,玩转React的Context API
上一篇文章我们手写了一个Redux,但是单纯的Redux只是一个状态机,是没有UI呈现的,所以一般我们使用的时候都会配合一个UI库,比如在React中使用Redux就会用到React-Redux这个库 ...
- 简单整理React的Context API
之前做项目时经常会遇到某个组件需要传递方法或者数据到其内部的某个子组件,中间跨越了甚至三四层组件,必须层层传递,一不小心哪层组件忘记传递下去了就不行.然而我们的项目其实并没有那么复杂,所以也没有使用r ...
- React Hooks & Context API
React Hooks & Context API responsive website https://reactjs.org/docs/hooks-reference.html https ...
随机推荐
- js----点击事件三种方法
在javascript中,可以为某个元素指定事件,指定的方式有以下三种: 1.在html中,使用onclick属性 2.在javascript中,使用onclick属性 (1)注意函数名没有双引号. ...
- Django 日志输出及打印--logging
Django使用python自带的logging作为日志打印工具. logging是线程安全的,主要分为4部分: Logger 用户使用的直接接口,将日志传递给Handler Handler 控制日志 ...
- superset在 centos 7安装运行
参考:1.http://blog.csdn.net/u014729236/article/details/76302888?locationNum=2&fps=1 2.https://www. ...
- PDO查询语句结果中文乱码
PDO::MYSQL_ATTR_INIT_COMMAND (整数)连接到MySQL服务器时执行的命令.重新连接时会自动重新执行.请注意,此常量只能driver_options 在构建新的数据库句柄时在 ...
- python: 爬取[博海拾贝]图片脚本
练手代码,聊作备忘: # encoding: utf-8 # from __future__ import unicode_literals import urllib import urllib2 ...
- js计算日期相减天数
代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head ...
- ASP.Net的工作线程与请求队列
当 ASP.NET 接收针对页的请求时,它从线程池中提取一个线程并将请求分配给该线程. 一个普通的(或同步的)页在该请求期间保留线程,从而防止该线程用于处理其他请求.如果一个同步请求成为 I/O bo ...
- Spark2.0学习(三)--------核心API
Spark核心API----------------- [SparkContext] 连接到spark集群,入口点. [HadoopRDD] 读取hadoop上的数据, [MapPartitionsR ...
- wpf 寻找TreeView的子元素,并对其进行操作
//itemsControl 开始为指定的TreeView控件 item为TreeView子元素 private void PareItems(ItemsControl itemsControl, ...
- docker 删除所有none的镜像
docker images|grep none|awk '{print $3}'|xargs docker rmi