This article has applied for nuggets peripheral gifts, nuggets badge *2 for the comment area lucky draw, through the way of comment to participate in details

preface

With the standardization and complexity of front-end development, it is a trend to prevent code redundancy, facilitate maintenance and improve readability. Now let’s talk more carefully. What is componentized development? How to design and encapsulate a component to improve your productivity.

Why componentize development? What is componentized development?

Actually foreword describes the basic is the reason why we want to modular development, when your page code and logic is too much, the same function or use the same code on multiple pages, maintenance cost is too big, then you need componentization development to reduce the amount of code you reduce maintenance costs, increase the readability of the code, improve development efficiency.

Principles of componentized development

  • Reusable components are independent, but components have to be tried in multiple scenarios, not one component can only be tried in the current scenario, the scenario a little bit more than the component can not be used then it is a problematic component, or even not a component.
  • Configure a component to be simple so that others can quickly understand what you do this component, through what means to the component value what properties what values you will get what values, component design and methods and values to semantic, not the surface means to do 1 things to do 2 things.

Puppet components and intelligent components

The React community divides components into two categories:

  1. Puppet components: As the name implies, like a puppet pulling strings, according to the outside of the piercingpropsRender the corresponding view, regardless of where the data came from.
  2. Intelligent component: Usually wraps around the puppet component, obtains data by request or other means, and then passes it to the puppet component to control its rendering.
< Smart Component > < Puppet component /> </ Smart component >Copy the code

Function component

– Function components with Hooks in React are now the way to go.

A function component doesn’t have any state, it can’t instantiate this, it doesn’t have any internal lifecycle, it actually just accepts functions. You can simply think of a function component as a function that defines parameters, I took some arguments and I did something inside the function and I handled something.

Sort out the relationships between components

<grandpa>
    <father>
        <grandson />
    </father>
</grandpa>
Copy the code

Here we have written three components to give a brief overview

  1. grandpaWant to givegrandsonLucky money, thengrandpaDirectly tograndsonDirectional broadcast:broadcastAt this timefatherDon’t send the data.
  2. grandpaI want to buy some meatfather 给 grandsonDo braised pork in brown sauce, so the relationship is the data layer by layer and do the corresponding processing and finally give tograndson.
  3. grandson 给 grandpaGifts, thengrandsonDirectly tograndpa Directed distribution:dispatch

You can discuss your development experience in the comments section about componentization and packaging components, and have a chance to win a nice prize! Comment area draw requirements:

  • By September 10th, if more than 10 people (not including the author) interact in the comments section, the author can draw 2 nuggets badges in his own name (nuggets official bear).
  • By September 10th, if more than 10 people interact in the comments section (excluding the author) and the number of comments exceeds 20 (including the author), the author will get an extra gift from the nuggets.
  • TOP 1-5 in comments (number of comments + number of comments) : 1 badge or 1 IPT shirt

Draw notes

This event is supported by nuggets official details can be found at juejin.cn/post/700064… I was on the list.

By September 10th, if more than 10 people (not including the author) interact in the comments section, the author can draw 2 nuggets badges in his own name (nuggets official bear).

  1. Join by commenting.
  2. Comments must be relevant to the article.
  3. The prizes will eventually be won by the most reviewed users.
  4. After winning the prize, I will inform you in the way of comment and add wechat to leave the delivery address.

Praise support, hand left lingering fragrance, with rongyan, move your rich little hands yo, thank you big guy can leave your footprints.

Past wonderful recommendation

Canvas Pit Climbing Road

Don’t know SEO optimization? An article helps you understand how to do SEO optimization

Canvas Pit Road

Wechat small program development guide and optimization practice

Talk about mobile adaptation

Front-end performance optimization for actual combat

Talk about annoying regular expressions

Obtain file BLOB stream address to achieve the download function

Vue virtual DOM confused? This article will get you through the virtual DOM once and for all

Git Git

Easy to understand Git introduction

Git implements automatic push

How do I use Git in my work

Interview Recommendations

Front ten thousand literal classics – the foundation

Front swastika area – advanced section

More exciting details: personal homepage