React快速入门学习记录

@connect：

namespace： model 的命名空间，同时也是他在全局 state 上的属性，只能用字符串，不支持通过 . 的方式创建多层命名空间。

state（初始值）：优先级低于传给 dva() 的 opts.initialState（index.js文件中定义）。

subscriptions（订阅数据源的）：subscriptions 是订阅，用于订阅一个数据源，然后根据需要 dispatch 相应的 action。数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。格式为 ({ dispatch, history }) => unsubscribe 。

effects（处理异步逻辑的）：以 key/value 格式定义 effect。用于处理异步操作和业务逻辑，不直接修改 state。由 action 触发，可以触发 action，可以和服务器交互，可以获取全局 state 的数据等等。

格式为： (action, effects) => void 或 [(action, effects) => void, { type }]。

reducers（同步更新state的）：reducers 用于处理同步操作，唯一可以修改 state 的地方。由 action 触发。格式为 (state, action) => newState 或 [(state, action) => newState, enhancer]。

dispatch：通过dispatch提交。参数包括type，payload（payload指传递的数据，可省略）

select（用于从 state 里获取数据）：

state:{user:"ssss"},

const users = yield select(state => state.user);

我们也可以析构传入的函数参数。

const add = (state, { payload }) => { return state.concat(payload); };

析构时还可以配 alias，让代码更具有语义。

const add = (state, { payload: todo }) => { return state.concat(todo); };

这是析构的反向操作，用于重新组织一个 Object 。

const name = 'duoduo'; const age = 8; const user = { name, age }; // { name: 'duoduo', age: 8 }

定义对象方法时，还可以省去 function 关键字。

app.model({ reducers: { add() {} // 等同于 add: function() {} }, effects: { *addRemote() {} // 等同于 addRemote: function*() {} }, });

Spread Operator

Spread Operator 即 3 个点 ...，有几种不同的使用方法。

可用于组装数组。

const todos = ['Learn dva']; [...todos, 'Learn antd']; // ['Learn dva', 'Learn antd']

也可用于获取数组的部分项。

const arr = ['a', 'b', 'c']; const [first, ...rest] = arr; rest; // ['b', 'c'] // With ignore const [first, , ...rest] = arr; rest; // ['c']

还可收集函数参数为数组。

function directions(first, ...rest) { console.log(rest); } directions('a', 'b', 'c'); // ['b', 'c'];

代替 apply。

function foo(x, y, z) {} const args = [1,2,3]; // 下面两句效果相同 foo.apply(null, args); foo(...args);

对于 Object 而言，用于组合成新的 Object 。(ES2017 stage-2 proposal)

const foo = { a: 1, b: 2, }; const bar = { b: 3, c: 2, }; const d = 4; const ret = { ...foo, ...bar, d }; // { a:1, b:3, c:2, d:4 }

此外，在 JSX 中 Spread Operator 还可用于扩展 props，详见 Spread Attributes。