react - 项目开发Tips

1. 概述

本文介绍React开发过程的一些经验和坑。

2. 组件

分栏组件

• 与antd pro components结合在一起，会有css问题
  https://github.com/tomkp/react-split-pane
• 同样存在css问题
  https://github.com/react-grid-layout/react-grid-layout#installation

聊天框实现

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，被转换成Proxy，不能直接读取其值，更不能直接修改，但是，可以push，应该也可以splice
第一层array的属性值，可读可写
上面描述有问题，转成Proxy也没错，需要注意两点：

• 遍历array，只能通过下标获取其值，例如console.log(messages[i].id)或者state.messages[i].id='abcd1234'
• 对于state里面的string值与其他string的比较，不能有/，如果有/则认为不等。。。（不知道什么原因，可能需要再次复现验证）