Components

2022/02/26 (增加連結)

Components

在React裡，有兩種component:class component及functional component，在React 16.8之前，class component是stateful component，也就是每個component裡有自己的state，functional component是stateless component，在React 16.8之後，functional component可利用hook來處理state，所以，functional component就再也不是stateless component了。

• How to simplify your life as a React Developer

  • Always think before creating new components

  • Split up into components as often as possible

  • Use Functional Components

  • Use State Management

  • Organize project structure

• Think of React Components as State Machines, Not Functions

• Modeling UI States in A React Form Component Using A Finite State Machine

• 9 Ways to Manipulate and Work With Components in React

  • The Prop Component

    • Popular React component libraries like Material-UI use this strategy very often in just about every component they provide.

  • Rendering Elements, Class Components, or Function Components in One Call

  • Hijack Props With Higher-Order Components (HOC)

  • Reuse Component Logic With Render Props

    • Using this pattern solves the same problems that higher-order components try to solve. But plenty of developers favor using the render prop pattern for one very good reason: Higher-order components introduced a problem where you needed to copy over static methods.

  • Reuse Component Logic With Children as Functions

    • This is basically the same as using the render prop approach

  • Reuse Component Logic With Multiple Render Functions

  • Reuse Component Logic With React Hooks

    • One problem render props introduced is when we render multiple render prop components nested under each other, we encounter callback hell

  • Reuse Component Logic by Working With Children

    • however, a better way to approach this similar functionality now is by using React Context

  • Dynamically Creating Deeply Nested Components

• Refactoring a Complex React Component — 5 Best Practices to Write Efficient and Readable Components

  • Prefer functional components with React Hooks

  • DRY the wet!

  • Proper naming & props destructuring

  • May the PropTypes be with you!

  • Split into small pieces

• How the “Golden Rule” of React components can help you write better code

  • with hook

  • More or less, this “golden rule” is simply re-hashing the existing idea of presentational components vs. container components in a new light.

• Designing Developer-Friendly React Components

  • Context-Free Component

  • Simple and Semantic Component Props

  • Consider Component Use Cases

  • Style Props Names the Same As CSS Property Names

  • EventHandler Props

  • Abstract Away As Much As Possible

  • Abstracted but Customizable Components

• React Element’s “Parent” vs “Rendered By”

  • React Element Creation Order

    • App ➜ Child ➜ Parent

  • React Element Render Order

    • App ➜ Parent ➜ Child

  • React Element Mount Order

    • Child ➜ Parent ➜ App

• Delayed rendering of React Components: Avoid UI flashing effects by waiting some time before showing loading indicators

• Code Splitting by Routes and Components in React

  • Route-based splitting

  • Component-based splitting

• How to Add Typechecking to Your React Components

• Components at Scale: Build a Library That Scales

  • What Tools to Use?

    • TypeScript

    • Material UI

    • Styled-components

    • rollup.js

    • create-react-app

• 5 Ways to Avoid React Component Re-Renderings : How to Avoid Unnecessary Re-rendering in React

• 3 Tips to Write Better React Components

  • useReducer Instead of useState

  • Separate Logic

  • Split It Into Smaller Pieces

• Tips for writing better React components

• 5 React Component Best Practices You Should Know : Destructure props, named components, and more

• 9 Tips for Building Awesome Reusable React Components

• Simple tips for writing clean React components

• How to Maximize Reusability for Your React Components

• A React’s Cookbook: How to Write Reusable Components

• Building highly customizable React components

• Building Hogwarts App using React

• Import Components in React Like a Pro

• How to Properly Build Components for React or Any Other Library/Framework

• Recursive Rendering With React Components

• 3 Ways to Dynamically Render UI in a React Component

  • The If-Else Condition

  • The && Logical Operator

  • The Ternary Operator

• Why Can’t My Component Unmount in React? : Fixing a common React race condition

• Code Review: Avoid Declaring React Component Inside Parent Component

• Reusable and easy to maintain React components with react-wrap

• 5 tips to build a better React component

• 6 Tips to Make Your React Components More Reusable

• Lazy-Loading

  • Lazy Loading React Components

  • 5 Ways to Lazy Load React Components

• Bit

  • Building a React Component Library — The Right Way : Create an ultra-modular React component library: scalable, maintainable, and with a blazing-fast setup with bit

  • Component-Driven Development with Bit

State

• Don’t put that in React State — Thinking in React **

  • Don’t duplicate data from props to state

  • Don’t keep any data in the state unless you use it in rendering

  • Don’t add something to the state which can be derived directly from existing state properties

• Different Ways To Initialize State In React

  • Initialize State in the Constructor

  • Initialize State Without Constructor

• State and Lifecycle

• React: Understanding State & Lifecycle

