Open du1wu2lzlz opened 6 years ago
项目架构
项目遇到的问题 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()
webpack 配置相关
4.1 webpack压缩插件
React 事件相关 react中阻止事件冒泡的方法:
e.nativeEvent.stopImmediatePropagation();
项目架构
项目遇到的问题 3.1 引入公司UI库时 https://segmentfault.com/q/1010000012041869
3.2 关于MobX 状态管理
https://www.cnblogs.com/jocongmin/p/6668839.html
Mobx 与Redux的区别
3.21 使用ES7的Decorators语法时,VSCode编辑器报错
3.3 控制文字,超出部分显示省略号
3.4 es6语法
3.5 React的事件处理
这段代码中并没有保持同一个上下文。所以,如果我们在 _handleButtonClick 函数中使用 this 来获取 Switcher 组件的引用时将会报错
通常,我们使用 bind 来解决:
但是,这样做的话 bind 函数会一次又一次地被调用,这是因为 button 可能会渲染多次。一种更好的方式是在组件的构造函数中来创建绑定:![image](https://user-images.githubusercontent.com/18479111/40758256-0252d20c-64bf-11e8-922d-f1e582963221.png)
容器型组件知道数据及其结构,以及数据的来源。它们知道是如何运转的,或所谓的业务逻辑。它们接收信息并对其进行处理,以方便展示型组件使用。通常,我们使用 高阶组件 来创建容器型组件,因为它们为我们的自定义逻辑提供了缓冲区。
展示型组件只涉及组件的外在展现形式。它们会有附加的 HTML 标记来使得页面更加漂亮。这种组件没有任何绑定及依赖。通常都是实现成 无状态组件,它们没有内部状态
webpack 配置相关
4.1 webpack压缩插件
clean-webpack-plugin
在building之前删除你以前build过的文件
React 事件相关 react中阻止事件冒泡的方法: