react

React的特点

• React不是一个完整的MVC，MVVM框架，只负责view层。
• React跟Web Components不冲突
• React的特点就是“轻”
• 组件化的开发思路

React的优点

• 复杂场景下的高性能
• 重用组件库，组件组合
• 懒

React

• JSX （javascript xml）：Facebook为react开发的语法糖，对程序的功能没有什么影响，增强程序的可读性。
• 组件通过this.props来或许父类传来的参数。
• 在react中写类的时候，用className=“name”，如果用内联样式，那么用样式对象来写className={{color:'red'}}，因为{}是计算符，所以外面要写一个，一般的css，在react中用驼峰写法，比如：font-size，用fontSize来写就可以了。

声明周期

react通过对每个状态封装hook函数。

• mounting：getDefaultProps()=>getInitialState()=>componentWillMount=>render=>componentDidMount
• updating（很少修改，按照内部实现）：componentWillReceiveProps=>shouldComponentUpdate=>componentWillUpdate=>render=>componentDidUpdate
• unmounting（不需要操作，因为浏览器有自己的垃圾回收机制）：componentWillUnmount
• 利用state，直接使用this.state就可以使用，里面可以定义数据类型和方法。
• props：一旦指定，一般不会变，值是父组件传递给子组件，是外来的。
• state：属于当前组件，是可变的，通过setState()可以修改state。
• componentWillReceiveProps：当有新的props时候，会被调用，参数为新的props。
• shouldComponentUpdate：接受新的props或者state之后调用，两个参数，分别为新的props和state。
• React.render(element,container)，只可以包含一个element，如果使用多个，可以用一个容器包起来。

React-Event-Listener

• onClick：绑定事件很简单，驼峰式写法。
• ref="tip"：通过对组件里面的元素添加ref属性，来达到引用的效果。<div ref="tip">124</div>，引用的时候，通过this.refs.tip，这个是虚拟的，要通过React,findDOMNode(this.refs.tip)来才可以。

React实战

• 通过yeoman来生成项目.
• 热启动。REACT_DEVTLOOLS_GLOBAL_HOOK，通过这个全局对象来安装chrome的react插件。
• babel：将es6转换为es5

webpack

• 插件html等。
• 加载器css-loader等。

Redux

• 数据流是我们的行为与响应的抽象。
• 使用数据流帮助我们明确了行为对应的响应。
• 单向数据流
• Paste_Image.png
• React 简单回顾
• Paste_Image.png
• react-redux
• Paste_Image.png

项目结构

• actions：用户行为
  是行为的抽象
  是普通的action对象
  一般由方法生成
  必须有一个type属性
• components：组件
• container：组件
• reducer：分发action
  是响应的抽象
  纯方法
  传入旧状态和action
  返回新状态
  store
  action作用于store
  reducer根据store响应
  store是唯一的
  store包括了完整的state
  state完全可预测
• 组件
• Paste_Image.png