search

violet0sea / note

can not open gist, so write here
0 stars 0 forks source link

React 开发规范 #20

Closed violet0sea closed 5 years ago

violet0sea commented 5 years ago

零星记录

1.state里的状态应该是涉及到UI状态更新用的，任何无关的状态无需放在里面，正确的做法是可以放在实例属性上，比如定时器的ID，各类请求提交时需要的相关ID...

2.render函数里没有必要去做数据处理

3.容器组件非常重要，拆分子组件时必须将数据获取放到容器组件那一层，展示组件通过props传递数据，此处考虑主要包含，兄弟组件共享数据，兄弟组件相互通信类似的情况。

4.使用PureComponent替代Component 阻止父组件state变化是，每次都render所有的子组件，减少不必要的render

5.code spliting: 按路由分割代码或者按组件分割代码，使用react-loadable来实现

violet0sea commented 5 years ago

React Hooks

使用hooks的动机，传统的Class Component写法繁琐，无法复用组件之间的逻辑，使用HOC导致组件变得过于复杂，出现了所谓的wrapper hell

violet0sea commented 5 years ago

top-down-dataflow

props

React使用props来传递数据，从父组件传递给子组件，这里需要注意的是单方向的传递，只能是从上到下，从父组件到子组件，并且这个传递下去的数据不能被子组件改变；

state

组件自身存储的状态，可以发生改变

注意

在设计组件树的时候，存在容器组件和展示组件的概念，一般将存有状态的父组件看作容器组件，通过props传递状态的子组件看作展示组件