• Rethinking React State

  • Anatomy of a React Component

  • Anatomy of Containers and Presenters

  • React + Stores

  • Store Improvements

  • Show Me The Code

    • mobx-base-store

• React state update on an unmounted component

• How to write clean and easy to understand React code using class properties syntax

• Why You Should Stop Using Objects With SetState()

• React Component State — How to Initialize, Read and Update a State

• 3 Mistakes Junior Developers Make With a React Component’s State

  • Modifying State Directly

  • Setting State That Relies on the Previous State Without Using a Function

  • Forgetting That setState Is Asynchronous

• Why Don’t React State Updates Reflect Immediately?

• How to Access the State in setTimeout Inside a React Function Component

• Immer

  • A Better Way to Handle State with Immer : How to handle React state and complex data structures in an immutable way with Immer

Props

• Components and Props

• Passing Data Through Props

• What is “Props” and how to use it in React?

  • What is Props?

  • Using Props in React

• Passing Elements as Props in React: The middle ground between a props explosion and render props

• A Guide to Props in React

• React: Good Props/Bad Props

• A Complete Guide To props.children In React

• React Props Cheatsheet: 10 Patterns You Should Know

• How to Pass Props from Child to Parent Component in React

• Different Ways To Conditionally Set Props To A Component In ReactJS

  • Ternary Approach

  • The OR operator Approach

  • The AND operator approach

  • Flow Control Approach (Escape Hatch!)

  • The Spread Approach

Functional components vs. class components

• All Lifecycles in Class Components (Stateful) and Similar in Functional Components (Stateless) With Practical Tips in React JS

• 3 Ways to Create React Components

  • Method #1: Using a Variable Function (depreciated)

  • Method #2: Using a Class

  • Method #3: Using a Stateless Functional Component (without hooks)

• React: Functional Component and Class Component (without hooks)

• React JS — Understanding Functional & Class Components (without hooks)

  • Functional (Stateless) Components

    • React introduced React Hooks in version 16.8, which now allows us to use state & other features in functional components.

  • Class (Stateful) Components

• React Class vs. Functional Components

• Should I Use Functional Components or Class Components In React?

• Why Use Stateless Components?

Class components

• Class components 吳濟聰老師提供的範例與說明

• How to use React Component Lifecycle?

• Tiny Components: What Can Go Wrong?

• Your React Components Are Doing Too Much

  • Separate State Management

  • Separate Styling

  • TOO MANY PROPS!!!!

• Separation of Concerns: Component Deconstruction

  • What is a UI component?

  • So what is a logical component?

  • Bringing everything together

• This is why we need to bind event handlers in Class Components in React (ES6)

• React Components + Inheritance

• The Love-Hate Relationship between React Router and React Components

• React component patterns

  • What is a component?

  • Component API’s

    • render

    • state

    • props

    • context

    • lifecycle events

  • Stateful

    • render, state, and lifecycle events

  • Stateless

    • render, props, and context

  • Patterns

    • Container

    • Presentational

    • Higher order components (HOC’s)

    • Render callback

• Class Based Components in React.Js

Communication

• Passing Data Between React Components

  • Parent to Child — Use Prop

  • Child to Parent — Use a callback and states

    • How to Send Data From Child to Parent Component with React Hooks

  • Between Siblings — Combine the above

• Passing Data Between React Components — Parent, Children, Siblings

  • From Parent to Child using Props

  • From Child to Parent using Callbacks

  • Between Siblings :

    • (i) Combine above two methods

    • (ii) Using Redux

    • (iii) Using React’s Context API

• How to communicate between Components (Vue.js vs React.js)

  • Parent → Child: properties, methods

  • Child → Parent: events, callbacks

  • Child → Child: via parent, domain store, UI store, or global event bus. In short, two child components can communicate using their closest parent or a shared third object.

• React: Dead-Simple Component Communication: set up communication from child-to-parent

  • Use Component-Level Arrow Function

  • Sending Arguments Back (callback)

  • Functional Components

  • Router (render props)

• 8 no-Flux strategies for React component communication

  • Parent -> Child

    • Props

    • Instance methods (refs)

  • Child -> Parent

    • Callback methods

    • Event Bubbling

  • Sibling -> Sibling

    • Parent component

  • Any -> Any

    • Observer pattern

    • Global variables (not recommended)

    • Context

• React: Communication Between Components

  • Render Props/Props

  • Context

  • React-Redux/Redux

• 5 Ways to pass data between components using React API

  • React.cloneElement (not recommended)

  • renderProps — Passing values using functions

  • Using Higher-Order-Components to render props

  • Using Custom hooks ** recommended

  • Using Context API

