@aha-app/react-easy-state

• 导 言:波:
• 安装: cd:
• 每天使用:太阳镜:
  • 创建全球商店
  • 创建被动视图
  • 创建本地仓库
• 高级使用: nerd face :
  • 添加副作用
• API 摘要:书:
  • 存储( obj)
  • 视图( CAP)
  • 批次(fn)
  • 自动效果( fn)
  • 明显效果( fn)
• 有活演示的例子 : tv:
• 文章:发音:
• 性能:火箭:
• 平台支持: 计算机:
• 替代结构:扳手:
• 贡献者: sparkles :

简单状态支持 创建反应应用 没有额外的配置。 只需运行以下命令即可启动.

npx create-react-app my-app
cd my-app
npm install @risingstack/react-easy-state
npm start

您需要npm 5.2+来使用npx.

import { store } from '@risingstack/react-easy-state';

// stores can include any valid JS structure
// including nested data, arrays, Maps, Sets, getters, setters, inheritance, ...
const user = store({
  profile: {
    firstName: 'Bob',
    lastName: 'Smith',
    get name() {
      return `${user.profile.firstName} ${user.profile.lastName}`;
    },
  },
  hobbies: ['programming', 'sports'],
  friends: new Map(),
});

// stores may be mutated in any syntactically valid way
user.profile.firstName = 'Bob';
delete user.profile.lastName;
user.hobbies.push('reading');
user.friends.set('id', otherUser);

import { store } from '@risingstack/react-easy-state';

const userStore = store({
  user: {},
  async fetchUser() {
    userStore.user = await fetch('/user');
  },
});

export default userStore;

用户Store.js

import { store } from '@risingstack/react-easy-state';

const userStore = store({
  user: {},
  async fetchUser() {
    userStore.user = await fetch('/user');
  },
});

export default userStore;

食谱Store.js

import { store } from '@risingstack/react-easy-state';
import userStore from './userStore';

const recipesStore = store({
  recipes: [],
  async fetchRecipes() {
    recipesStore.recipes = await fetch(
      `/recipes?user=${userStore.user.id}`,
    );
  },
});

export default recipesStore;

// DON'T DO THIS
const person = { name: 'Bob' };
person.name = 'Ann';

export default store(person);

// DO THIS INSTEAD
const person = store({ name: 'Bob' });
person.name = 'Ann';

export default person;

第一个例子不会引发重犯 person.name = 'Ann' 变异,因为它针对的是生物体. 变换生- 无 store- 包装的物体 - 不会安排好的.

import { store, view } from '@risingstack/react-easy-state';

const counter = store({
  num: 0,
  increment() {
    // DON'T DO THIS
    this.num++;
    // DO THIS INSTEAD
    counter.num++;
  },
});

export default view(() => (
  <div onClick={counter.increment}>{counter.num}</div>
));

this.num++ 没用的,因为 increment 被传递作为回电 失去它 this。您应当使用直接对象引用 - counter - 而不是说 this。 。 。 .

在其渲染过程中使用商店或商店部分部件的每个部件都必须被包裹 view。有时储存的使用并不明确,容易错过.

import { view, store } from '@risingstack/react-easy-state';

const appStore = store({
  user: { name: 'Ann' },
});

const App = view(() => (
  <div>
    <h1>My App</h1>
    <Profile user={appStore.user} />
  </div>
));

// DO THIS
const Profile = view(({ user }) => <p>Name: {user.name}</p>);

// DON'T DO THIS
// This won't re-render on appStore.user.name = 'newName' like mutations
const Profile = ({ user }) => <p>Name: {user.name}</p>;

如果你是的话 百分百确认 您的组件没有使用任何您可以跳过的任何存储 view 包装.

import React from 'react';

// you don't have to wrap this component with `view`
export default (() => <p>This is just plain text</p>);

view 不过,即使在这种情况下,也建议进行包装.

• 它能让你免于未来的头痛 随着项目的发展 你开始使用这些组件中的商店.
• view 几乎相当于 memo 如果你不使用任何商店。 这几乎总是很好的有.

import React from 'react';
import { view, store } from '@risingstack/react-easy-state';

const user = store({ name: 'Bob' });
const timeline = store({ posts: ['react-easy-state'] });

// this is re-rendered whenever user.name or timeline.posts[0] changes
export default view(() => (
  <div>
    <div>Hello {user.name}!</div>
    <div>Your first post is: {timeline.posts[0]}</div>
  </div>
));

• 使用 PureComponent 或者说 memo 将不提供额外的业绩效益.

• 定义自定义 shouldComponentUpdate 当您在它内部应用一些特定的用法时,可能很少提供性能效益.

import React from 'react';
import { view, store } from '@risingstack/react-easy-state';

const user = store({ name: 'Bob', age: 30 });

function mutateUser() {
  user.name = 'Ann';
  user.age = 32;
}

// calling `mutateUser` will only trigger a single re-render of the below component
// even though it mutates the store two times in quick succession
export default view(() => (
  <div onClick={mutateUser}>
    name: {user.name}, age: {user.age}
  </div>
));

如果您将您的商店同步进行多次突变 异地任务来源, 多个调值可能很少发生。 如果遇到性能问题,您可以使用 batch 函数. batch(fn) 立即执行已传递的函数,并批次任何后续的重递,直到函数执行完成.

