0i0 中文文档教程

发布于 4年前 浏览 24 项目主页 更新于 3年前

0i0

像 api 一样使用 redux,但是像嵌套在组件中的 api 一样实现上下文

demo

https://codesandbox.io/s/0i0-yq1n3

how to use

install

yarn add 0i0

it need a root just like Context

import React, { useState } from "react";
import Num1 from "./num1";
import Num2 from "./num2";
import { Provider } from "0i0";

export default function App() {
  const [num1, setNum1] = useState(0);
  const [num2, setNum2] = useState(0);
  return (
    <Provider
      value={{
        num1,
        setNum1,
        num2,
        setNum2
      }}
    >
      <Num1 />
      <Num2 />
    </Provider>
  );
}

Select state in fuction component:

import React, { memo } from "react";
import { useSelector } from "0i0";

function Num2() {
  console.log("i am rendering");
  const num2 = useSelector((state) => state.num2);
  const setNum2 = useSelector((state) => state.setNum2);
  return (
    <div>
      {num2}
      <button onClick={() => setNum2((num) => num + 1)}>num2 add one</button>
    </div>
  );
}

export default memo(Num2);

select state in class component:

import React, { memo } from "react";
import { connect } from "0i0";

class Num1 extends React.Component {
  render() {
    console.log("i am rendering");
    const { num1, setNum1 } = this.props;
    return (
      <div>
        {num1}
        <button onClick={() => setNum1((num) => num + 1)}>
          {" "}
          num1 add one{" "}
        </button>
      </div>
    );
  }
}

export default memo(connect(({ num1, setNum1 }) => ({ num1, setNum1 }))(Num1));

todo

  • [ ] test case
  • [ ] CICD
  • [x] Fix Cannot update a component problem

0i0

use redux like api, but achieve context like api nested in component

demo

https://codesandbox.io/s/0i0-yq1n3

how to use

install

yarn add 0i0

it need a root just like Context

import React, { useState } from "react";
import Num1 from "./num1";
import Num2 from "./num2";
import { Provider } from "0i0";

export default function App() {
  const [num1, setNum1] = useState(0);
  const [num2, setNum2] = useState(0);
  return (
    <Provider
      value={{
        num1,
        setNum1,
        num2,
        setNum2
      }}
    >
      <Num1 />
      <Num2 />
    </Provider>
  );
}

Select state in fuction component:

import React, { memo } from "react";
import { useSelector } from "0i0";

function Num2() {
  console.log("i am rendering");
  const num2 = useSelector((state) => state.num2);
  const setNum2 = useSelector((state) => state.setNum2);
  return (
    <div>
      {num2}
      <button onClick={() => setNum2((num) => num + 1)}>num2 add one</button>
    </div>
  );
}

export default memo(Num2);

select state in class component:

import React, { memo } from "react";
import { connect } from "0i0";

class Num1 extends React.Component {
  render() {
    console.log("i am rendering");
    const { num1, setNum1 } = this.props;
    return (
      <div>
        {num1}
        <button onClick={() => setNum1((num) => num + 1)}>
          {" "}
          num1 add one{" "}
        </button>
      </div>
    );
  }
}

export default memo(connect(({ num1, setNum1 }) => ({ num1, setNum1 }))(Num1));

todo

  • [ ] test case
  • [ ] CICD
  • [x] Fix Cannot update a component problem
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文