1. 概述

本文介紹React開發(fā)過程的一些經(jīng)驗和坑。

2. 組件

分欄組件

• 與antd pro components結(jié)合在一起，會有css問題
  https://github.com/tomkp/react-split-pane
• 同樣存在css問題
  https://github.com/react-grid-layout/react-grid-layout#installation

聊天框?qū)崿F(xiàn)

https://blog.csdn.net/livingsu/article/details/107222077

滾動條美化

https://www.cnblogs.com/xiaoyan2017/p/14062703.html

3. ByteDance Open Source

A new feature guide component by react

https://github.com/bytedance/guide

A CLI tool to help with diagnosing Node.js processes basing on inspector

https://github.com/bytedance/diat

The next generation state management library for React

https://github.com/bytedance/react-model
https://codesandbox.io/s/react-model-v4-todomvc-oxyij?file=/src/models/todo.ts

React component for xgplayer, a HTML5 video player with a parser that saves traffic

https://github.com/bytedance/xgplayer-react
https://github.com/bytedance/xgplayer
https://github.com/bytedance/xgplayer-vue
https://github.com/bytedance/xgplayer-examples

4. 坑

react-model

第二層array，被轉(zhuǎn)換成Proxy，不能直接讀取其值，更不能直接修改，但是，可以push，應(yīng)該也可以splice
第一層array的屬性值，可讀可寫
上面描述有問題，轉(zhuǎn)成Proxy也沒錯，需要注意兩點：

• 遍歷array，只能通過下標(biāo)獲取其值，例如console.log(messages[i].id)或者state.messages[i].id='abcd1234'
• 對于state里面的string值與其他string的比較，不能有/，如果有/則認(rèn)為不等。。。（不知道什么原因，可能需要再次復(fù)現(xiàn)驗證）