实习React项目相关

[du1wu2lzlz]

1. React性能相关

• http://www.wulv.site/2017-05-31/react-purecomponent.html
• https://www.cnblogs.com/Unknw/p/6431375.html
• https://www.cnblogs.com/penghuwan/p/6707254.html
  基本上是使用 shouldComponentUpdate 或是使用PureComponent
  使用shouldComponentUpdate 要多写点样板代码，但是好控制。
  PureComponent 省事，但是有些深层的会不自动。

2. 项目架构

   • https://github.com/wang-qingqing/react-boilerplate-baseon-webpack4

3. 项目遇到的问题
   3.1 引入公司UI库时 https://segmentfault.com/q/1010000012041869

   3.2 关于MobX 状态管理
   + https://www.cnblogs.com/jocongmin/p/6668839.html

     + Mobx 与Redux的区别
       
         Redux 与 MobX 的不同主要集中于以下几点：
        
           1. Redux 是单一数据源，而 MobX 往往是多个 store。MobX 可以根据应用的 UI、数据
               或业务逻辑来组织 store，具体如何进行需要你自己进行权衡。
   
           2. Redux store 使用普通的 JavaScript 对象结构，MobX 将常规 JavaScript 对象包裹，
                赋予 observable 的能力，通过隐式订阅，自动跟踪 observable 的变化。
                MobX 是观察引用的，在跟踪函数中（例如：computed value、reactions等等），
                任何被引用的 observable 的属性都会被记录，一旦引用改变，MobX 将作出反应。
                注意，不在跟踪函数中的属性将不会被跟踪，在异步中访问的属性也不会被跟踪。
   
           3. Redux 的 state 是只读的，只能通过将之前的 state 与触发的 action 结合，
               产生新的 state，因此是纯净的（pure）。而 MobX 的 state 即可读又可写，
               action 是非必须的，可以直接赋值改变，因此是不纯净的（Impure）。
   
           4. Redux 需要你去规范化你的 state，Immutable 数据使 Reducer 在更新时
              需要将状态树的祖先数据进行复制和更新，新的对象会导致与之 connect 的
              所有 UI 组件都重复渲染。
              因此Redux state 不建议进行深层嵌套，或者需要我们在组件中
              用 shouldComponentUpdate 优化。
              而 MobX 只自动更新你所关心的，不必担心嵌套带来的重渲染问题。
   
           5. 在 Redux 中区分有 smart 组件与 dumb 组件，dumb 负责展示，smart 负责状态更新，
               数据获取。
              而在 MobX 中无需区分，都是 smart，
              当组件自身依赖的 observable 发生变化时，会作出响应。
   

   3.21 使用ES7的Decorators语法时，VSCode编辑器报错
   在“文件 -> 首选项 -> 设置”中，搜索“experimentalDecorators”， 增加一句配置： "javascript.implicitProjectConfig.experimentalDecorators": true

   3.3 控制文字，超出部分显示省略号

    3.31 css实现方法
           ```
           overflow: hidden;
           text-overflow:ellipsis;
           white-space: nowrap;
            ```
   

   3.4 es6语法

     3.4.1 
             $.extends  与 Object.assign  对象的浅拷贝与深拷贝
   

   3.5 React的事件处理

     3.51 
   

这段代码中并没有保持同一个上下文。所以，如果我们在 _handleButtonClick 函数中使用 this 来获取 Switcher 组件的引用时将会报错

通常，我们使用 bind 来解决:

  <button  onClick ={this._handleButtonClick.bind(this)}>
      do sth
  </button>

但是，这样做的话 bind 函数会一次又一次地被调用，这是因为 button 可能会渲染多次。一种更好的方式是在组件的构造函数中来创建绑定:

      3.52  无状态组件的分离 

        3.52.1 容器型组件

容器型组件知道数据及其结构，以及数据的来源。它们知道是如何运转的，或所谓的业务逻辑。它们接收信息并对其进行处理，以方便展示型组件使用。通常，我们使用 高阶组件 来创建容器型组件，因为它们为我们的自定义逻辑提供了缓冲区。

       3.52.2 展示型组件

展示型组件只涉及组件的外在展现形式。它们会有附加的 HTML 标记来使得页面更加漂亮。这种组件没有任何绑定及依赖。通常都是实现成 无状态组件，它们没有内部状态

      3.53  单向数据流

           单向数据流的主要思想是组件不会改变接收的数据。它们只会监听数据的变化，当数据发生变化时它们会使用接收到的新值，而不是去修改已有的值。当组件的更新机制触发后，它们只是使用新值进行重新渲染而已。

      3.54 key相关

            参考 https://github.com/wang-qingqing/accumulate/blob/master/%E6%A1%86%E6%9E%B6%E7%B1%BB/REACT/%E3%80%90React%E3%80%91%E5%85%B3%E4%BA%8Ekey.md
     3.55 事件相关
     阻止默认事件冒泡 : e.nativeEvent.stopImmediatePropagation()

4. webpack 配置相关

   4.1 webpack压缩插件

   clean-webpack-plugin   
   在building之前删除你以前build过的文件
   

---

5. React 事件相关
   react中阻止事件冒泡的方法:

      e.nativeEvent.stopImmediatePropagation();