React Pattern List

• 2016-来自AlloyTeam的React.js 2016最佳实践

Architecture Pattern |架构模式

• 2016-React Patterns: Patterns for React Developers

• 2017-10 React mini-patterns: Over the last few years, I’ve worked on a handful of decent-sized React projects, and many, many pint-sized ones. Throughout this magical journey, a number of patterns have come up that I find myself repeating again and again.

• 2018-Evolving Patterns in React: Let’s take a closer look at some of the patterns that are emerging in the React ecosystem. These patterns improve readability, code clarity, and push your code towards composition and reusability.

Functional React |函数式React

• 2017-Functional setState is the future of React: Declare state changes separately from the component classes.

• non-functional-react-js

• Functional React Series — Part 1: Get your App outta my Component

• Rendering a function with React: How I tricked React into rendering a function (not call it… render it)

• 2017-Container Components: One React pattern that’s had the impact on my code is the container component pattern.

• Presentational and Container Components

HOCs |高阶组件

• Higher Order React Components

• Higher-Order Components in React

• 2017-Why you should keep your react components pure by using HOCs: In this article I show how decomposing state from the presentational layer can both reduce complexity and promote code re-use with some React examples— a win-win situation helping to tame the challenges of developing SPAs. Although I’m using React, the lessons are universal and can apply to any framework.

• 2017-Understanding Higher Order Components: Making sense of the rapidly changing React best practice.

• React Higher Order Components in depth

• Share Code between React and React Apps using Higher Order Components

• Renderless Components or How Logic Doesn’t Always Need a UI

• 2018-hocs : A collection of Higher-Order Components for React and React Native.

Recompose

• 2016-Building HOCs with Recompose

• 2016-Why The Hipsters Recompose Everything: Building a Utility Library for React

• 2017-Higher Order Components with Functional Patterns Using Recompose: In this course, you will learn to use many of the most powerful and convenient higher-order components within Recompose by coding several real-world examples. Using recompose looks very different from “vanilla” React; so you will also get comfortable with the look and feel of a “recomposed” component. The best part is no more need for class components! You’ll learn how to use Recompose to both modify components and also create your own higher-order components.

• 2017-Top 5 Recompose HOCs: Today we’ll be going through my 5 (in no particular order) favorite Recompose Higher Order Components.

Render Props

Style Guide |样式风格

Code Style |代码风格

• Our Best Practices for Writing React Components

• 2017-Avoiding deeply nested component trees: By passing child components down instead of data you can avoid passing data down through many levels of components.

• 2017-8 Key React Component Decisions: Standardize your React development with these key decisions.

• 2017-How to structure components in React?: Structuring system is the hardest thing and it has a big impact on the overall project.

• 2017-Characteristics of an Ideal React Architecture: React is only the View; in essence: a thin view library with unidirectional data bindings and its own internal component life-cycle.

• 2019-Writing Resilient Components: There are important design principles that every component should strive to follow. But I don’t think style guides capture those principles well. We’ll talk about style guides first, and then look at the principles that really are useful.

Code Organization |代码组织

• 2016-How to better organize your React applications?: I decided to spend some time to figure out what could be the best way to organize my future React projects.