[React] Prevent Unnecessary Rerenders of Compound Components using React Context
React of Using Context Components
2023-09-14 08:59:17 时间
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源码解析6.legacy模式和concurrent模式
- 深入React Diff算法
- React saga_react获取子组件ref
- React v18.x 在 react-router v6 使用 lazy 动态加载组件实现
- 美团前端二面常考react面试题(附答案)
- React组件复用的发展史
- 老生常谈React的diff算法原理-面试版
- react-devtools插件安装解决方案
- 前端聊天功能如何实现_react使用websocket
- 深入react源码看setState究竟做了什么?
- react源码解析--jsx&核心api
- react源码分析:深度理解React.Context
- 解锤OracleAS OF模式深入浅出(oracle as of)