You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+88-32Lines changed: 88 additions & 32 deletions
Original file line number
Diff line number
Diff line change
@@ -2,20 +2,26 @@
2
2
3
3
hoc provide a simple apis to create javascript reusable components. It provide an abstraction from underlying framework, helps reuse the same component for different libraries with minimum code changes.
4
4
5
-
# Install
5
+
##Install
6
6
7
7
```
8
8
npm i -S @js-factory/hoc
9
+
9
10
```
10
11
11
-
# features!
12
-
- Allow you to maximize vanilla javascript use
13
-
- Promotes function programming by exposting functions/methods outside the class
12
+
## Motivation
13
+
Modern frontend applications are getting complex day by day. It has to manage core business logic, even more complex layouts, and data. This is extremely important that frontend application architecture follows core software design principles.
14
+
15
+
### Separation of concern
16
+
17
+
In [computer science](https://en.wikipedia.org/wiki/Computer_science), separation of concerns (SoC) is a design principle for separating a computer program into distinct sections, such that each section addresses a separate [concern](https://en.wikipedia.org/wiki/Concern_%28computer_science%29).
`HOC` offers four major components e.g. `state`, `template`, `instanceProps`, `methods`.
77
+
72
78
### state
73
-
**state** is component local state. It can be modified with `setState` function. Every call to `setState` will cause component re-rending. In case you do not want render the component every time state changes, please use instanceProp.
79
+
The state is a plain JavaScript object that represents your component local state. Please read about [React state](https://reactjs.org/docs/state-and-lifecycle.html) if you are not aware about what a component state is all about. `hoc` exposes a it's own `setState` to update component state.
74
80
75
-
In order to access application state you need to use `getState` method.
81
+
```js
82
+
conststate= {
83
+
...
84
+
count:0,
85
+
...
86
+
};
76
87
77
-
### instanceProp
78
-
**instanceProp** is same as *state* but it offers its own getter `getInstanceProp` and setter `setInstanceProp`. instanceProp changes do not call `render`.
88
+
constincrement= ({ state, state }) => {
89
+
const { count } = state;
90
+
returnstate({
91
+
count: count +1
92
+
});
93
+
};
94
+
```
95
+
96
+
### instanceProps
97
+
The instanceProps is same as *state* unlike state any update to it will not trigger component re-rendering. You can update instanceProps using `setInstanceProps` method.
A template is functional component represents presentation layer.
117
+
118
+
### methods
119
+
You can add as many functions as you need to manage your component state and handle user interactions. These methods could be lifecycle hooks of underlying framework like componentDidMount, componentWillUpdate or simple event handlers.
120
+
121
+
#### life cycle hooks
81
122
hoc allows developer to use underlying library hooks like componentDidMount, componentWillMount etc. Please refer above component definition.
82
123
83
-
**Note:** Unlike react or preact you will not have access to `this`. You will get all the handlers, action, state as a props.
124
+
**Note:** Unlike react or preact you will not have access to `this`. `hoc` will inject all component properties and methods in run time.
84
125
85
126
86
-
### eventHandler
87
-
**eventHandler** is a collection of dom event handlers i.e. click, scroll, mouseover etc. Event handlers are plain javascript functions and surely not tightely coupued with any underlying library.
127
+
#### event handlers
128
+
You can define any dom event handler and bind it with component. Event handlers are plain javascript functions and surely not tightly coupled with any underlying library.
0 commit comments