[React] Prevent Unnecessary Rerenders of Compound Components using React Context
React of Using Context Components
2023-09-14 09:00:50 时间
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 Context源码是怎么实现的呢
- React v18.x 在 react-router v6 使用 lazy 动态加载组件实现
- 带你彻底读懂React VDOM DIFF
- React:不要动,否则你会被炒鱿鱼
- 一步步实现React-Hooks核心原理
- 「使用 webpack 5 从0到1搭建React+TypeScript 项目环境」2. 集成 css、less 与 sass
- React源码分析7-state计算流程和优先级
- React魔法堂:echarts-for-react源码略读
- 尝试 React 17 RC / Demo of Gradual React Upgrades
- 前端react面试题总结
- 项目chrome安装react devtools
- 滴滴前端二面必会react面试题指南_2023-02-28
- react源码分析--深度理解React.Context
- 老大react说:schedule,我们今年的小目标是一个亿
- 前端Vue和React项目 Git 管理常用.gitignore配置
- React-native组件库列表
- React--8: 组件的三大核心属性2:props
- react源码分析:babel如何解析jsx_2023-02-06
- React 许可证虽严苛,但不必过度 react
- 解锤OracleAS OF模式深入浅出(oracle as of)