群组信息 私有

administrators

 

成员列表

  • Apollo client 緩存問題

    Apollo client 聲稱他們把緩存玩的很好,用過以後才知道其實不然。
    更新緩存,還是很手動的活。比如:

     <Mutation
              mutation={DELETE_CUSTOMPAGE}
              key={item.draftid}
              update={cache => {
                const { customPages } = cache.readQuery({ query: GET_CustomPages });
                const newCustomPages = [...customPages];
                const idx = _.findIndex(newCustomPages, {
                  id: item.id
                });
    
                if (idx > -1) {
                  newCustomPages.splice(idx, 1);
                }
    
                cache.writeQuery({
                  query: GET_CustomPages,
                  data: { customPages: newCustomPages }
                });
              }}
            >
    

    在同一個模塊,加這些cache處理還不算太麻煩,問題是另一個模塊要用到其他模塊,要保證其他模塊修改後,通知所有相關模塊也更新對於的QUERY是極其麻煩的。

    因此,有人問題這個問題 - 如何把緩存關閉:
    https://stackoverflow.com/questions/47879016/how-to-disable-cache-in-apollo-link-or-apollo-client

    其中一位大哥的答案(非選中的)解決了我的問題:

    I would always suggest not to disable inbuild caching feature from apollo client. Instead you can always set fetchPolicy: 'network-only' for an individual queries. Something like this

    <Query
        query={GET_DOG_PHOTO}
        variables={{ breed }}
        fetchPolicy='network-only'
    >
     {({ loading, error, data, refetch, networkStatus }) => {
       ...
     }}
    </Query>
    

    While fetching data with this Query, it would always do a network request instead of reading from cache first.

    发布在 笔记
  • RE: Array / Map /Object Transfer and Reshape Example

    Easier way

    const groupBy = (items, key) => items.reduce(
      (result, item) => ({
        ...result,
        [item[key]]: [
          ...(result[item[key]] || []),
          item,
        ],
      }), 
      {},
    );
    
    
    const pets = [
        {type:"Dog", name:"Spot"},
        {type:"Cat", name:"Tiger"},
        {type:"Dog", name:"Rover"}, 
        {type:"Cat", name:"Leo"}
    ];
        
    
    const result = groupBy(pets, 'type');
    console.log(result);
    
    发布在 笔记
  • Array / Map /Object Transfer and Reshape Example
    function groupBy(list, keyGetter) {
        const map = new Map();
        list.forEach((item) => {
             const key = keyGetter(item);
             const collection = map.get(key);
             if (!collection) {
                 map.set(key, [item]);
             } else {
                 collection.push(item);
             }
        });
        return map;
    }
    
    
    function strMapToObj(strMap) {
      let obj = Object.create(null);
      for (let [k,v] of strMap) {
        // We don’t escape the key '__proto__'
        // which can cause problems on older engines
        obj[k] = v;
      }
      return obj;
    }
    function objToStrMap(obj) {
      let strMap = new Map();
      for (let k of Object.keys(obj)) {
        strMap.set(k, obj[k]);
      }
      return strMap;
    }
    
    // example usage
    
    const pets = [
        {type:"Dog", name:"Spot"},
        {type:"Cat", name:"Tiger"},
        {type:"Dog", name:"Rover"}, 
        {type:"Cat", name:"Leo"}
    ];
    
    //use map to get new pets
    
        
    const grouped = groupBy(pets, pet => pet.type);
    
    const groupedObj = strMapToObj(grouped);
    
    
    
    
    // const groupedStr = JSON.stringify([...grouped]);
    // const groupedJson = JSON.parse(groupedStr);
    
    // console.log(JSON.stringify([...grouped]));
    // console.log(groupedJson);
    
    发布在 笔记
  • material-ui 如何運用主題的顏色

    如何在一個組件里使用主題顏色?
    如果你從Bootstrap CSS過來,你可能希望我們可以這麼寫:
    <p class="text-primary">.text-primary</p>
    寫成react就是這樣嘍:
    <p className="text-primary">.text-primary</p>
    很抱歉,這麼寫行不通!

    必須這麼弄:

    import { withStyles } from "@material-ui/core/styles";
    const styles = theme => ({
      paper: {
        position: "absolute",
        width: "90%",
        backgroundColor: theme.palette.background.paper,
        boxShadow: theme.shadows[5],
        padding: theme.spacing.unit * 4,
        outline: "none",
        height: "90vh",
        overflowY: "scroll",
        color: theme.palette.primary.main
      }
    });
    class YourComponent extends React.Component {
    ...
    }
    export default withStyles(styles)(YourComponent);
    
    

    material-ui 默認主題屬性可以在這裡查看:https://material-ui.com/customization/default-theme/

    发布在 笔记
  • 用moment庫轉換MySQL的毫秒級時間

    moment.unix(ts/ 1000).format("MM/DD/YYYY HH:mm")
    'ts' 是MySQL的datetime, 除以1000得到秒值,然後再格式化

    发布在 笔记
  • NodeBB 主題問題

    NodeBB的主題功能不錯,自帶的幾個主題也相當專業,但是不論多好的主題,都有不盡人意的地方,所謂蘿蔔青菜各有所愛。

    如果你想對現有的主題做些修改,這個原本相當容易的事情,在NodeBB下變得沒那麼容易了,因為主題是一Package的方式存在,雖然你可以在node_modules下找打對應的主題源代碼,通過修改CSS或者模板,重新Build也可能行的通,但是下次升級你可能會碰到意想不到的問題。所以正確的做法是到原有模板的Github頁面,把項目Clone到本地,然後對他進行修改。之後,你可以把這個主題上傳的服務器,運行
    npm install PATH_TO_THEME
    比如:我在NodeBB的根目錄下(通常”/opt/nodebb") 有個文件夾“myTheme”, 裡面有我的主題“nodebb-theme-j4fun",那麼運行命令如下:
    npm install myTheme/nodebb-theme-j4fun

    然後到NodeBB的Admin後台激活這個主題,然後重新部署即可。

    有個值得一提的是,不知道從哪個版本開始(可能是V1.12.x,) The CSS如今變了,之前是:
    <link rel="stylesheet" type="text/css" href="{relative_path}/assets/stylesheet.css?{config.cache-buster}" />
    新版本不在用stylesheet.css了,必須改為client.css。不然的CSS的修改不會生效。

    发布在 笔记
  • NodeBB升級后突然不可以上傳圖片

    NodeBB升級后,圖片不能上傳了,頭像也該不了了。用Chrome Inspector查了一下,出現socket.io斷鏈的錯誤。二丈摸不著頭!Google了一把,解決方案很簡單,只需要在跟目錄下,運行下面cmd:
    npm install --build-from-source sharp

    不用重啟,立即生效!
    參考文獻:https://community.nodebb.org/topic/13422/connection-lost-when-attempting-to-upload-a-new-profile-picture-or-cover-picture/16

    延伸閱讀:sharp是什麼東西?
    https://www.npmjs.com/package/sharp
    哦,是圖片裁剪模塊

    发布在 笔记
  • Create React App build 不起来

    内存问题可以用以下方法来解决:

    "start": "react-app-rewired --max-old-space-size=4096 start",
    "build": "export NODE_OPTIONS='--max-old-space-size=4096' && react-app-rewired build",
    
    发布在 笔记
  • RE: 免费安装网站安全证书

    今天手动更新,碰到这个错误:

    No module named _cffi_backend

    不知何故,不过容易解决,重新装一箱cffi就可以了:

    For python2.x use following command:

    python -m pip install cffi

    for python3.x

    python3 -m pip install cffi

    发布在 笔记
  • React16后的新功能

    软件版本通常分3级:

    • 第一个数字代表大版本
    • 第二个数字代表小版本
    • 第三个数字代表小打小闹 - bug fixes等

    V15 到 V16 是大版本升级,惊心动魄的新功能不少:

    1. fragments - 曾几何时,render()必须且只能返回一个node,因此,你不得不加上一些不必要的<div>把多个node包起来。fragments 让你可以直接render一个数组。这个配上map真是太完美了。注意:key是需要的,这个有点烦。所以v16.2.0后,我们可以用特殊字符<>, 例如:<><li /><li /><>,这样可以就可省略了。

    2. 对了,你可以直接返回字符串了 - 不由再次感叹:曾几何时,render()必须且只能返回一个node

    3. contextAPI - 就是说createContext之后,可以在一个component里提供provider,例外一个component里通过consumer来读取
      祝:这个我基本上没用过 - 因为我要吗直接传props,或者用其他state管理,例如:redux或者mobx等。

    4. createRef API - 这个在不受控制的form还是很有用的。受控制指通过react state来控制form的字。

    5. 新的lifecycles

    • getDerivedStateFromProps
    • getSnashotBeforeUpdate

    注意:几个will的lifecycles, 到V17后就没有life了。所以,大家有空还是看看上面两个新的lifecyles吧。

    1. StrictMode - 用了发现下面几个潜在问题
    • Identifying components with unsafe lifecycles
    • Warning about legacy string ref API usage
    • Detecting unexpected side effects
    1. React.memo - 用来替代PureComponent 或者 shouldComponentUpdate, memo让component变存, 或者说只有props变才重新render。如只是父级component变了,memo子component不会重新render

    2. React.lazy - 用来实现code-split - 基本是react loadable的复制版。

    下面几个还没出:

    1. Hooks - 让functional component 可以使用 state 通过 useState()

    2. suspend

    3. concurrent rendering

    10和11 基本上是用了提供弱CPU和慢网速用户的用户体验。大概意思:hold住render,知道数据ready,这样对网速快的用户少了loading icon,对慢用户仍然有repsond。这个概念有点难,等真正开始用了,我们再深入!

    发布在 React