快速上手#

// codeconst foo = {
  state: {
    name: 'concent',
    firstName: '',
    lastName: '',
    age: 0,
    hobbies: [],
  },
};

import React, { Component } from 'react';
import { register } from 'concent';

@register('foo')
class HelloConcent extends Component {
  state = { name: 'this value will been overwrite by foo module state' };  render() {
    const { name, age, hobbies } = this.state;
    return (
      <div>
        name: {name}
        age: {age}
        hobbies:{' '}
        {hobbies.map((v, idx) => (
          <span key={idx}>{v}</span>
        ))}
      </div>
    );
  }
}

@register('foo')
class HelloConcent extends Component {
  changeName = (e) => {
    this.setState({ name: e.currentTarget.value });  };
  render() {
    const { name, age, hobbies } = this.state;
    return (
      <div>
        name: <input value={name} onChange={this.changeName} />
        age: {age}
        hobbies:{' '}
        {hobbies.map((v, idx) => (
          <span key={idx}>{v}</span>
        ))}
      </div>
    );
  }
}

@register({ module: 'foo', watchedKeys: ['age'] })class FooComp extends Component {
  render() {
    const { name, age, hobbies } = this.state;
  }
}

import { getState } from 'concent';

@register({ module: 'foo', watchedKeys: ['age'] })
class FooComp extends Component {
  submit() {
    //这个值才是最新的
    const { name, hobbies } = getState('foo');  }
}

// code in models/foo/computed.js

//当age发生变化时，对age做计算,
export function age(newVal, oldVal) {
  return newVal * 2;
}
//因为依赖key只有一个且和计算结果key同名，就可以像上面这样写
//等同于写为 export const age = {fn:..., depKeys:['age']}

//对firstName, lastName任意一个值发生变化时，计算新的fullName
export const fullName = {
  fn(newState, oldState, fnCtx) {
    // fnCtx.setted查看提交的状态key列表
    // fnCtx.changed查看提交的状态key列表里发生了变化的key列表
    // fnCtx.retKey查看当前函数的计算结果对应key，当前示例为 fullName
    return `${newState.firstName}_${newState.lastName}`;
  },
  depKeys: ['firstName', 'lastName'], //这里定义触发fullName计算的依赖key列表};

@register('foo')
class HelloComp extends Component {
  render() {
    const { age, fullName } = this.ctx.moduleComputed;  }
}

// code in models/foo/computed.js

//hobbies是一个数组
export function hobbies(hobbies, oldVal) {
  return hobbies.length * 2;
}

// code in models/foo/reducer.js
export function addHobby(hobby, moduleState) {
  const { hobbies } = moduleState;
  hobbies.push(hobby);
  // return { hobbies };不会触发hobbies的计算函数
  return { hobbies: [...hobbies] }; //正确的写法}

export const hobbies = {
  fn: (hobbies) => hobbies.length * 2,
  compare: false, //不做比较，只要片段状态里对设了`hobbies`的值，就触发计算};

@register('foo')
class HelloComp extends Component {
  $$setup(ctx) {    //$$setup会将ctx传递到参数列表里，和this.ctx是同一个对象

    //第二为参数是依赖key名称列表，填写空表示只在首次渲染结束后触发一次，模拟componentDidMount
    ctx.effect((ctx) => {
      // api.fetchData()
    }, []);

    //不传递第二位参数的话，每一次组件渲染结束后都会触发其执行
    ctx.effect((ctx) => {
      // trigger after every render
    });

    //第二为参数依赖key名称列表指定了name，
    ctx.effect(
      (ctx) => {
        // 首次渲染结束时，触发此副作用函数执行
        // 之后只要name变化，就会在组件渲染结束后触发此副作用函数执行
      },
      ['name']
    );

    //第三位参数immediate默认是true，设置为false
    ctx.effect(
      (ctx) => {
        // 首次渲染结束时，不触发此副作用函数执行
        // 之后只要name变化，就会在组件渲染结束后触发此副作用函数执行
      },
      ['age'],
      false
    );

    //第二为参数依赖key名称列表设定了多个值
    ctx.effect(
      (ctx) => {
        // 首次渲染结束时，不触发此副作用函数执行
        // 之后只要name或者age任意一个发生变化时，会在组件渲染结束后触发此副作用函数执行
      },
      ['age', 'name'],
      false
    );

    const changeName = (e) => ctx.dispatch('changeName', e.currentTarget.value);

    return { changeName };
  }
  render() {
    //可用于绑定在ui上
    const { changeName } = this.ctx.settings;
    return <input value={this.state.name} onChange={changeName} />;
  }
}

@register('foo')
class HelloComp extends Component {
  $$setup(ctx) {
    ctx.computed('name', (newName) => {
      return newName
        .split('')
        .reverse()
        .join();
    });

    ctx.computed('fullName', {
      fn: (newState) => {
        return `${newState.firstName}_${newState.lastName}`;
      },
      depKeys: ['firstName', 'lastName'],
    });
  }  render() {
    // 从refComputed里获得计算结果
    const { name: reversedName } = this.ctx.refComputed;
  }
}