React
React 介绍
- React 是一个用于构建用户界面的渐进式 JavaScript 库
- 本身只处理 UI
- 不关系路由
- 不处理 ajax
- React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
- 数据驱动视图
- React 由 Facebook 开发
- 第一个真生意义上把组件化思想待到前端开发领域
- angular 早期没有组件化思想
- 后来也被 Vue 学习借鉴了
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。
这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机（参见《也许，DOM 不是答案》）。
- 数据驱动视图
- 组件化
- 路由
- React 8w
- 对技术要求比较高
- 今年春天的，只要会用就行
- 编程性更好一些，更底层，更灵活
- 可玩儿性更高
- Vue 7.5 w
- angular
- 1 5.7 w
- 2 3w
React 特点
- 组件化
- 高效
- 虚拟 DOM
- Vue 2 也是虚拟 DOM
- 虚拟 DOM 更高效
- 灵活
- 渐进式，本身只处理 UI ，可以和你的其它技术栈组合到一起来使用
- 声明（配置）式设计
-
data响应式数据 -
mathods处理函数 - 这样做的好处就是按照我们约定好的方式来开发，所有人写出来的代码就像一个人写的
state- 方法就是类成员
- 也有特定的组件生命钩子
- JSX
- 一种预编译 JavaScript 语言，允许让你的 JavaScript 和 HTML 混搭
- 模板中就是 JavaScript 逻辑
- 单向数据流
- 组件传值
- 所有数据都是单向的，组件传递的数据都是单向
- Vue 也是单向数据流
- 没有双向数据绑定
React 的发展历史
- Facebook 内部用来开发 Instagram
- 2013 年开源了 React
- 随后发布了 React Native
- React 开源协议
- 知乎专栏 -React 的许可协议到底发生了什么问题？
- 知乎 - 如何看待 Facebook 计划将 React 改为 MIT 许可证？
- 阮一峰 - 开源许可证教程
- 阮一峰 - 如何选择开源许可证
- React 最后架不住社区的压力，最后还是修改了许可协议条款。我分享，我骄傲。
- React - Releases
- 2013 年 7 月 3 日
v0.3.0 - 2016 年 3 月 30 日
v0.14.8 - 2016 年 4 月 9 日
v15.0.0 - 2017 年 9 月 27 日
v16.0.0 - 截止到目前：2017 年 11 月 29 日
v16.2.0
React 与 Vue 的对比
技术层面
- Vue 生产力更高（更少的代码实现更强劲的功能）
- React 更 hack 技术占比比较重
- 两个框架的效率都采用了虚拟 DOM
- 性能都差不多
- 组件化
- Vue 支持
- React 支持
- 数据绑定
- 都支持数据驱动视图
- Vue 支持表单控件双向数据绑定
- React 不支持双向数据绑定
- 它们的核心库都很小，都是渐进式 JavaScript 库
- React 采用 JSX 语法来编写组件
- Vue 采用单文件组件
templatescriptstyle
开发团队
- React 由 Facebook 前端维护开发
- Vue
- 早期只有尤雨溪一个人
- 由于后来使用者越来越多，后来离职专职开发维护
- 目前也有一个小团队在开发维护
社区
- React 社区比 Vue 更强大
- Vue 社区也很强大
Native APP 开发
- React Native
- 可以原生应用
- React 结束之后会学习
- Weex
- 阿里巴巴内部搞出来的一个东西，基于 Vue
相关资源链接
- 连字游戏
- 基础教程
- 高级教程
- API 参考文档
- React - GitHub
- 阮一峰 - React 技术栈系列教程
- [阮一峰 - React 入门实例教程]（http://www.ruanyifeng.com/blog/2015/03/react.html
- awesome react
- awesome-react-components
EcmaScript 6 补充
class
React 核心概念
组件化
虚拟 DOM
起步
初始化及安装依赖
$ mkdir react-demos
$ cd react-demos
$ npm init --yes
$ npm install --save babel-standalone react react-domHello World
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo - Hello World</title>
<script src="../node_modules/babel-standalone/babel.min.js"></script>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, react!</h1>,
document.getElementById('root')
)
</script>
</body>
</html>
