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中的知识点都整顿一份列出来，大家记得继续关注后续会出第二阶段，看完记得留言点赞加关注哦！