Heo
Simple, elegant React hooks state management solution
The project address
- React Hooks Works with React Hooks components
- Focus on the performance Reduce extra rerender and run smoothly
- 1KB min+gz
- Without relying on React is used only, with no reliance on third-party libraries
- simple React Hooks are what you need
- TypeScript write Complete type hints, easy to write code
- Easy to integrate It can be introduced incrementally to coexist with other state management
- general Components, modules, applications, and server-side rendering
- flexible Easily combine providers based on Context
- Easily migrate It is created based on custom Hooks
The installation
npm install --save heo
Copy the code
Example
import React from 'react';
import { createContainer, useMethods } from 'heo';
function useCounter() {
const [count, setCount] = React.useState(0);
const methods = useMethods({
increment() {
setCount(count + 1);
},
decrement() {
setCount(count - 1); }});return {
count,
methods,
};
}
const CounterContainer = createContainer(useCounter);
function CounterDisplay() {
const { count, methods } = CounterContainer.usePicker(['count'.'methods']);
return (
<div>
{count}
<button type="button" onClick={methods.increment}>
ADD
</button>
<button type="button" onClick={methods.decrement}>
MINUS
</button>
</div>
);
}
function App() {
return (
<CounterContainer.Provider>
<CounterDisplay />
</CounterContainer.Provider>
);
}
render(<App />.document.getElementById('root'));
Copy the code
API
createContainer(useHook)
import { createContainer, useFunction } from 'heo';
function useCustomHook() {
const [value, setInput] = useState();
const onChange = useFunction((e) = > setValue(e.currentTarget.value));
return {
value,
onChange,
};
}
const Container = createContainer(useCustomHook);
// Container === { Provider, usePicker }
Copy the code
<Container.Provider>
function ParentComponent() {
return (
<Container.Provider>
<ChildComponent />
</Container.Provider>
);
}
Copy the code
<Container.Provider initialState>
function useCustomHook(initialState = ' ') {
const [value, setValue] = useState(initialState);
// ...
}
function ParentComponent() {
return (
<Container.Provider initialState="value">
<ChildComponent />
</Container.Provider>
);
}
Copy the code
Container.useSelector()
Listen for selected values in the current container, and rerender is fired if the values change
function ChildComponent() {
const value = Container.useSelector((state) = > state.value);
return <span>{value}</span>;
}
Copy the code
Container.usePicker()
UseSelector syntax sugar, more commonly written
function ChildComponent() {
const { value } = Container.usePicker(['value']);
return <span>{value}</span>;
}
Copy the code
Container.withPicker()
Higher-order component form of usePicker
function ChildComponent({ value }) {
return <span>{value}</span>;
}
Container.withPicker(ChildComponent, ['value']);
Copy the code
useMethods
& useFunction
Persist a Hook for a function.
You might need ituseCallback
Remember a callback, but since the internal function must be recreated frequently, memory is poor, causing the child component to repeat render. For complex subcomponents, rerendering can have an impact on performance. throughuseMethods
, which guarantees that the function address will never change.
Performance tip
Heo was inspired by unstoritiate-Next and solved the performance problem of context penetration caused by unSToritiate-Next without excessive abstract composition and optimization of components. Performance is extremely important in large modules/projects and can save us a lot of tuning time.
Export member memorization
In React Hooks, setState re-executes the current function, rerender, each time. Under this feature, the component’s internal functions are also recreated with rerender, expressions are re-executed, and useMemo and useCallBack exist as a result.
Heo also has the same memory properties as React. In the useCounter return value below, the function requires a useMethods wrap for memorization. A note of caution: do not export mutable objects that are recreated with each render. Heo doesn’t need to be optimized. All the optimizations you do are standard React optimizations.
function useCounter() {
const [count, setCount] = React.useState(0);
const methods = useMethods({
increment() {
setCount(count + 1);
},
decrement() {
setCount(count - 1);
},
handleClick() {
// This can be called
this.increment();
// ...}});return {
count,
methods,
};
}
const Counter = createContainer(useCounter);
Copy the code
- We are very happy that the React state management plug-in has been approved by others. There will be another one soon. I am drafting a document to use it with HEO, which is perfectly compatible with TS type
- The project addressThank you all star, mention issue, embrace open source!
portal
-
Technical exchange group
-
This year interviewed 100+ front-end classmates my summary
-
Why do I insist on getting up at six
-
I read the technical book is very anxious, can not read the book how to do?
-
Hard work === “volume”?
-
Vite + React + TS
-
Vite + React + TS