1 react-hanger
yarn add react-hanger
import React, { Component } from "react";
import {
useInput,
useBoolean,
useNumber,
useArray,
useOnMount,
useOnUnmount
} from "react-hanger";
const App = () => {
const newTodo = useInput("");
const showCounter = useBoolean(true);
const limitedNumber = useNumber(3, { lowerLimit: 0, upperLimit: 5 });
const counter = useNumber(0);
const todos = useArray(["hi there", "sup", "world"]);
const rotatingNumber = useNumber(0, {
lowerLimit: 0,
upperLimit: 4,
loop: true
});
return (
<div>
<button onClick={showCounter.toggle}> toggle counter </button>
<button onClick={() => counter.increase()}> increase </button>
{showCounter.value && <span> {counter.value} </span>}
<button onClick={() => counter.decrease()}> decrease </button>
<button onClick={todos.clear}> clear todos </button>
<input type="text" value={newTodo.value} onChange={newTodo.onChange} />
</div>
);
};
https://github.com/kitze/react-hanger API
2 React Redux hooks
React Redux现在提供了一组hook api,作为现有connect()更高顺序组件的替代方案。这些api允许您订阅Redux存储和分派操作,而不必在connect()中包装组件。
下面是useSelector钩子使用selector函数返回所有store的一部分。
import React from 'react'
import { useSelector } from 'react-redux'
export const CounterComponent = () => {
const counter = useSelector(state => state.counter)
return <div>{counter}</div>
}