正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

❌ Avoid having components with too many props. ✅ Instead use the compound components pattern in React to embrace composition.

George Moller

118,935 subscribers

177,627 次观看 • 1 年前 •via X (Twitter)

教育科学技术

Anya Rossi• Live Now

Private livecam show

10 条评论

George Moller 的头像

George Moller1 年前

I've been working professionally with React for more than 8 years and I compiled all my knowledge into 100+ infographics and 70+ video tutorials just like this one. Check them out ↓

wlepinski 的头像

wlepinski1 年前

This is a really bad example of composition. You kind of allow the user to make a mistake like adding the icon in between the other components. If you want something similar you have to use renderProps.

George Moller 的头像

George Moller1 年前

I call that flexibility

tslamoon 的头像

tslamoon1 年前

Meh. Yes use composition but this example Implementation isn’t that much better. It’s why we don’t have div and div.p and div.h1

React Nuclear 的头像

React Nuclear1 年前

This allows too much configurability. It’s better to use the interface of the component to guarantee the user won’t abuse how the component works internally. (“children: ReactNode” is basically an any)

Qui soc 的头像

Qui soc1 年前

Bad example of composition tbh

Snehil Kumar 的头像

Snehil Kumar1 年前

Composition is good for an unopinionated component library where expectation is that devs will add custom styles. But it's a no-go for a product/brand's design system because they have rules set in stone for the sake of consistency Eg: "alert icon will always be on the top-left"

Stephen Rayner 的头像

Stephen Rayner1 年前

Isn’t exporting as sub elements on the parent bad practice? Due to tree shaking limitations?

huda 的头像

huda1 年前

For me this does not make sense as I would have to change all the Alerts in my codebase if I want to change the Alert itself. If I wrap this in it's own component, I would have to pass all the props to the wrapper component.

Ndeye Fatou Diop 🚢 💻 | DEV | 🇸🇳🇫🇷 的头像

Ndeye Fatou Diop 🚢 💻 | DEV | 🇸🇳🇫🇷1 年前

Love using this tip especially for the performance benefits

相关视频

❌ Avoid having components with too many props. ✅ Instead use the compound components pattern in React to embrace composition.

❌ Avoid having components with too many props. ✅ Instead use the compound components pattern in React to embrace composition.

George Moller

130,061 次观看 • 2 年前

❌ Avoid prop-drilling components in React ✅ Instead embrace the Provider/Consumer pattern using the Context API

❌ Avoid prop-drilling components in React ✅ Instead embrace the Provider/Consumer pattern using the Context API

George Moller

48,323 次观看 • 1 年前

❌ Avoid prop-drilling your components to extend them ✅ Instead use composition

❌ Avoid prop-drilling your components to extend them ✅ Instead use composition

George Moller

51,206 次观看 • 4 个月前

❌ Don't pass props to multiple nested components in React. ✅ Instead use libraries like react-query to better handle server state.

❌ Don't pass props to multiple nested components in React. ✅ Instead use libraries like react-query to better handle server state.

George Moller

137,429 次观看 • 2 年前

❌ Avoid difficult-to-read conditionals to render elements in react. ✅ Instead use utility components for conditional rendering.

❌ Avoid difficult-to-read conditionals to render elements in react. ✅ Instead use utility components for conditional rendering.

George Moller

301,101 次观看 • 2 年前

❌ Avoid mixing business logic with your React components. ✅ Instead create abstraction layers that communicate with them.

❌ Avoid mixing business logic with your React components. ✅ Instead create abstraction layers that communicate with them.

George Moller

214,951 次观看 • 2 年前

❌ Avoid difficult-to-read conditionals in React. ✅ Instead you can use ts-pattern to express complex conditions in a single, compact expression.

❌ Avoid difficult-to-read conditionals in React. ✅ Instead you can use ts-pattern to express complex conditions in a single, compact expression.

George Moller

185,781 次观看 • 2 年前

❌ Avoid Provider wrapping hell in React. ✅ Instead combine all your Providers using composition.

