qianmiopen / plume2 Goto Github PK
View Code? Open in Web Editor NEW🚀a lightweight React state container for web and app
Home Page: https://qianmiopen.github.io/plume2
License: MIT License
🚀a lightweight React state container for web and app
Home Page: https://qianmiopen.github.io/plume2
License: MIT License
暴露出来DynamicQueryLang,方便在render中计算DQL的值
目前的DQL的的上下文绑定比较弱,只能绑定defaultProps的同名属性,这样不够用,思考是不是可以放开让用户自己定义上下文
todo: fromJS([
{id:1, text: 'hello', done: false},
{id: 2, text: 'world', done: true}
])
const todoItemDQL = QL('todoItemDQL', [
['todo', '$index', 'text],
(text) => text
])
@Relax
class Title extends Component {
static relaxProps = {
bigQuery: noop,
}
render() {
const {bigQuery} = this.props.relaxProps
const ctx = todoItemDQL.withContext({index: 1}).
const title = bigQuery(new QueryLang(ctx.id(), ctx.lang()))
}
}
static relaxProps = [
"stateName1", //auto injected
"stateName2", //auto injected
{
"stateName3Alias": "stateName3" //auto injected as name 'stateName3Alias'
}
]
preact不支持batchedupdates会自动跳过去
react支持,需要测试下
store.ts 165
let preActorState = this._actorsState[i]
const newActorState = actor.receive(msg, preActorState, params)
if (preActorState != newActorState) {
this._actorsState[i] = newActorState
_state = _state.merge(newActorState)
}
这儿的preActorState 会被污染
RN 0.57 的版本改如何兼容呢?
建议
this.refs[relax].proxy <- 为实例名称
新版的creat-react-app脚手架生成的项目,结合plume2;一直还是提示:
Uncaught TypeError: Class constructor HelloApp cannot be invoked without 'new';
请问下babel-loader这边还要做什么处理么?
如果数据太大 就影响显示效果
> store dispatch => 'home-main:setListData'
> store.js:69 params |> [{"id":"581b0c4ebb9452c9052e7acb","author_id":"5110f2bedf9e9fcc584e4677","tab":"share","content":"<div class=\"markdown-text\"><p>GitHub: <a href=\"https://github.com/nswbmw/N-blog\">https://github.com/nswbmw/N-blog</a></p>\n<h2>目录</h2>\n<ul>\n<li>开发环境搭建\n<ul>\n<li><a href=\"https://github.com/nswbmw/N-blog/blob/master/book/1.1%20Node.js%20%E7%9A%84%E5%AE%89%E8%A3%85%E4%B8%8E%E4%BD%BF%E7%94%A8.md\">Node.js 的安装与使用</a>\n<ul>\n<li><a href=\"https://github.com/nswbmw/N-blog/blob/master/book/1.1%20Node.js%20%E7%9A%84%E5%AE%89%E8%A3%85%E4%B8%8E%E4%BD%BF%E7%94%A8.md#111-%E5%AE%89%E8%A3%85-nodejs\">安装 Node.js</a></li>\n<li><a href=\"https://github.com/nswbmw/N-blog/blob/master/book/1.1%20Node.js%20%E7%9A%84%E5%AE%89%E8%A3%85%E4%B8%8E%E4%BD%BF%E7%94%A8.md#112-n-%E5%92%8C-nvm\">n 和 nvm</a></li>\n<li><a href=\"https://github.com/nswbmw/N-blog/blob/master/book/1.1%20Node.js%20%E7%9A%84%E5%AE%89%E8%A3%85%E4%B8%8E%E4%BD%BF%E7%94%A8.md#113-nrm\">nrm</a></li>\n</ul>\n</li>\n<li><a href=\"https://github
代码中已经添加了日志的跟踪,目前还没有放出来。
怎么在日志的多和需要之间平衡。
如果同类的Relax太多,说明可能在某个列表中使用了Relax Container component,给出warning
node_modules/plume2/es5/typings/create-global-state.d.ts
(5,19): error TS2307: Cannot find module '../../../../../../../Users/hufeng/OSS/plume2/node_modules/immutable'.
Looks like 'ReactNativeInternals' (which exported unstable_batchedUpdates) was removed from being exposed as per:
f3dbddc#diff-834d77988fd4294e13e3e35533b3e248L161
As an interim fix, we are importing 'ReactNativeInternals' directly:
- import ReactNative from 'react-native';
+ import ReactNative from 'react-native/Libraries/Renderer/src/renderers/native/ReactNative'
Would the Internals be exposed in a future version of RN or will we have to use this as a solution?
我们开始站在更高的起点去看问题,初心不变,方式更加优雅一点。
目标:
就是去平衡开发体验和用户体验之间的矛盾
开发体验:
用户体验:
更小的js体积
无缝web和react-native的开发体验
console.groupCollapsed is not a function
relax.js 34:50
建议代码里面的使用console.log 的地方加入判断 如果不存在console的时候 不开启debug日志。
这个报错在很多人第一次启动项目时都会报错,不熟悉的人就懵逼了
如:
class AppStore extends Store {
change = () => {
this.batchDispatch([
['loading:end', {loading: false}],
['change', {count: 1}]
])
}
}
如果relax获取不到context['_plume$Store'], 在debug开启的状态下,提示用户要在顶层容器组件,添加
@StoreProvider的绑定。
大师你好~
我是陈龙 哈哈 忍不住来向你请教
目前plume2
主要是基于context api
,context api
最大的方便之处是可以不用props
透传,来解决数据变化后组件更新的问题。
react 15.x
版本时官方不建议使用,到16版本后context
语法变化也挺大(所以对于我而言context
是个不稳定的存在)
大师有没有考虑过不使用context
而用其他方式,比如Object.defineProperties
或Proxy
目前Relax的容器组件给子组件的注入方式是通过约定实现,
这些注入的方式通过约定在开发阶段非常灵活,但是给后期的代码维护带来了二义性,我们需要深入了解
代码才能知道具体的注入方式,例如
@Relax
class ProductItem extends React.Component {
static defaultProps = {
index: 0, //props
name: '', //store' state
onAddCart: noop //store's method
};
}
但是后期再维护的时候,很难一眼看出index,name的注入方式,
另外这样的灵活也是有代价,比如,props透传了name,恰好store里面也是有name,惨了
props就被默认覆盖了,代码结果的不可预测性。
另外,由于store里聚合actor的state是immutable数据结构,如果想获取更深层次的数据,通过该方式无法实现了。
so针对以上这些情况,还是需要去固化我们的注入方式,一目了然,清晰简单
比如,只默认是props注入,
我们设计一个inject的模块,
如果是从store的state注入化,我们可以这样,
cursor(string | string[], any) //第一个参数是cursor的path路径,第二个参数是默认值
name: inject.cursor('name', '')
而且这样还解决了深层嵌套的数据获取问题,比如store的state数据是
fromJS({
product: {
id: 1,
goods: {
id: 1,
name: 'plume2'
}
}
})
如果想去注入id进来,就是简单的
id: inject.cursor(['product', 'goods', 'id'], 0) //ok
相注入store的method,
onAddCart: inject.method('addCart') //自带默认值为noop
因此基于这个规范 我们就可以很清晰的知道数据的来源,
static defaultProps = {
index: 0, //默认从props
onDelete: noop, //默认从props
product: inject.cursor('product', fromJS({})) //store's state
skuId: inject.cursor(['product', 'goods', 'id'], 0) //store's state
onCartAdd: inject.method('cartAdd'),
}
应该也是console 引起的bug
:( some exception occur in transaction ,store state roll back
新建QL的语法调整一下,建议把
const helloQL = QL('helloQL', [
'name',
['address', 'city'],
(name, city) => `${name}${city}`
])
改成
const helloQL = QL('helloQL', [
'name',
['address', 'city']
], (name, city) => `${name}${city}`)
会清晰一点
我们取OO得形,得FP的意。
有意这么写的吗?
store中的方法使用transaction的时候,例如:
init() {
this.transaction(() => {
this.dispatch('A')
this.dispatch('B')
})
// 这里我希望当transaction中出错的时候,不再执行下面fetchPrice,以及dispatch("C")方法
const {res, err} = await fetchPrice();
this.dispatch('C')
}
如果transaction能有返回值就更好了 @hufeng
大师写app的时候发现个小问题, React.PropTypes is no longer supported and will be removed completely in React 16
store-provider.tsx
static childContextTypes = {
_plume$Store: React.PropTypes.object };
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.