Moon Light Box

Time is Money

Posts match “ react ” tag:

React - React Router

| Comments

Should I use hashHistory?

Hash history works without configuring your server, so if you're just getting started, go ahead and use it. In general, though, production web applications should use browserHistory for the cleaner URLs, and for support for server-side rendering, which is impossible with hashHistory.

Additionally, as mentioned above, some older browsers do not support the HTML5 History API. If it's important to you to not use full page reloads for navigation on those older browsers, then you will also need to use hashHistory.

react-router vs react-router-dom, when to use one or the other?

react-router contains all the common components between react-router-dom and react-router-native. When should you use one over the other? If you're on the web then react-router-dom should have everything you need as it also exports the common components you'll need. If you're using React Native, react-router-native should have everything you need for the same reason. So you'll probably never have to import anything directly from react-router.

https://github.com/kdchang/reactjs101/blob/master/Ch05/react-router-introduction.md

http://react-china.org/t/react-router-hashhistory-browserhistory/6799

https://github.com/react-translate-team/react-router-CN

http://www.ruanyifeng.com/blog/2016/05/react_router.html

http://stackoverflow.com/questions/42684809/react-router-vs-react-router-dom-when-to-use-one-or-the-other

React - Redux

| Comments

http://taobaofed.org/blog/2016/08/18/react-redux-connect/

http://mz026.logdown.com/posts/332288-hello-redux-1-1-react-redux-guide

在 Redux 的架構下,和 React 結合的方法就是,我們找到某些 "比較上層的 React Components", 在這些 components 裡面把 Redux 的 state 設成 component 的 state。然後在這些 state 改變的時候用我們熟悉的 component setState 來 trigger re-render。如此一來我們就把 Redux 的 state 和 React 結合在一起了。

有了這些 "比較上層的" components 之後,接著我們就可以把這些 components 進一步再切割成更小的 components,並且把 Redux 的 state 以 React 的 props 去建立這些 "更小的 components"。而這些"更小的 components" 其實和 Redux 就又沒有直接關係了,因為它們的行為完全由 props 來決定。對於這些 "更小的 components" 來說,它們並不在乎這些 prop 究竟是從 Redux 來的或者從其他地方來的。

上面提到的 "比較上層的 component" 其實在 Redux 裡的正式名字叫 Smart Component,而 "更小的 components" 叫作 Dumb Component。其中把 Redux state 和 Smart component 接起來的工作,則是由 React-Redux 裡提供的 connect function 來負責。

http://div.io/topic/1579

http://motephyr-blog.logdown.com/posts/308297-react-redux-processes

Performance:

https://medium.com/as790726/react-js-%E6%95%88%E8%83%BD%E5%AF%A6%E9%A9%97-%E7%95%B6-react-js-%E9%81%87%E5%88%B0-10000-%E5%80%8B-checkboxes-6d1584546456@

http://cepave.com/do-not-choose-react-just-for-performance/

React 會在記憶體中完整的複製一份 DOM Tree,然後透過標記 Dirty Nodes 來找到真正會重繪的 Nodes。如下圖,如果某個 DOM 被標記說要更新了,那麼它以下的所有 Subtree 都會依序被問 shouldComponentUpdate,如果沒有特別實作此函數,就會繼續地往它的 Subtree 問下去。關鍵就在於為了要能夠夠無腦,所以從觸發 setState 其自身節點開始到其全部子節點全部都會被呼叫到 shouldComponentUpdate,導致遍歷所有節點的時間成本非常的高(花很多時間在 React 的 Call Tree 上面)。所有的 DOM 操作都是同步的,而這會堵塞瀏覽器。只要有其中一個操作費時太久,整個網頁就會無法響應,瀏覽器重繪網頁的頻率是 60FPS 如果不能在 16ms 完成 DOM 操作,就會產生跳幀。視覺上感受到的卡頓就來源於此。(同理可推,24 FPS 不可讓 DOM 操作的 RTT 超過 41ms)

React - emojione.unicodeToImage() doesn't work with react.js browser rendering

| Comments

I installed emojione 3.1.2 via npm and it worked well on webpack development environment.

But when I build project with webpack in production environment, emojione got something wrong.

I google and find this url which occurred the same problem.
https://github.com/emojione/emojione/issues/541

Step1. Download Emojione CDN files in your project.