• Communication Patterns in React

  • Props for parent->child communication

  • Callback props for child->parent communication

  • Common ancestor: does not scale, almost an anti-pattern

  • Event bubbling: implicit coupling, clearly an anti-pattern

  • Via the server: why not after all?

  • React Context, what else?

  • Building or React Context, let’s add some contracts

  • PubSub

• Render Props

  • Understanding React Render Props and HOC

  • React Render Props

  • Render Props in React

  • React’s Render Props technique in 3 Minutes

  • How to develop your React superpowers with the Render Props Pattern

  • The amazing Render props pattern for React.js — lifecycle begone!

  • Code-sharing in React using Render Props

  • Learn Render Props by Example

  • Using Render Props to Share Code Between React Components.

Functional components

• Functional components 吳濟聰老師提供的範例與說明

• Function Components

• Functional Components for Experienced React Developers

• Why is React Declarative? A Story About Function Components

• Never call a React function component

  • The way we’re calling Item, is not a component at all, but a function. React cannot associate any useState calls to the Item function, just because it’s not rendered as a component.

• How To Create Forms in React.Js

  • Getting Started

    • Declaring Hooks

    • Function to Change Hooks

  • Handling Inputs

    • Textfield

    • Drop Down Menus

    • Radio Buttons

    • Checkbox

• 3 Mistakes Junior Developers Make With React Function Component State

  • Modifying State Directly

  • Setting State That Relies on the Previous State Without Using a Function

  • Forgetting That the Setter Method from useState Is Asynchronous

• Functional Components are Better: But Only by a Little

  • Caveat #1: there’s nothing wrong with building class-components if that’s what you know. Not at all. I’d say you probably need to learn functional style pretty soon.

  • Caveat #2: There is an enormous codebase out there built on class components. There is no urgency to refactor them. There is no imperative to start shaking up the in-place processes by forcing functional style.

  • Caveat #3: Stability and smoothness with process, organization and people always must be weighed into the scales.

• The Rise of the React Functional Component

• Don’t Depend on State From Callback Handlers in React

• How to write great React

  • Why focus on writing components?

  • Components as functions

  • Write clean components by following the rules of writing clean functions.

    • Your component should be small

    • Your component should do one thing

    • Your component should have one level of abstraction

    • Your component should have only a few arguments (props)

    • Your component should have a descriptive name

• (Don't Fear) the components

• Mastering React Functional Components with Recompose

• How to build GitHub search functionality in React with RxJS 6 and Recompose

• Improving Performance in React Functional Components using React.memo() (React 16.6)

• React Memoization

  • Memoization is a new concept in ReactJS through which we can store a heavy functional component in memory. Then reuse that component again calling it from cache.

• How To Write Better Functional Components in React : 5 simple tips for readability and optimization

Higher order components

• How to Use React Higher-Order Components

• Image Optimization using Higher Order Components

• React Anti-Pattern: Prop-Drilling

  • A better solution is to use a high-order component to cross-cut the color management feature to the four presentational components.

• React’s Higher-Order Components (HOCs)

  • Higher order functions

• Things you must know about React JS | Custom hooks/Lazy Loading /HOCs

• Real life React Higher Order Component use case (withLoading)

Higher-order functions

• Higher-order functions: what they are, and a React example

Web Components

• Getting Started with Web Components: Building a Color Palette Generator

• Better React Components Through Web Components

  • Custom Element Names

  • Shadow DOM

Patterns

• React Component Patterns

  • Compound Components

  • Flexible Compound Components

  • Provider Pattern

• 3 React Component Design Patterns You Should Know About

  • Presentational and Container Component Pattern

  • Provider Pattern

  • Compound Components Pattern

Compound Component

• Compound Component Pattern in React

• Advanced React pattern -Compound Component

• Master the Compound Component Pattern

• Up Your React Game With Compound Components

• Compound Component Design Pattern in React : Avoid prop drilling, and write expressive components with implicit state sharing

Flexible Compound Components

• How to Use Component Composition to Create a Flexible Compound Component in React

Provider

• Customizing React components using a components provider

Composition

• How to Avoid Prop Drilling with Composition

• How To Avoid Prop Drilling in React Using Component Composition

• Using Composition to reduce prop drilling in React

• React is all about composition

Container components

• Reusability by using container components

• React — Universal Container : Create a reusable container to load data for multiple presentational components

• React components composition: how to get it right with container components

Pure components

• Working With React Pure Components

  • Pure Components restricts Re-Rendering

  • Props and State Changes are Shallow Compared

• React — When Should Pure Components Be Used? : React.memo / React.PureComponent usage guide

Controlled Components vs. Uncontrolled Components

• The Difference Between Controlled and Uncontrolled Components in React

• Controlled vs Uncontrolled Components in React

  • 裡面內容有些需要更正~