Unstated-Next 使用教程
项目介绍
Unstated-Next 是一个轻量级的 React 状态管理库,旨在通过 React Hooks 和 Context API 简化状态共享和逻辑复用。它提供了一种简洁的方式来管理组件间的状态,而无需引入额外的第三方库。Unstated-Next 的核心思想是利用 React 内置的工具链来实现状态管理,从而减少开发者的学习成本和项目依赖。
项目快速启动
安装
首先,通过 npm 安装 Unstated-Next:
npm install --save unstated-next
基本使用
以下是一个简单的计数器示例,展示了如何使用 Unstated-Next 来管理状态:
import React, { useState } from 'react';
import { createContainer } from 'unstated-next';
import { render } from 'react-dom';
function useCounter(initialState = 0) {
let [count, setCount] = useState(initialState);
let decrement = () => setCount(count - 1);
let increment = () => setCount(count + 1);
return { count, decrement, increment };
}
let CounterContainer = createContainer(useCounter);
function Counter() {
let counter = CounterContainer.useContainer();
return (
<div>
<button onClick={counter.decrement}>-</button>
<span>{counter.count}</span>
<button onClick={counter.increment}>+</button>
</div>
);
}
function App() {
return (
<CounterContainer.Provider>
<Counter />
</CounterContainer.Provider>
);
}
render(<App />, document.getElementById('root'));
应用案例和最佳实践
共享状态和逻辑
Unstated-Next 非常适合用于需要在多个组件间共享状态和逻辑的场景。例如,在一个多步骤表单中,可以使用 Unstated-Next 来管理表单数据和步骤状态。
import React, { useState } from 'react';
import { createContainer } from 'unstated-next';
function useForm() {
let [step, setStep] = useState(1);
let [formData, setFormData] = useState({});
let nextStep = () => setStep(step + 1);
let prevStep = () => setStep(step - 1);
let updateFormData = (data) => setFormData({ ...formData, ...data });
return { step, formData, nextStep, prevStep, updateFormData };
}
let FormContainer = createContainer(useForm);
function StepOne() {
let form = FormContainer.useContainer();
return (
<div>
<h2>Step 1</h2>
<input
placeholder="Name"
onChange={(e) => form.updateFormData({ name: e.target.value })}
/>
<button onClick={form.nextStep}>Next</button>
</div>
);
}
function StepTwo() {
let form = FormContainer.useContainer();
return (
<div>
<h2>Step 2</h2>
<input
placeholder="Email"
onChange={(e) => form.updateFormData({ email: e.target.value })}
/>
<button onClick={form.prevStep}>Back</button>
<button onClick={form.nextStep}>Next</button>
</div>
);
}
function Form() {
let form = FormContainer.useContainer();
return (
<div>
{form.step === 1 && <StepOne />}
{form.step === 2 && <StepTwo />}
</div>
);
}
function App() {
return (
<FormContainer.Provider>
<Form />
</FormContainer.Provider>
);
}
render(<App />, document.getElementById('root'));
典型生态项目
结合 React Router
Unstated-Next 可以与 React Router 结合使用,以实现更复杂的路由和状态管理。
import React from 'react';
import { BrowserRouter as Router, Route, Link