在类式组件中，使用@model()

在函数式组件中，使用 useModel()

useModel(参数1，参数2)
参数1：
参数2：显式的声明额外的依赖
        数组：数组中是显式声明的依赖，格式为子成员的路径，如下
    function Demo(){
        const { info } = useModel({ 
        info: { name: 'test'} 
        }, ['info.name']);
        ...
        return <Info data={info}/>
        }
    函数：函数的参数是「变化的模型数据的路径」，可参函数中返回 boolean 值决定是否需要更新组件，如下
    function Demo(){
        const { info } = useModel({ 
        info: [{name: 'test1'}] 
        }, p=> p.endsWith('.name'));
        ...
        return <Info data={info}/>
}

 

属性映射？

组件属性和模型数据？如何映射？

@model和@mapping实现了父子组件传值？

 

自执行函数和监听模型变化

@autorun

@watch(参数一，参数二)

这两个用法都是用来装饰组件的成员方法

区别是：

• autorun 会自动收集依赖，而 watch 不会关心组件方法中有何依赖，需要手动指定依赖的模型数据
• watch 默认不会「自动执行」，需显式的指定「立即执行参数为 true」，才会自动执行首次。
• autorun 依赖的是「模型数据」本身，而 watch 依赖的是「计算函数」每次的「计算结果」

@watch有两个参数：第一个参数是一个函数，只有当函数返回的结果发生变化时，装饰的方法才会自动执行一次。第二个参数为true的时候，watch监听的方法可以自动执行一次

@autorun 会自动收集装饰方法中用到的依赖，只有当依赖发生变化的时候，才会自动执行这个方法

import { Component } from 'react';
import { model, autorun } from 'mota';
import DemoModel from './models/demo';

@model(DemoModel)
export default Demo extends Component {
    // 这个test函数中的依赖是model.name，当这个依赖发生变化的时候，会自动执行test方法
  //在挂载结束之后会自动执行一次
  @autorun
  test() {
    console.log(this.model.name);
  }

}

export default Demo extends Component {
    // 还有当第一个参数中函数返回的值发生变化的时候才会执行test函数，当第二个参数为true的时候会自动执行一次函数
  @watch(model=>model.name,true)
  test() {
    console.log('name 发生变化');
  }

}

遇到的问题：

在react项目中加入mota时，如果只通过mota文档安装，之后并不能直接通过@model的方式来使用mota，报错信息是不能使用装饰器，

Support for the experimental syntax 'decorators-legacy' isn't currently enabled

百度需要运行npm run eject命令，但运行这个命令后还是报错，百度说是没有安装好git，或者是安装了但需要提交到仓库

然后百度如何把代码推送到码云仓库

先在码云新建一个仓库
clone新建的码云仓库到本地
在本地创建一个react应用
使用git init命令初始化本地仓库
要将本地仓库和远程的码云仓库关联起来
然后把本地仓库推送到远程
注意 git push origin 本地分支名字:远程分支名字
git push origin master:origin/master

推送成功之后，运行npm run eject命令，可以运行成功

运行成功之后需要安装eslint赖声川eslintrc.json文件，

npm install eslint -g

eslint --init

在文件中需要配置"legacyDecorators": true 选项

 

之后就可以使用mota装饰器

 

 

 

不同的元素发生重叠会影响下面元素的作用

比如我的文字太长覆盖了前面的勾选框，导致我没办法勾选，还以为是程序逻辑出了什么问题，