《深入React技术栈》 读书笔记

第一章

1. React的精髓就是函数式编程
2. VirtualDOM与对象树
3. 组件元素
4. 无状态组件和内存优化（避免不必要的检查和内存分配）
5. 数据流 ： 单向数据流 从父组件到子组件
6. setState是一个异步方法，一个生命周期内的所有setState方法会合并操作
7. shouldComponentUpdate方法用来判断是否需要渲染。无状态组件没有shouldComponentUpdate方法，可以用Recompose的pure方法解决（性能优化）
8. 不稳定方法unstable_renderSubtreeIntoContainer，和render的区别是它传入了父组件

第二章

事件

1. React事件处理机制，React的事件处理函数没有直接绑定到真实节点上，而是吧所有事件绑定到结构的最外层，使用一个统一的事件监听器。这个监听器维持了一个映射来保存所有组件内部的事件监听和处理函数。组件挂载和卸载时，只是在这个统一的事件监听器上插入或者删除一些对象。
2. 在React中绑定this

• 一直在用的bind方法。可以向处理器中传递参数

onClick = {this.handleClick.bind(this, 'text')}
//没有参数的情况 可以使用双冒号语法
onClick = {::this.handleClick)}

• 构造器内申明
• 箭头函数自动绑定作用域this

class App extends Component(){
    const handleClick = (e) =>{
    console.log(e)
    }
    render(){
    return Test 
    }
}

3. 使用原生事件：可以在componentDidMount里面为DOM（利用refs找到DOM）添加监听器，但是要在componentWillUnmout里面卸载到监听器
4. 补充一个基本知识点：事件冒泡 事件捕获

element.addEventListener(event, function, useCapture)
//第三个参数默认为false
//false：表示在事件冒泡阶段调用事件处理函数
//true：表示在事件捕获阶段调用处理函数

表单控件

5. 表单组件： 受控组件vs非受控组件。

• 受控组件都要绑定Change事件
• 非受控属性属于反模式设计，可以用redux/flux来替代。
• 受控组件的提供了用来通过状态控制展示组件的属性：value(input, textarea),checked(radio, checkbox)以及推荐在select组件上使用Value而不是在option 上使用selected

CSS Module

6. classnames库 帮助处理动态类名
7. css模块化遇到的问题，
8. css模块化的方案：CSS Module
9. CSS Module样式默认局部，要使用全局样式就加入

:global{
/* 样式 ...*/
}

10. 样式复用： 官方唯一指定方式，composes组合
11. class命名： 推荐BEM命名法---Block(模块名，如dialog)，Elem(模块中的节点名, 如deleteButton)，Modifier(节点对应状态，如disabled)

/*./dialog.css*/
.DeleteButton--disabled {}

12. 变量输出：:export
13. 引入normalize.css这样的全局样式，借助webpack配置一下
14. 一般将外层节点的class设置成root
15. 进阶技巧，使用react-css-module库来升级原生Module CSS

组件通信

1. 父组件 -> 子组件： 利用props
2. 子组件 ->父组件：利用回调函数和自定义事件机制 handle*()
3. 跨级组件通信： context. 但是建议只用在真正的全局且不会被更改的信息上，如界面主题，用户信息等
4. 跨级通信是反模式设计

高阶函数的功能

属性代理：

const MyHocContainer = (WrappedComponent){
    class extend Component {// 继承自component
  }
}

1. 控制Props：为React组件加上一层Props，用法类似Redux小书中例子
2. 通过refs使用引用（不是很懂这个方法可以做甚？避免组件自己去操作DOM实例？）
3. 抽象state： 类似Redux小书的例子，将组件抽取成一个dumb组件，在HOC中进行将数据通过props传给dumb组件。
4. 使用其他元素包裹组件，可以用来为组件添加样式
   反向继承：

const MyHocContainer = (WrappedComponent){
    class extend WrappedComponent {// 继承自component
//可以在里面使用WrappedComponent的state，props，生命周期和render  
}
}

• 渲染劫持：条件渲染等
• 控制state：书上的debug实例
• 组件命名：书上例子，解决使用高阶函数导致原始组件displayname失去的问题。或者使用recompose库

组合式组件开发事件
补充知识：decorator

组件性能优化

1. Purerender()
2. Immutable Data:一经创建就不能被改变的数据。结构共享：如果对象树某一个节点改变，就修改该节点与其父节点，而不用修改整个对象树
3. clojurescript
4. 最常用的性能优化：shouldComponentUptade，结合Immutabale的is(),和===就可以判断数据是否改变从而需不需要执行组件的渲染。这样一来state变化之后不会渲染所有节点，而是将有变化的节点及其父节点们渲染。
5. 动态子组件一定要key，当有两个子组件需要渲染的时候，没办法给他设置key，就可以用React插件：createFragment
   6: 量化优化性能：react-addons-perf插件

React动画

这一节可以要用到的时候再来看

1. 缓动函数：最佳用户体验： spring，cubic-bezier
2. 物理缓动： 通过物理规律来设置缓动Three.js例子，酷炫！