[React] Prevent Unnecessary Rerenders of Compound Components using React Context
Due to the way that React Context Providers work, our current implementation re-renders all our compound component consumers with every render of the <Toggle />
which could lead to unnecessary re-renders. Let's fix that by ensuring that the value
prop we pass to the <ToggleContext.Provider />
is only changed when the state changes.
// Flexible Compound Components with context
// This allows you to avoid unecessary rerenders import React from 'react'
import {Switch} from '../switch' const ToggleContext = React.createContext() function ToggleConsumer(props) {
return (
<ToggleContext.Consumer {...props}>
{context => {
if (!context) {
throw new Error(
`Toggle compound components cannot be rendered outside the Toggle component`,
)
}
return props.children(context)
}}
</ToggleContext.Consumer>
)
} class Toggle extends React.Component {
static On = ({children}) => (
<ToggleConsumer>
{({on}) => (on ? children : null)}
</ToggleConsumer>
)
static Off = ({children}) => (
<ToggleConsumer>
{({on}) => (on ? null : children)}
</ToggleConsumer>
)
static Button = props => (
<ToggleConsumer>
{({on, toggle}) => (
<Switch on={on} onClick={toggle} {...props} />
)}
</ToggleConsumer>
)
// The reason we had to move `toggle` above `state` is because
// in our `state` initialization we're _using_ `this.toggle`. So
// if `this.toggle` is not defined before state is initialized, then
// `state.toggle` will be undefined.
toggle = () =>
this.setState(
({on}) => ({on: !on}),
() => this.props.onToggle(this.state.on),
)
state = {on: false, toggle: this.toggle}
render() {
return (
<ToggleContext.Provider value={this.state}>
{this.props.children}
</ToggleContext.Provider>
)
}
} function Usage({
onToggle = (...args) => console.log('onToggle', ...args),
}) {
return (
<Toggle onToggle={onToggle}>
<Toggle.On>The button is on</Toggle.On>
<Toggle.Off>The button is off</Toggle.Off>
<div>
<Toggle.Button />
</div>
</Toggle>
)
}
Usage.title = 'Flexible Compound Components' export {Toggle, Usage as default}
[React] Prevent Unnecessary Rerenders of Compound Components using React Context的更多相关文章
- [Angular] Write Compound Components with Angular’s ContentChild
Allow the user to control the view of the toggle component. Break the toggle component up into multi ...
- [React] Render Basic SVG Components in React
React loves svg just as much as it loves html. In this lesson we cover how simple it is to make SVG ...
- react看这篇就够了(react+webpack+redux+reactRouter+sass)
本帖将对一下内容进行分享: 1.webpack环境搭建: 2.如何使用react-router: 3.引入sass预编译: 4.react 性能优化方案: 5.redux结合react使用: 6.fe ...
- Wait… What Happens When my React Native Application Starts? — An In-depth Look Inside React Native
Discover how React Native functions internally, and what it does for you without you knowing it. Dis ...
- React与ES6(四)ES6如何处理React mixins
React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...
- 玩转 React 【第03期】:邂逅 React 组件
上期回顾 前文我们讲解了 React 模板 JSX,接着我们继续来看看 React 组件又是如何工作的呢? 组件化开发到了今天已经是大家的共识,在 React 中,组件同样也是组成我们整个项目的基本单 ...
- [React] Use the Fragment Short Syntax in Create React App 2.0
create-react-app version 2.0 added a lot of new features. One of the new features is upgrading to Ba ...
- 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目
前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...
- react 16.8版本新特性以及对react开发的影响
Facebook团队对社区上的MVC框架都不太满意的情况下,开发了一套开源的前端框架react,于2013年发布第一个版本. react最开始倡导函数式编程,使用function以及内部方法React ...
随机推荐
- 【java】查重类的实现
import java.util.Vector; public class ElementCheck { // 重复优先 static Vector<Integer> CheckSameE ...
- js 脚本语言
字符串转换为数字 parseInt(string) .parseFloat().Number() 参考博客:https://zhidao.baidu.com/question/629898532158 ...
- CAD交互绘制文字(com接口)
在cad设计时,需要绘制文字,用户可以设置设置绘制文字的高度等属性. 主要用到函数说明: _DMxDrawX::DrawText 绘制一个单行文字.详细说明如下: 参数 说明 DOUBLE dPosX ...
- CAD参数绘制圆(网页版)
CAD绘制图像的过程中,画圆的情况是非常常见的,用户可以设置圆的圆心位置及半径属性. 主要用到函数说明: _DMxDrawX::DrawCircle 绘制一个圆.详细说明如下: 参数 说明 DOUBL ...
- 小b重排字符串
2485 小b重排字符串 2 秒 262,144 KB 5 分 1 级题 小b有一个字符串S,现在她希望重排列S,使得S中相邻字符不同. 请你判断小b是否可能成功. 样例解释:将"aab ...
- vue工程化之公有CSS、JS文件
1.关于公共的css 在src下面新建public.css,然后在main.js中引入进来 import '@/public.css',这样所有页面中都会使用这个样式了,如果只是部分页面需要,那还是不 ...
- python 列表生成式、lower()和upper()的使用
参考: http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/0013868196389 ...
- 初识Typescript及vscode环境配置
什么是typescript?为什么要用它? typescript简称ts,是js语法的一个超级,由微软团队维护的 js特点(不足) 弱类型:js中的数据变量没有确定的类型,可以存储对象,可以存储数字, ...
- C++如何显式调用常成员函数
C++的常成员函数与同名成员函数重载时,该如何显式调用常成员函数? 具体的一个小例子: #include <iostream> using namespace std; class C1 ...
- 笔试算法题(29):判断元素范围1到N的数组是否有重复数字 & 计算整数的7倍
出题:一个长度为N的数组,其中的元素取值范围是1到N,要求快速判断数组是否存在重复数字: 分析: 解法1:如果N个元素的范围都是在1到N,所以如果没有重复元素,则每一个位置恰好可以对应数组中的一个元素 ...