import React from 'react';
import { view, store, batch } from '@risingstack/react-easy-state';

const user = store({ name: 'Bob', age: 30 });

function mutateUser() {
  // this makes sure the state changes will cause maximum one re-render,
  // no matter where this function is getting invoked from
  batch(() => {
    user.name = 'Ann';
    user.age = 32;
  });
}

export default view(() => (
  <div>
    name: {user.name}, age: {user.age}
  </div>
));

注: 反应小组计划在未来改进成品分批处理。 这个 batch 函数和内置分批方式在未来可能会被贬值和去除,有利于React自己的分批方式.

import { view } from '@risingstack/react-easy-state';
import { withRouter } from 'react-router-dom';
import { withTheme } from 'styled-components';

const Comp = () => <div>A reactive component</div>;

// DO THIS
withRouter(view(Comp));
withTheme(view(Comp));

// DON'T DO THIS
view(withRouter(Comp));
view(withTheme(Comp));

• 如果路由没有适当更新,请将您 view(Comp) - 带着 Route内部 - 内 withRouter(view(Comp))。让反应路由器知道何时更新.

• HOCs的顺序,总是使用 withRouter(view(Comp))。 。 。 .

如果您使用 React 路由器 4.4+ ,则无需此操作 。 你可以找到更多细节 和一些关于这一点的推理 此反应路由文件页面。 。 。 .

如果您想让 React 开发者工具识别您的被动视图组件名称, 您必须通过任意一个 命名函数 或匿名函数 名称推论 页:1 view 包装.

import React from 'react';
import { view, store } from '@risingstack/react-easy-state';

const user = store({
  name: 'Rick',
});

const componentName = () => (
  <div>{user.name}</div>
);

export default view(componentName);

第三方帮助者,如数据网,可能由许多内部组件组成,这些组件不能由 view,但有时你希望 当通过的数据变异时,他们会重新回复。 传统回放组件在道具因参考而改变时会再发回回回放,因此变换所传回的回放数据在这种情况下不会起作用. 您可以在将可观测数据复制到组件之前,通过深层克隆解决这个问题。 这为每个商店变异的消耗成分创造了新的参考.

import React from 'react';
import { view, store } from '@risingstack/react-easy-state';
import Table from 'rc-table';
import cloneDeep from 'lodash/cloneDeep';

const dataStore = store({
  items: [
    {
      product: 'Car',
      value: 12,
    },
  ],
});

export default view(() => (
  <Table data={cloneDeep(dataStore.items)} />
));

import React from 'react';
import { view, store } from '@risingstack/react-easy-state';

export default view(() => {
  const [name, setName] = useState('Ann');
  const user = store({ age: 30 });
  return (
    <div>
      <input value={name} onChange={ev => setName(ev.target.value)} />
      <input
        value={user.age}
        onChange={ev => (user.age = ev.target.value)}
      />
    </div>
  );
});

import React, { Component } from 'react';
import { view, store } from '@risingstack/react-easy-state';

class Profile extends Component {
  state = { name: 'Ann' };
  user = store({ age: 30 });

  setName = ev => this.setState({ name: ev.target.value });
  setAge = ev => (this.user.age = ev.target.value);

  render() {
    return (
      <div>
        <input value={this.state.name} onChange={this.setName} />
        <input value={this.user.age} onChange={this.setAge} />
      </div>
    );
  }
}

export default view(Profile);

import React, { Component } from 'react';
import { view, store } from '@risingstack/react-easy-state';

class Profile extends Component {
  // DON'T DO THIS
  state = store({});
  // DO THIS
  user = store({});
  render() {}
}

包含的类组件 view 拥有额外的静态 deriveStoresFromProps 与香草类似的生命周期方法 getDerivedStateFromProps。 。 。 .

import React, { Component } from 'react';
import { view, store } from '@risingstack/react-easy-state';

class NameCard extends Component {
  userStore = store({ name: 'Bob' });

  static deriveStoresFromProps(props, userStore) {
    userStore.name = props.name || userStore.name;
  }

  render() {
    return <div>{this.userStore.name}</div>;
  }
}

export default view(NameCard);

您不应返回一个对象, 而是应当直接改变接收的商店 。 如果您在单个组件上有多个本地商店, 它们都会在第一个道具参数之后作为参数—— 按定义顺序—— 传递 .

import { store, autoEffect } from '@risingstack/react-easy-state';

// DON'T DO THIS
const store1 = store({ name: 'Store 1' })
const store2 = store({ name: 'Store 2' })
autoEffect(() => store2.name = store1.name)

// DO THIS INSTEAD
const store1 = store({ name: 'Store 1' })
const store2 = store({ get name () { return store1.name } })

由于React hooks的设计,你必须明确将所有无反应数据传递给钩状依赖阵列. 这使得当无反应数据发生变化时,效果也能运行.

import React from 'react'
import { store, view, autoEffect } from '@risingstack/react-easy-state';

export default view(({ greeting }) => {
  const app = store({ name: 'My App' })
  // pass `greeting` in the dependency array because it is not coming from a store
  autoEffect(() => document.title = `${greeting} ${app.name}`, [greeting])
})