React & Vue
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 [JavaScript MVC 框架]，都不满意，就决定自己写一套，用来架设 [Instagram]的网站。做出来以后，发现这套东西很好用，就在2013年5月[开源]了。
React 与 Vue 的对比
技术层面
- Vue 生产力更高（更少的代码实现更强劲的功能）
- React 更 hack 技术占比比较重
- 两个框架的效率都采用了虚拟 DOM
- 性能都差不多
- 组件化
- Vue 支持
- React 支持
- 数据绑定
- 都支持数据驱动视图
- Vue 支持表单控件双向数据绑定
- React 不支持双向数据绑定
- 它们的核心库都很小，都是渐进式 JavaScript 库
- React 采用 JSX 语法来编写组件
- Vue 采用单文件组件
- template
- script
- style
开发团队
- React 由 Facebook 前端维护开发
- Vue
- 早期只有尤雨溪一个人
- 由于后来使用者越来越多，后来离职专职开发维护
- 目前也有一个小团队在开发维护
社区
- React 社区比 Vue 更强大
- Vue 社区也很强大
Native APP 开发 - React Native
- 可以原生应用
- React 结束之后会学习
- Weex
- 阿里巴巴内部搞出来的一个东西，基于 Vue
babel 自动编译执行：
初始化及安装依赖
$ mkdir react-demos
$ cd react-demos
$ npm init --yes
$ npm install --save react react-dom @babel/standalone
Hello World
demo - Hello World
JSX基本语法规则
必须只能有一个根节点
多标签写到包到一个小括号( )中，防止 JavaScript 自动分号不往后执行的问题。
-
遇到 HTML 标签 （以 < 开头） 就用 HTML 规则解析
- 单标签不能省略结束标签。
遇到代码块（以 { 开头），就用 JavaScript 规则解析
-
JSX 允许直接在模板中插入一个 JavaScript 变量
- 如果这个变量是一个数组，则会展开这个数组的所有成员添加到模板中
单标签必须结束 />
基本语法：
const element = Hello, world!
;
在 JSX 中嵌入 JavaScript 表达式
- 语法
- 如果 JSX 写到了多行中，则建议包装括号避免自动分号的陷阱
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
Hello, {formatName(user)}!
);
ReactDOM.render(
element,
document.getElementById('root')
);
const user = {
name: '张三',
age: 18,
gender: 0
}
const element = (
姓名：{user.name}
年龄：{user.age}
性别：{user.gender === 0 ? '男' : '女'}
)
在 JavaScript 表达式中嵌入 JSX
function getGreeting (user) {
if (user) {
return Hello, {user.name}
}
return Hello, Stranger.
}
const user = {
name: 'Jack'
}
const element = getGreeting(user)
ReactDOM.render(
element,
document.getElementById('root')
)
JSX 中的节点属性
- 动态绑定属性值
- class 使用 className
- tabindex 使用 tabIndex
- for 使用 htmlFor
普通的属性：
const element = ;
在属性中使用表达式：
const element = 
;
声明子节点
- 必须有且只有一个根节点
如果标签是空的，可以使用 /> 立即关闭它。
const element = ;
JSX 子节点可以包含子节点（最好加上小括号，防止自动分号的问题）：
const element = (
Hello!
Good to see you here.
);
JSX 自动阻止注入攻击
原样输出：
const element = {'this is safe
'}
输出 html：
function createMarkup() {
return {__html: 'First · Second'};
}
function MyComponent() {
return ;
}
在 JSX 中使用注释
在 JavaScript 中的注释还是以前的方式：
// 单行注释
/*
* 多行注释
*/
在 jsx 的标签中写注释需要注意：
写法一（不推荐）：
{
// 注释
// ...
}
写法二（推荐，把多行写到单行中）：
{/* 单行注释 */}
写法三（多行）：
{
/*
* 多行注释
*/
}
JSX 原理
Babel 会把 JSX 编译为 React.createElement() 函数。
下面两种方式是等价的：
const element = (
Hello, world!
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
// Note: this structure is simplified
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
};
Class 和 Style
组件
React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。
组件规则注意事项
组件类的第一个首字母必须大写
组件类必须有
render方法组件类必须有且只有一个根节点
-
组件属性可以在组件的
props获取函数需要声明参数：
props类直接通过
this.props
函数式组件（无状态）
-
名字不能用小写
React 在解析的时候，是以标签的首字母来区分的
如果首字母是小写则当作 HTML 来解析
如果首字母是大小则当作组件来解析
结论：组件首字母必须大写
function Welcome(props) {
return Hello, {props.name}
;
}
const element = 组件构成：
function Welcome(props) {
return Hello, {props.name}
;
}
function App() {
return (
抽取组件
function Comment(props) {
return (
{props.author.name}
{props.text}
{formatDate(props.date)}
);
}
类方式组件（有状态）
class 补充
本质就是对 EcmaScript 5 中构造函数的一个语法糖
就是让你写构造函数（类）更方便了
基本语法
constructor构造函数-
实例成员
实例属性
实例方法
-
类成员
静态方法
静态属性
class 组件语法
在 React 中推荐使用 EcmaScript 6 Class 的方式类定义组件
组件传值 Props
- Props 是只读的，不能修改
EcmaScript 5 构造函数：
function Welcome(props) {
return Hello, {props.name}
;
}
EcmaScript 6 Class：
class Welcome extends React.Component {
render() {
return Hello, {this.props.name}
;
}
}
this.props.children
this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。
它表示组件的所有子节点。
this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。
React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。
事件处理
函数式组件
带有状态的组件及事件绑定this