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