lucifier129 / react-lite Goto Github PK
View Code? Open in Web Editor NEWAn implementation of React v15.x that optimizes for small script size
License: MIT License
An implementation of React v15.x that optimizes for small script size
License: MIT License
React changes their versioning scheme and now they are at 15.0. It would be nice if we can keep in sync with their version numbers.
I notice you are using the old React v.0.13 for ref. Plans to update to support React v. 15?
<Editor ref="edit" id="editor" className="edit"
style={{
fontFamily: fields.fontFamily.value,
fontSize: fields.fontSize.value,
fontWeight: fields.fontBold.value ? 'bold' : 'normal',
color: fields.fontColor.value,
}}
onKeyDown={(e)=>this.onKeyDown(e)}
onInput={(e)=>this.onInput(e)}
dangerouslySetInnerHTML={{__html: currConver.editor}} />
It seems the innerHTML clears when one of the css style updates.
When I switch back to react, it works.
Is it a bug of react-lite?
When using react-icons, it appears svg elements lose attribute styles. This is is a screenshot in a working dev environment
and a screenshot of a production build using react-lite where the svg does not show
One thing I noticed is the attributes lose their camel case in the dom. I tested a production build using react and svg elements display normally. Any help to get svgs showing would be appreciated!
Hi!
I'm using react-lite along side of react-typeahead.
It digs into React.__spread
, which is just an Object.assign polyfill. Is it possible / valuable enough to add that method to react-lite?
The context will be assigned to an empty object when calling forceUpdate.
I have found some wried codes which may be the bug's source, on the 750th line of react-lite.common.js:
var nextContext = $cache.context || {};
After simply changing it to the below, the bug seems to be fixed:
var nextContext = $cache.context || context;
Maybe I should give a PR? to master? or other branchs?
I just tried building a browser bundle with react-lite and immediately got a bundle 100k smaller than before 🎉 .
One thing that breaks is code that invokes event.persist()
(see https://facebook.github.io/react/docs/events.html#event-pooling): Uncaught TypeError: e.persist is not a function
.
Is this expected and if yes, should it be added to "versus"-section in the README?
I have a question about react-lite's event system. Why does function returned from getEventHandler prevent from propagating native event?
var getEventHandler = function getEventHandler(handleEvent) {
handleEvent = eventHandlerWrapper(handleEvent);
return function (e) {
e.stopPropagation(); // This makes some side effect.
e.nativeEvent = e;
return handleEvent.call(this, e);
};
};
I had attached native click event listener on document.body, but because of it, my event listener was never called. React doesn't do like that.
React 15 removed use of innerHTML and now uses createElement. See latest release notes.
You are still using innerHTML - wich is slow - a lot.
Are you going to fix this?
React have either deprecated or removed a lot of fetures in the upcomming React 15, that you still are using in your code. Plans to remove them?
In the Readme. PR forthcoming.
工兄弟, 我已经尽量简化了重现问题步骤, 如附件:
注释掉:
resolve: {
alias: {
'react': 'react-lite',
'react-dom': 'react-lite'
}
}
成功
没有注释掉就失败
请点解, 等待您的回复
gyj.zip
It breaks when an Object
appears
// src/virtual-dom.js
initTree: function initTree(parentNode) {
var type = this.type;
var props = this.props;
var node = this.node = createElement$1(type, props);
this.eachChildren(function (vchild) {
console.log(vchild) // added
vchild.initTree(node);
});
appendNode(parentNode, node);
this.attachRef();
},
Had to look up webpack documentation for this, But I think resolve
key should be stated in example.
// webpack.config.js
{
resolve: {
alias: {
'react': 'react-lite',
'react-dom': 'react-lite'
}
}
}
I just figured out that this is not a virtual DOM. You are touching DOM too much, both on creation and update! That's why you get your horrible performance!
One example is found in the velem prototype where you do an update. For children you are calling childNodes on a real DOM node!! An this happen on each update.
You take this childnodes and iterate over it - more expensive - BEFORE you update the node with it.
How many times you think you are touching the real DOM? Too many.
You should use the vdom object for this.
A lot of different places in your code you are doing this - touching DOM where you shouldn't.
I just compared with React. They are not doing it the same way as you are doing it!
To get the childNodes length in a virtual DOM, just count how many children there is on the vdom object without touching the DOM.
Cannot resolve module 'react-lite/lib/ReactMount'
render() {
return (
<img className="avatar-one" ref="img"
onLoad={()=>{
console.log('onload this.refs', this.refs)
}}
onError={()=>{
console.log('onerror this.refs', this.refs)
}} />
)
}
Hey @Lucifier129
In react-lite, I found that this.refs
sometimes equals to null, called in onLoad/onError
of <img>
tag.
The probability is very small, but I can always reproduce it by very frequent rendering.
It causes a bug in my app.
And when I try the regular React, it's fine.
ReactDOM.render(<MyComponent />, container)
get error:
Uncaught TypeError: Cannot set property 'parentContext' of undefined
function initVcomponent(vcomponent, parentContext, namespaceURI) {
var Component = vcomponent.type;
var props = vcomponent.props;
var uid = vcomponent.uid;
var componentContext = getContextByTypes(parentContext, Component.contextTypes);
var component = new Component(props, componentContext);
var updater = component.$updater;
var cache = component.$cache;
// cache is undefined!
cache.parentContext = parentContext;
const Example = props =>
<div onClick={event => console.log('outer')}>
<span onClick={event => {event.stopPropagation(); console.log('inner');}} />
</div>;
This logs first inner
and then outer
, same result with event.stopImmediatePropagation()
.
I assume this is because of the event delegation, as there is only on event handler at document
per app and event, so the native stopImmediatePropagation
won't work, because there are no other event listeners to cancel.
How can I prevent events from propagating with react-lite?
npm install 遇到点问题
> [email protected] preinstall /Users/xxx/Documents/source/js/react-lite/node_modules/zlib
> node-waf clean || true; node-waf configure build
sh: node-waf: command not found
sh: node-waf: command not found
node version : v0.12.0
Hey, great project!
I'm just about to start reading through the source to figure out exactly what the tradeoffs are (beyond losing out on server-side rendering). This definitely looks like it could be a sane alternative to the core library, especially for smaller projects, but it would be nice to know up front just what the differences are so people don't run into a wall down the road.
That is unless the only difference is the loss of renderToString
/renderToStaticMarkup
, which I find doubtful, but it'd be nice to know for sure straight from the documentation.
Thanks!
amazing work btw!
The error is:
Unable to set property 'parentContext' of undefined or null.
Which breaks the execution.
I'm not entirely sure what's causing this, but I changed my code from createClass to extend component, removed mixin and created a higher-order component instead.
https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750
<div className="op-btn" onClick={()=>{
alert(1)
window.addEventListener('click', () => {
alert(2)
})
// this.refs.filePanel.toggle()
}}>发送文件</div>
Hello, here is one more difference I found between react and react-lite.
In react, both 1
and 2
are alerted, while in react-lite, only 1
is alerted.
In my case, I have to wrap the second binding with a setTimeout
to make it work in react.
Yes, in this case, the result of react-lite is expected.
But there is such an inconsistency to be noticed ;)
Comparing react-lite to React, I can't see any use of keys when I did a quick search through your source code. React uses keys to sort and re-order keyed-nodes.
I notice however that you have a silly implementation of something that suppose to be reordering, but far far from what React has and use.
If this is a small "copy" of React, why not follow what React does and implement a correct reordering?
I can't see that you have any children reconciliation as drafted out in this specs:
https://facebook.github.io/react/docs/reconciliation.html
Any plans to implement this? It should be basic if this was a React copy.
why use react-lite, avoid script|head|link tag in client side. Dose it cause performance problems ?
I noticed that many important features for dealing with children is not adopted into React lite. E.g. insertAt(), a function React uses for children.
Plan to implement it?
React now also uses optimizations for Edge, when they deal with children. Added in React 15. This is not included either.
And you are not removing text nodes on diff. If nodeA have text and nodeB doesn't. nodeB will get undefined as text. In react this node are removed and reordered.
So any plans for a proper children diff algorithm ?
the example with react router huge apps is not working when you click the link to a course http://react-lite-with-react-router.coding.io/huge-apps/course/1 http://react-lite-with-react-router.coding.io/huge-apps/
So, I really like this project and use it in production on several projects. One problem I run into over and over again has to do with peer deps. I'll pull an npm package into my project, eg this React lightbox component, and it ends up forcing regular React to be bundled instead of react-lite due to peer deps.
Yes I could go in and change the peer deps on each package, but that defeats the purpose of a package manager. I'm using browserify by the way, but would gladly switch to webpack if it makes this easier. Is anyone aware of a good way to force peer deps?
Using react-bootstrap, attributes are being added to the rendered components that are not present with React. For example, here is the rendered result of a react-bootstrap Button with default props:
<a bsstyle="default" bsclass="btn" active="false" block="false" disabled="false" navitem="false" navdropdown="false" href="/accounts/users/add" class="btn btn-default" role="button">Add New User</a>
All the false
attributes actually shouldn't be there.
I am not sure if it's my setup. However I got an issue at this line in react-bootstrap:
var version = _react2['default'].version.split('.').map(parseFloat);
Seems the react object isn't populated with the version.
(Error was,
Uncaught TypeError: Cannot read property 'split' of undefined
)
Hi!
version: 0.15.13
I'm having trouble using react-lite
alongside animation libraries.
when the component tries to transition, I get:
Uncaught Invariant Violation: findDOMNode was called on an unmounted component.
I've had the same error with both rc-animate and velocity-react.
Both work fine w/ the same code on regular react. Any ideas?
Thanks!
It seems that whatever I try to do with your code, I ran into errors, bugs or strange behaviour.
Obviously this code is at a very early stage and not ready for production.
This is just a few errors I get all the time. And this is related till how you are dealing with the children, the fact you are not removing any children etc.
In your velem and the destroy function. Seems sometimes it can't find the children it should unmount. Sometimes 1 or more of the children are undefined or null.
And a lot more.
I suggest try to copy some of the stuff from Virtual DOM as I have seen you tried in the beginning, but changed from that path. They are also following React and doesnt have this errors.
React-lite is a good attempt, but not ready yet. For now I got enough because of this and performance so I move away to better solutions.
Maybe one day in the future I will check back on this repo
Hi! I ran the vdom benchmark, and I have to state that the performance is horrible. Any plans to fix this shortly? Else, a very great concept. But there are so many vdom libraries out there that have better performance.
Neat project!
Is the filesize in the readme after compression + gzip? could you clarify that and potentially compare directly with vanilla React?
Thanks!
I noticed that you are missing an important feature - to remove events from the DOM.A listener should be cleaned up when you destroy a node, and also on the nodes children.
You find it in React if you look at the EventListener object..
remove: function () {
target.removeEventListener(eventType, callback, false);
}
instead using react.render can we use ReactDOM default renderer... for initial render instead use it inside react tree.. or use it as aliases ?
eg: eact-worker-dom and use react lite to work too...
import React from 'react';
import reactDOM from 'react-worker-dom'; // Instead of using react-dom
reactDOM.render(new Worker('worker.js'), document.getElementById('container'));
many clojurescript React wrapper also use ReactDOM..
It doesn't work with react-portal. Just pointing out, close it if there's no work around or it isn't suppose to work.
Error:
ERROR in ./~/react-portal/portal.js
[0] Module not found: Error: Cannot resolve module 'react-lite/lib/CSSPropertyOperations' in /Users/project/node_modules/react-portal
我使用了react-router用做路由,redux 用作数据流, react-redux 的Provider在Route中。
当使用react-lite时,调用setState时只有当前组件触发重渲染,子组件未重渲染。
如果使用 react 时,则当前组件和子组件都会重渲染
🍺
React have a feture to keep track on DOM nodes, and keep them in focus during update. You don't have this.
document.activeElement;
Any plans to copy React on this one?
Hi. I notice you are storing id and relevant component data on the DOM node itself. Any reason for this? It's a major slow down. Better is to create a virtual instance and transfer the instance on update.
Comparing to React, that is how they do it, plus they use the owner that you are missing.
Did you copy most of the implementation details from React or created your own virtual-dom
implementation?
Great work by the way!
I open a new ticket for this one. As mentioned replaceChild can be read-only.
I was looking into your code, and figured out how to fix this. My solution is then also related to
performance issues.
The solution:
In each prototype - stateless, component etc, you add this in the top:
this.element = null
In the init section where you create , change to
* node = this.element = ....*
And then when you do a diff / update, you do this:
* newElement.element = this.element*
Got it?
So then when it comes to destroy, you do this
this.element.parentNode.replaceChild(this.element, newElement.element)
In this solution you will not to do a typeof to check if its a function anymore. Will give you some better performance :)
Great work with react-lite!
代码:
<Header {...this.state} />
错误:
[email protected]:146 Uncaught TypeError: React.__spread is not a function
Does react-lite
have a dev and production mode like React?
With Webpack I use this:
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production")
}
})
Does this also work with react-lite
?
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.