React
what
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很多人选择将 React 认为是 MVC 中的 V（视图）。
React 是为了解决一个问题：构建随着时间数据不断变化的大规模应用程序。
虚拟 DOM——React的核心机制之一：某一信号触发应用中某些数据发生改变，React 就会重新渲染整个虚拟 DOM。然后 React 会比较现在的虚拟 DOM 与之前的虚拟 DOM 的差异，获知哪些是需要更新的，最后在真实的 DOM 上应用这些必要的更新
React利用虚拟DOM来减少对实际DOM的操作从而提升性能。
/* React 引入这种概念是因为虚拟 DOM 把当前真实的 DOM 节点转化成 JavaScript 对象。这使得 React 可以追踪当前虚拟 DOM(某些数据变化后生成)和之前的虚拟 DOM(某些数据变化之前)的差异。React 通过两者对比提取出来这些差异点，然后再在真实的 DOM 节点上执行必要的更新。在传统的开发中，通常 UI 上诸多状态变化会让维护应用的状态变得很困难和复杂。React 通过检测状态变化来每次重新渲染虚拟 DOM 节点，然后按需自动更新真实节点，这种方式可以让开发人员可以简单地专注在应用的状态上。/
why
简单
仅仅只要表达出你的应用程序在任一个时间点应该呈现的样子，然后当底层的数据变了，React 会自动处理所有用户界面的更新。
声明式
数据变化后，React 概念上与点击“刷新”按钮类似，但仅会更新变化的部分。
构建可组合的组件
React 都是关于构建可复用的组件。事实上，通过 React 你唯一要做的事情就是构建组件。得益于其良好的封装性，组件使代码复用、测试和关注分离（separation of concerns）更加简单
其它
现在最热门的前端框架
React 16.0.0 发布，去除专利条款，改用 MIT 许可证——CSDN
PRE
ES5（ES 代表ECMAScript）基本上是“常规JavaScript”。第5次更新JavaScript，ES5在2009年完成。它已被所有主要浏览器支持多年。因此，如果你在最近写过或看过任何JavaScript，很可能是ES5。
ES6是一个新版本的JavaScript，添加了一些不错的语法和功能添加。它在2015年完成。ES6 几乎完全支持 所有主要的浏览器。但这将是一段时间，直到较旧版本的Web浏览器逐步停止使用。例如，Internet Explorer 11不支持ES6，但是具有大约12％的浏览器市场份额。
npm 即 Node 包管理器（Node Package Manager）。它是一个以 JavaScript 编写的软件包管理系统。相当于 maven
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
webpack： 是一个前端资源加载/打包工具，只需要相对简单的配置就可以提供前端工程化需要的各种功能。
JSX(JavaScript eXtension)
class Header extends React.Component {
render() {
return (
<h1 className='large'>Hello World</h1>
);
}
}
{/*当组件渲染时，它输出一个React元素树或该组件输出的HTML元素的虚拟表示。React然后将基于此React元素表示来确定对实际DOM所做的更改*/}HTML 里的 class 在 JSX 里要写成 className
var myDivElement = <div className="foo" />;属性值使用表达式，只要用 {} 替换 "":
var myElement = <MyComponent someProperty={true} />;在 JSX 里使用注释也很简单，就是沿用 JavaScript，唯一要注意的是在一个组件的子元素位置使用注释要用 {} 包起来。
{/* child comment, put {} around */}箭头函数
(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// 等价于：(param1, param2, …, paramN) => { return expression; }
/* 当删除大括号时，它将是一个隐式的返回值，这意味着我们不需要指定我们返回*/
// 如果只有一个参数，圆括号是可选的:
(singleParam) => { statements; }
singleParam => { statements; }
// 如果箭头函数 无参数 , 必须使用 ()圆括号:
() => { statements; }
//返回一个对象时，函数体外要加圆括号
params => ({foo: bar})
// 支持 剩余参数和默认参数:
(param1, param2, ...rest) => { statements }props* 是一种从父级向子级传递数据的方式
state 仅用于实现交互功能，也就是说，数据随着时间变化。
组件的生命周期
组件的生命周期有三个主要部分：
- 挂载: 组件被注入DOM。
- 更新: 组件被重新渲染来决定DOM是否应被更新。
- 卸载: 组件从DOM中被移除。
React提供生命周期方法，以便你可以指定钩挂到这个过程上。我们提供了 will 方法，该方法在某事发生前被调用，did方法，在某事发生后被调用。
note:
挂载
getInitialState(): object在组件挂载前被调用。有状态组件(Stateful components) 应该实现此函数并返回初始state的数据。componentWillMount()在挂载发生前被立即调用。componentDidMount()在挂载发生后被立即调用。 需要DOM node的初始化应该放在这里。
更新
componentWillReceiveProps(object nextProps)当挂载的组件接收到新的props时被调用。此方法应该被用于比较this.props和nextProps以用于使用this.setState()执行状态转换。shouldComponentUpdate(object nextProps, object nextState): boolean当组件决定任何改变是否要更新到DOM时被调用。作为一个优化实现比较this.props和nextProps、this.state和nextState，如果React应该跳过更新，返回false。componentWillUpdate(object nextProps, object nextState)在更新发生前被立即调用。你不能在此调用this.setState()。componentDidUpdate(object prevProps, object prevState)在更新发生后被立即调用。
卸载
componentWillUnmount()在组件被卸载和摧毁前被立即调用。清理应该放在这里。
已挂载的方法
Mounted 复合组件同样支持以下方法:
component.forceUpdate()可以在任何已挂载的组件上调用，在你知道某些深处的组件状态在未使用this.setState()就被改变了时。
Redux
what&how
React 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。有两个方面，它没涉及。
- 代码结构
- 组件之间的通信
对于大型的复杂应用来说，这两方面恰恰是最关键的。因此，只用 React 没法写大型应用。
为了解决这个问题，2014年 Facebook 提出了 Flux 架构的概念，引发了很多的实现。2015年，Redux 出现，将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端架构。
Redux 的适用场景
多交互、多数据
- 用户的使用方式复杂
- 不同身份的用户有不同的使用方式（比如普通用户和管理员）
- 多个用户之间可以协作
- 与服务器大量交互，或者使用了WebSocket
- View要从多个来源获取数据
Redux 的设计思想
（1）Web 应用是一个状态机，视图与状态是一一对应的。
（2）所有的状态，保存在一个对象里面。
一些基本概念
Store ：就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。
**State ：**Store`对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。
**Action ：**State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。
Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。其他属性可以自由设置。
const action = {
type: 'ADD_TODO',
payload: 'Learn Redux'
};
Action 描述当前发生的事情。改变 State 的唯一办法，就是使用 Action。它会运送数据到 Store。
store.dispatch():是 View 发出 Action 的唯一方法。
上面代码中，store.dispatch接受一个 Action 对象作为参数，将它发送出去。
**Reducer：**Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。
React+Redux数据流
how
结合代码讲解。
debug
React Developer Tools
Redux DevTools
使用教程 https://github.com/zalmoxisus/redux-devtools-extension
它可以让你实时的监控Redux的状态树的Store
Resource
(React -China) http://www.react-cn.com/docs/getting-started.html
(JSX) http://www.react-cn.com/docs/jsx-in-depth.html
(Redux) http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html
(NPM 部署webpack,含坑)http://www.ptbird.cn/windows-webpack-no-work.html
3475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
