react详细介绍_初始概念

• react官网 ：https://react.docschina.org/

react的定义

• 用于构建用户界面的 JavaScript 库
• React 不是一个 MVC 框架，仅仅是视图（V）层的库

开发团队方面

• React是由FaceBook前端官方团队进行维护和更新的，因此react技术团队实例比较雄厚
• Vue 第一版主要作业者是尤雨溪专门维护的，当Vue更新到2之后又一个一尤玉溪为首的团队在维护。

移动Appk开发体验方面

• Vue结合Weex这门技术，提供了迁移到移动端App开发的体验
• React 结合ReactNative,也提供了无缝迁移到移动App的开发体验（RN用的最火）

前端三大主流框架

• Angular.js：出来的比较早前端框架,学习曲线比较陡,NG1学习比较麻烦,之后进行一系列改革,同时也提供了组件开发的概念,从NG2开始，也支持ts(TypeScript)
• Vue,js:(最火)关注的人最多的一门前端框架，他是中国人尤玉溪开发的，对于我们来说相对友好一点。
• React.js：最流行,用的人也是最多的一个框架，因为他的设计很优秀

React和Vue的对比

组件方面
1.什么是模块化：是从代码的角度老进行分析，把一些可用的代码，抽离位单个模块
2,什么是组件化:是从UI界面的角度来进行分析的，把一些可服用的U元素,抽离位单独的组件，便于项目的开发和维护
3.组件的好处：随着项目的增大，手里的组件越来越多很方便的把现有的组件拼接位一个完整的页面。
4.Vue如何实现组件化：通过.vue文件，来创建对应的组件。

template结构 script行为 style样式

使用react的公司

Facebook  instagram  Netflix  纽约时报  雅虎  WhatsApp Codecademy Dropbox Aribnb   Asana  微软

diff介绍

创建虚拟dom,并且渲染到页面上

• 虚拟dom的定义 ：虚拟dom 是描述dom节点的js对象来进行。
• diff 算法：计算最小差异，局部更新dom
• react元素：通过createElement创建出来的就是react元素

---

• jsx
  。是javascript表达式，可以使用babel转换
  。是js的一个方法
  。标签必须成对出现，单标签必须严格闭合
  。语法跟html非常相似
  。符合xml规范的JS语法
  。并不是直接把jsx渲染到页面，而是内部通过babel转换成createElement形式再渲染
  。注释 {/**/}
  。用className添加class类名
  。htmlFor替换label中的for属性
  .。jsx运行更快，在编译js代码后进行了优化，更加简单快捷，安全。
• 规则
  。一个react元素必须要有一个根节点
  。遇见<>解析html模板，遇见</>解析结束
  。 遇见{开始解析js,遇见}js解析结束
• 语法：<div className='name'></div> || <input value={1+2} />
  
  
• 生成虚拟dom

function createElement(tag, props, children) {
   
    return {
   
        tag,
        props: {
   ...props},
        children: [...children]
    }
}
let p = createElement("p", {
   
    class</