https://cdn.jsdelivr.net/npm/emojione@3.1.2/lib/js/emojione.min.js
https://cdn.jsdelivr.net/npm/emojione@3.1.2/extras/css/emojione.min.css

Step2. Modified below code in emojione.min.js

from
ns.regUnicode = new RegExp("<object[^>]*>.*?<\/object>|<span[^>]*>.*?<\/span>|<(?:object|embed|svg|img|div|span|p|a)[^>]*>|(?:\uD83C\uDFF3)\uFE0F?\u200D?(?:\uD83C\uDF08)|(?:\uD83D\uDC41)\uFE0F?\u200D?(?:\uD83D\uDDE8)\uFE0F?|[#-9]\uFE0F?\u20E3|(?:(?:\uD83C\uDFF4)(?:\uDB40[\uDC60-\uDCFF]){1,6})|(?:\uD83C[\uDDE0-\uDDFF]){2}|(?:(?:\uD83D[\uDC68\uDC69]))\uFE0F?(?:\uD83C[\uDFFA-\uDFFF])?\u200D?(?:[\u2695\u2696\u2708]|\uD83C[\uDF3E-\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92])|(?:\uD83D[\uDC68\uDC69]|\uD83E[\uDDD0-\uDDDF])(?:\uD83C[\uDFFA-\uDFFF])?\u200D?[\u2640\u2642\u2695\u2696\u2708]?\uFE0F?|(?:(?:\u2764|\uD83D[\uDC66-\uDC69\uDC8B])[\u200D\uFE0F]{0,2}){1,3}(?:\u2764|\uD83D[\uDC66-\uDC69\uDC8B])|(?:(?:\u2764|\uD83D[\uDC66-\uDC69\uDC8B])\uFE0F?){2,4}|(?:\uD83D[\uDC68\uDC69\uDC6E\uDC71-\uDC87\uDD75\uDE45-\uDE4E]|\uD83E[\uDD26\uDD37]|\uD83C[\uDFC3-\uDFCC]|\uD83E[\uDD38-\uDD3E]|\uD83D[\uDEA3-\uDEB6]|\u26f9|\uD83D\uDC6F)\uFE0F?(?:\uD83C[\uDFFB-\uDFFF])?\u200D?[\u2640\u2642]?\uFE0F?|(?:[\u261D\u26F9\u270A-\u270D]|\uD83C[\uDF85-\uDFCC]|\uD83D[\uDC42-\uDCAA\uDD74-\uDD96\uDE45-\uDE4F\uDEA3-\uDECC]|\uD83E[\uDD18-\uDD3E])\uFE0F?(?:\uD83C[\uDFFB-\uDFFF])|(?:[\u2194-\u2199\u21a9-\u21aa]\uFE0F?|[\u0023\u002a]|[\u3030\u303d]\uFE0F?|(?:\ud83c[\udd70-\udd71]|\ud83c\udd8e|\ud83c[\udd91-\udd9a])\uFE0F?|\u24c2\uFE0F?|[\u3297\u3299]\uFE0F?|(?:\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51])\uFE0F?|[\u203c\u2049]\uFE0F?|[\u25aa-\u25ab\u25b6\u25c0\u25fb-\u25fe]\uFE0F?|[\u00a9\u00ae]\uFE0F?|[\u2122\u2139]\uFE0F?|\ud83c\udc04\uFE0F?|[\u2b05-\u2b07\u2b1b-\u2b1c\u2b50\u2b55]\uFE0F?|[\u231a-\u231b\u2328\u23cf\u23e9-\u23f3\u23f8-\u23fa]\uFE0F?|\ud83c\udccf|[\u2934\u2935]\uFE0F?)|[\u2700-\u27bf]\uFE0F?|[\ud800-\udbff][\udc00-\udfff]\uFE0F?|[\u2600-\u26FF]\uFE0F?|[\u0030-\u0039]\uFE0F", "g");

