1.0.2 • Published 9 months ago
react-context-pro v1.0.2
简单用例
定义Hook,并创建上下文
import { createContext } from 'react-context-pro';
const useCount = () => {
const [count, setCount] = useState(0);
const increment = useCallback(() => setCount(count + 1), [count]);
const decrement = useCallback(() => setCount(count - 1), [count]);
return { count, increment, decrement };
};
const Context = createContext(useCount);
Provider包裹需共享状态的组件
const Parent = () => {
return (
<Context.Provider>
<Demo />
</Context.Provider>
);
};
子组件内共享状态
const Demo = () => {
const { count, increment, decrement } = Context.useContext();
return (
<>
<div>当前:{count}</div>
<button onClick={increment}>+1</button>
<button onClick={decrement}>-1</button>
</>
);
};