❌ Avoid Provider wrapping hell in React. ✅ Instead combine all your Providers using composition.

George Moller

256,611 次观看 • 2 年前

❌ Avoid Provider wrapping hell in React. ✅ Instead combine all your Providers using composition.

❌ Avoid Provider wrapping hell in React. ✅ Instead combine all your Providers using composition.

George Moller

120,830 次观看 • 2 年前

🚨 Avoid monolithic components that combine rendering, state management, and configuration (e.g., IDs, refs) into one unit, is harder to maintain, test, and reuse. ✅ Instead split functionality into composable components and use context to share configuration and state.

🚨 Avoid monolithic components that combine rendering, state management, and configuration (e.g., IDs, refs) into one unit, is harder to maintain, test, and reuse. ✅ Instead split functionality into composable components and use context to share configuration and state.

George Moller

21,380 次观看 • 1 年前

❌ Avoid increasing time complexity by having non-normalized state variables in React . ✅ Instead normalize the structure of the state variables to reduce time complexity.

❌ Avoid increasing time complexity by having non-normalized state variables in React . ✅ Instead normalize the structure of the state variables to reduce time complexity.

George Moller

177,601 次观看 • 2 年前

Our discussion with Tom Occhino is now live! We discuss: ✅How React changed the web ✅React Server Components ✅Performance optimizations ✅React Native ✅When NOT to use React And much more! Preview below, see the full talk here 👉

Our discussion with Tom Occhino is now live! We discuss: ✅How React changed the web ✅React Server Components ✅Performance optimizations ✅React Native ✅When NOT to use React And much more! Preview below, see the full talk here 👉

Real World React

32,739 次观看 • 3 年前

💡React tip: Use a custom hook to handle array states in your components

💡React tip: Use a custom hook to handle array states in your components

George Moller

119,692 次观看 • 2 年前

⚛️ Instead of mixing business logic in React components I like to create small and predictable reducer abstractions with useReducer ↓

⚛️ Instead of mixing business logic in React components I like to create small and predictable reducer abstractions with useReducer ↓

George Moller

24,702 次观看 • 2 年前

❌ Don't use barrel imports in React ✅ Import components directly Barrel imports (index.js re-exports) import the entire module even if you need one component. This adds unused code to your bundle ↓

❌ Don't use barrel imports in React ✅ Import components directly Barrel imports (index.js re-exports) import the entire module even if you need one component. This adds unused code to your bundle ↓

George Moller

161,330 次观看 • 4 个月前

⚛️ One component, many forms: the power of polymorphic React components ↓

⚛️ One component, many forms: the power of polymorphic React components ↓

George Moller

59,703 次观看 • 1 年前

Client/Server composition with server components feels illegal 😅

Client/Server composition with server components feels illegal 😅

Alex Sidorenko

69,150 次观看 • 2 年前

Mafs - "React components for interactive math" Feels like butter interacting with these components. The library is clearly made with ♥️

Mafs - "React components for interactive math" Feels like butter interacting with these components. The library is clearly made with ♥️

Jay Hack

122,213 次观看 • 3 年前

just made a new prototyping tool for react components, live props, on a canvas this was 2hrs from scratch — with new multi-agent ux + to-dos in Cursor, kinda magic!

just made a new prototyping tool for react components, live props, on a canvas this was 2hrs from scratch — with new multi-agent ux + to-dos in Cursor, kinda magic!

Ryo Lu

234,893 次观看 • 11 个月前

🎉 Releasing Framer Motion Theatre, a library for creating animated React components. ⚡️ Use Theatre.js in React with a simple declarative API ⚡️ Animate Framer-motion's motion values using Theatre.js ⚡️ Get WYSIWYG editing for your components with 1 line of code 1/6

🎉 Releasing Framer Motion Theatre, a library for creating animated React components. ⚡️ Use Theatre.js in React with a simple declarative API ⚡️ Animate Framer-motion's motion values using Theatre.js ⚡️ Get WYSIWYG editing for your components with 1 line of code 1/6

Andrew Prifer

66,273 次观看 • 1 年前