to
ns.regUnicode = /<object[^>]*>.*?<\/object>|<span[^>]*>.*?<\/span>|<(?:object|embed|svg|img|div|span|p|a)[^>]*>|(?:\uD83C\uDFF3)\uFE0F?\u200D?(?:\uD83C\uDF08)|(?:\uD83D\uDC41)\uFE0F?\u200D?(?:\uD83D\uDDE8)\uFE0F?|[#-9]\uFE0F?\u20E3|(?:(?:\uD83C\uDFF4)(?:\uDB40[\uDC60-\uDCFF]){1,6})|(?:\uD83C[\uDDE0-\uDDFF]){2}|(?:(?:\uD83D[\uDC68\uDC69]))\uFE0F?(?:\uD83C[\uDFFA-\uDFFF])?\u200D?(?:[\u2695\u2696\u2708]|\uD83C[\uDF3E-\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92])|(?:\uD83D[\uDC68\uDC69]|\uD83E[\uDDD0-\uDDDF])(?:\uD83C[\uDFFA-\uDFFF])?\u200D?[\u2640\u2642\u2695\u2696\u2708]?\uFE0F?|(?:(?:\u2764|\uD83D[\uDC66-\uDC69\uDC8B])[\u200D\uFE0F]{0,2}){1,3}(?:\u2764|\uD83D[\uDC66-\uDC69\uDC8B])|(?:(?:\u2764|\uD83D[\uDC66-\uDC69\uDC8B])\uFE0F?){2,4}|(?:\uD83D[\uDC68\uDC69\uDC6E\uDC71-\uDC87\uDD75\uDE45-\uDE4E]|\uD83E[\uDD26\uDD37]|\uD83C[\uDFC3-\uDFCC]|\uD83E[\uDD38-\uDD3E]|\uD83D[\uDEA3-\uDEB6]|\u26f9|\uD83D\uDC6F)\uFE0F?(?:\uD83C[\uDFFB-\uDFFF])?\u200D?[\u2640\u2642]?\uFE0F?|(?:[\u261D\u26F9\u270A-\u270D]|\uD83C[\uDF85-\uDFCC]|\uD83D[\uDC42-\uDCAA\uDD74-\uDD96\uDE45-\uDE4F\uDEA3-\uDECC]|\uD83E[\uDD18-\uDD3E])\uFE0F?(?:\uD83C[\uDFFB-\uDFFF])|(?:[\u2194-\u2199\u21a9-\u21aa]\uFE0F?|[\u0023\u002a]|[\u3030\u303d]\uFE0F?|(?:\ud83c[\udd70-\udd71]|\ud83c\udd8e|\ud83c[\udd91-\udd9a])\uFE0F?|\u24c2\uFE0F?|[\u3297\u3299]\uFE0F?|(?:\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51])\uFE0F?|[\u203c\u2049]\uFE0F?|[\u25aa-\u25ab\u25b6\u25c0\u25fb-\u25fe]\uFE0F?|[\u00a9\u00ae]\uFE0F?|[\u2122\u2139]\uFE0F?|\ud83c\udc04\uFE0F?|[\u2b05-\u2b07\u2b1b-\u2b1c\u2b50\u2b55]\uFE0F?|[\u231a-\u231b\u2328\u23cf\u23e9-\u23f3\u23f8-\u23fa]\uFE0F?|\ud83c\udccf|[\u2934\u2935]\uFE0F?)|[\u2700-\u27bf]\uFE0F?|[\ud800-\udbff][\udc00-\udfff]\uFE0F?|[\u2600-\u26FF]\uFE0F?|[\u0030-\u0039]\uFE0F/g

Step3. Exclude "emojione.min.js" and "emojione.min.css" from webpack build process.

webpack.prod.config.js

...
...
...
module: {
        rules: [
        ...
        ...
        ...
            {
                test: /\.(jsx|js)?$/,
                include: [path.resolve('src')],
                exclude: [
                    path.resolve('node_modules'),
                    path.resolve('src/main/js/EmojiOne') <---- Add this line.
                ],
                use: 'babel-loader'
            },
         ...
         ...
         ...
        ]
},
...
...
...

React native - Unable to load script from assets 'index.android.bundle'.

| Comments

Step 1. Change React Native Web Server Port

AwesomeProject > react-native start --port 8082

...
...
 Running packager on port 8082.
 
 Keep this packager running while developing on any JS projects. Feel
 free to close this tab and run your own packager instance if you
 prefer.
...
...

Step 2. Reverse adb port

AwesomeProject > react-native run-android
AwesomeProject > adb kill-server
AwesomeProject > adb reverse tcp:8081 tcp:8082
AwesomeProject > adb reverse --list

...
...
(reverse) tcp:8081 tcp:8082
...
...

Step3. Enable Hot Reloading in App.