共计 2662 个字符，预计需要花费 7 分钟才能阅读完成。
React 简介
React 是一个用于构建用户界面的 JS 库，次要用于构建 UI。
React 由美国的公司 Facebook 在 2011 年诞生并于 2013 年开源公布
特点：
1. 申明式设计 −React 采纳申明范式，能够轻松形容利用。
2. 高效应用虚构 dom+ 优良的 diffing 算法，缩小了与实在 dom 的交互
3.JSX 是 JavaScript 语法的扩大。React 开发不肯定应用 JSX，但咱们倡议应用它。
4. 组件 − 通过 React 构建组件，使得代码更加容易失去复用，进步开发效率，可能很好的利用在大我的项目的开发中。
5. 单向响应的数据流 − React 实现了单向响应的数据流，从而缩小了反复代码，这也是它为什么比传统数据绑定更简略
6. 在 React-Native 中能够应用 React 语法进行挪动端开发
虚构 dom
其实虚构 dom 实质上是一个 Object 类型的个别对象
虚构 dom 的长处：
1. 它加载过一次数据时就会把加载过的数据放到内存中下次如果有更改而后持续加载的时候只是加载新增的数据并不会去反复加载之前的数据
2. 虚构 dom 绝对于实在 dom 是更轻量级的，因为虚构 dom 是 react 外部在用，用哪个提供哪个属性，无需实在 dom 上挂载的那么多属性
3. 虚构 dom 会被 React 转换成实在 dom 最初渲染到页面上
MVM 长处
MVM 模式和 MVVC 模式一样，次要目标是拆散视图（View）和模型（Model），有几大长处
React 框架只是 mvc 中的 c，Angular 才是真正的 mvc 框架
1. 低耦合：视图（View）能够独立于 Model 变动和扭转，一个 ViewModel 能够绑定到不同的’View’上，当 View 变动的时候 Model 能够不变，当 Model 变动的时候 View 也能够不变
2. 可重用性：你能够把一些视图逻辑放在一个 ViewModel 外面，让一个 ViewModel 外面，让很多 view 重用这段视图逻辑
3. 独立开发：开发人员能够专一于业务逻辑和数据的开发（ViewModel），设计人员能够专一于页面设计，应用 Expression Blend 能够很容易设计界面并生成 xml 代码
4. 可测试：页面元素来是比拟难于测试的，而当初测试能够针对 ViewModel 来写。
react 中共有俩种组件类型：
class 类组件
在 class 类组件中 React 元素的地位是在 render() 函数中，也就是说，类组件中必须有一个
render()函数，在render()函数中必须有return的值，这个值必须是虚构 DOM（React 元素）。
class View extends React.Component {render() {return <h1>Hello, {this.props.name}</h1>;
}
}
export default View函数组件（其中蕴含 react 新个性 hook）
- 组件名字首字母肯定是大写的
- 函数组件又叫无状态组件，没有生命周期
（hook 呈现后使得函数组件也有了本人的生命周期）- 函数组件只有当展现视图的时候才用。做简单的数据处理、须要有本人的状态的时候，须要用类组件。
function View(props) {return <h1>Hello, {props.name}</h1>;
}俩大组件总结：
无论是函数组件还是类组件，return 的 React 元素的语法必须是由一个标签包裹起来的所有虚构 DOM 内容，能够间接通过一个 div 对元素进行包裹或者是应用 react 中的
<React.Fragment>进行包裹，这个标签的缩写为 <></>
Jsx 语法：
在应用 react 框架开发后发现外面用 jsx 语法代替了 javascript
jsx 语法是一个相似于 XML 的 js 语法扩大
(XML 晚期用于存储和传输数据)
实质是 React.createElement(component,props…)的语法糖
jsx 语法规定：
1. 标签中要写入 js 表达式时要用 {包着}
2. 内联款式要用{{}} 包着写
3. 款式类名要用 className 起名
4. 只有一个根标签 **长处：
1.JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
2. 它是类型平安的，在编译过程中就能发现错误。
3. 应用 JSX 编写模板更加简略疾速。
Props:
在 react 中 props 是以一个只读的属性存在的
应用场景：
1. 父传子：props.children 接管父组件 (闭合组件) 传入的数据2. 子传父：子组件通过调用父组件传递到子组件的办法向父组件传递音讯的。
3. 同级互传：通过父级中介实现兄弟 a 组件的数据给到兄弟 b 组件
** 具体流程：组件 A -- 传值 --> 父组件 -- 传值 --> 组件 B **4. 跨级通信：context，mobx，redux
State：
state 在 react 中是可读可写的，只不过不能间接对 state 值进行批改
批改形式：
一种是间接失常批改应用 setState 批改 a：12 改成 a：44
setState 是异步的
this.setState({name: "小明",});另一种是扭转本身的值例如 i ++ 则应用函数进行批改
this.setState((state, props) => ({
age: state.age + 3,
test: state.test + 4,
}));React 生命周期：
上图仅供参考
上图局部钩子函数曾经废除，上面总结的都是目前可用的没被废除掉的
如上图所示次要分为三大阶段：
挂载阶段：
constructor：初始化数据，挂载前（只在页面加载时执行一次）
render： 渲染数据 /dom 片段到页面（非一次性，可屡次触发）
componentDidmount 挂载后（一次性，个别用于发动 ajax 申请）
更新阶段：
render 渲染数据 /dom 片段到页面（非一次性，可屡次触发）
componentDidUpdate 更新实现（能够屡次执行）
卸载阶段：
componentWillUnmount 卸载实现（在页面敞开或者更换组件时触发，个别用于革除定时器或者终止 axios 申请）
具体应用中 React 跟 Vue 的比照
Vue 和 React 两个 JavaScript 框架都是当下比拟受欢迎的框架上面说一下他们俩大框架的区别
共同点：
都激励反对组件化开发且都容许应用 props
区别：
Vue 次要是一个以数据驱动为视图得渐进式 mvvm 框架，最大的特点就是双向数据绑定
React 是一个申明式，高效且灵便的用于构建用户界面的 JavaScript 库，与 vue 不同，他是单向数据流
从明天开始我会把 react 中的知识点都整顿一份列出来，大家记得继续关注后续会出第二阶段，看完记得留言点赞加关注哦！